A few months ago I changed code editors from JetBrains PHPStorm to Microsoft's Visual Studio Code and one of the main reasons for the switch was that Visual Studio Code is one of the most customizable and extensible code editors available at the moment.
The past few months I tested and used several extensions that could speed up Vue development and could make it easier to start, build, test, and deploy Vue.js projects.
So here I am, listing the 5 VS Code extensions that in my opinion and experience so far are the most useful for Vue.js development in Visual Studio Code.
Vetur
Vetur will help you with syntax highlighting, snippet support, Vue IntelliSense, formatting, debugging, etc...
I find this one of the most useful extensions available for Vue development, and it will definitely speed up your development.
Vue VSCode Snippets
Setting up Vue-components, Vuex-stores, routes can be a repetitive and time-consuming task that includes typing the same code over and over again.
With the help of the Vue VSCode Snippets extension, you can supercharge your workflow by using the snippet keywords to quickly implement, for example :
- Single file component base with SCSS
- Component data as a function
- Base for Vuex store.js
- ...
This is, in my experience, an extension that can save you a lot of time and energy during development, and will remove the repetitive typing of the same code over and over again.
Prettier
Prettier is an opinionated code formatted that will enforce a consistent coding style throughout your project by parsing your code and re-printing it while taking into account all the rules that are set in place like maximum line length and other settings.
Prettier can remove the discussions during code-reviews about code styling and formatting and will literally save you time and energy during development.
Better comments
Whenever you work on a team-project or on a personal project, you will find it useful to add comments to complex pieces of code to clarify the chosen logic, or to add some additional information for teammates or for your later self.
Using the Better Comments extension will make the added comments more visible and more readable, since you can categorize the annotations into the following categories:
- Alerts
- Queries
- TODOs
- Highlights
- ...
Path Intellisense
The Path Intellisense extension will autocomplete directories and filenames, which will make it easier to work with local libraries, mixins, assets within your Vue project.
The extension is customizable at your own preference.
Conclusion
There are probably more VS Code extensions available to help you with Vue development, but the extensions listed above are the ones that I find the most useful since I switched code-editors.
I find that the ability to easily add extensions to the code editor and the ability to customize the installed extension is a real advantage for new developers or more experienced developers and is a real gamechanger during development for projects of any type.
Top comments (0)