DEV Community 👩‍💻👨‍💻

Cover image for VS Code Extensions for Vue
Brent Vanwildemeersch
Brent Vanwildemeersch

Posted on • Updated on

VS Code Extensions for Vue

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
  • ... Example of categories

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.

Example of Path Intellisense behavior

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)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠