Best Code Editor for Vue.js

This lesson is from Vue Mastery’s Real World Vue course

With a growing number of quality code editors to choose from, you might be wondering what’s the best code editor for Vue.js. Some developers are as committed to their editors as they are to their political beliefs, so you’ll get different answers depending on whom you ask.

But when it comes to coding in Vue, one of the best people to ask is Evan You, the creator of Vue. So what does he use? Visual Studio Code.

In an interview, he was asked about the subject, and he replied:

…I switched back and forth until recently I started using TypeScript and because VS Code TypeScript is so good, I switched (permanently) to VS Code.

While Vue doesn’t require you to use TypeScript, its source code will soon be written in it, as we covered in this post on Vue 3.0.

You might be thinking… But I’m not working on the source code, and I don’t code Vue with TypeScript, is VS Code still relevant for me?

That brings me to the subject of Vetur, which is a feature-rich extension that gives you stuff like syntax-highlighting in .vue files, snippets, linting, error-checking and formatting, as well as auto-completion and debugging. At this point it’s the best Vue extension for a code editor. And it ought to be, because it’s developed by Pine Wu, who is a member of the Vue core team.

So if you’re interested in using VS Code for Vue development (or already are), you can follow along below as I show you how to optimize VS Code.


What are we going to learn?

We’re going to be learning how to:

  • Get syntax highlighting in our .vue files
  • Utilize code snippets for a faster workflow
  • Configure our editor to auto-format our code
  • And explore other helpful extensions that’ll improve our development experience

Installing Vetur

There are several features that make VS Code a great environment for Vue development, including Vetur, a plugin designed by Pine Wu, a core member of the Vue.js team.

Here in VS Code, if we open up a .vue file, such as this About.vue file, we see all of this gray code. That’s because VS Code won’t automatically highlight the syntax in .vue files.

Vetur can fix this for us, and give us other features designed to improve the developer experience.

So let’s install it now. Open the extensions store.

Then search for “Vetur”, select it in the search results, and click Install. Then click Reload.


Vetur’s Features

Now that Vetur is installed, let’s take a look at its features.

Syntax Highlighting By typing command + P, and typing the name of a .vue file, we can open up the About.vue file. As you can see, now our code is getting proper syntax highlighting. Awesome - no more gray code.

Checking the Home.vue file, we can see that our JavaScript is also being highlighted correctly.

Snippets Another feature Vetur comes packaged with his code snippets. These are time-saving “snippets” of code that allow you to quickly create commonly used chunks of code.

Let’s create a new component to see this in action. We’ll name is EventCard.vue. Now, if we type the word “scaffold” into a .vue file and hit ENTER, this will auto-fill that file with the skeleton, or scaffold, of a single file .vue component.

Emmet Vetur also comes packaged with Emmet. This is a popular tool that allows you to use shortcuts to build out your code.

For example, we can type h1 and hit enter, and this will create an opening and closing h1 element.

When we type something more complex, such as div>ul>li, it will produce:

<div>
<ul>
<li></li>
</ul>
</div>

If Emmet doesn’t appear to be working for you, you can add this to your User Settings:

"emmet.includeLanguages": {
"vue": "html"
},

To learn more about how Emmet can speed up your development, go here.


Installing ESLint & Prettier

Now, we need to make sure we have ESLint and Prettier installed. In the extensions store, we’ll do a search for ESLint, then go ahead and install it. And we’ll do the same for Prettier. Once it’s installed, we’ll hit reload to reload VS Code.

Configuring ESLint

Now that these are installed, we need to add a bit of extra configuration to them.

When we created our project from the terminal, we chose to create it with dedicated config files, which gave us this .eslintrc.js file, where we can configure ESLint for this project. Had we not chosen dedicated files, we would find the ESLint configurations within our package.json.

So, in our .eslintrc.js file, we’ll add:

'plugin:prettier/recommended'

This will enable Prettier support in ESLint with the default settings.

So our file now looks like this:

module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'plugin:prettier/recommended', // we added this line
'@vue/prettier'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}

Configuring Prettier

We also have the option to create a Prettier configuration file, to add some special settings according to our personal style or our team’s preferences.

We’ll create it here and name it .prettierrc.js.

And inside, we’ll type:

module.exports = {
singleQuote: true,
semi: false
}

This will convert double quotes to single quotes, and make sure that semicolons are not automatically inserted.


User Settings

In order to further optimize VS Code for a great development experience, we’ll add some configurations to our User Settings. To access User Settings, click on Code in the top navigational bar, then Preferences, then Settings. This will bring up a User Settings window where you can add settings in json.

First, we want to add:

"vetur.validation.template": false

This will turn off Vetur’s linting feature. We’ll be relying instead on ESLint + Prettier.

Now we want to tell ESLint what languages we want it to validate (vue, html, and javascript) and set autoFix to true on each:

"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],

Then for good measure, we’ll tell ESLint to autoFixOnSave.

"eslint.autoFixOnSave": true,

And tell our editor itself to formatOnSave.

"editor.formatOnSave": true,

Testing it out

To test that this is working, we’ll add a data property to our EventCard component here, and add a quote: “I want to be single” then we’ll throw in a semicolon here, too. When we hit save, our quotes are converted into single quotes and the semicolon is removed. Awesome — it’s working.


Additional Tools

Now let’s take a look at some additional tools that can help speed up your development.

Copy Relative Path Copy Relative Path is an extension that allows you to copy the location a file lives, based on its relation to the directory to which it is linking.

Let’s search for it, install it, then see it in action.

In our Home.vue file, we see there’s a relative path here already, where we’re importing the HelloWorld component.

In order to get the relative path of a file we want to import, we’d right click on the file, then select Copy Relative Path. Now, when we paste what was copied, we see we have the accurate relative path. Notice this src. The comment here lets us know that because of the way our project is set up, we can use @ instead.

Integrated Terminal A convenient built-in feature of the VS Code editor is its integrated terminal, which you can use instead of switching over to your separate terminal. You can open it, with the keyboard shortcut: `ctrl + ``

More Snippets If you’re interested in installing some additional convenient code snippets, you can download a full suite of Vue VSCode Snippets, created by Core Vue Team Member Sarah Drasner.

Let’s search for the extension with her name, sarah.drasner. There they are. Now we can install and reload.

Let’s take a look at them in action.

If we type vif on an element in our template, that’ll give us a v-if statement, and typing von will give us a full event handler. Instead of manually typing out a data property, we can simply type vdata which will create one for us. We can do the same thing to add props with vprops. We can even use it to create the code to quickly import a libary, with vimport-lib. As you can see, these are very helpful and time-saving snippets.

Please note that if you’re using this Snippets extension, it is recommended to add a line to your User Settings:

vetur.completion.useScaffoldSnippets should be false

This will make sure these snippets aren’t conflicting with Vetur’s.

Color Themes Finally, if you’re wondering how to change your theme in VS Code, or if you’re wondering which one I’m using here, you can go to Code > Preferences > Color Theme.

As you can see, I’m using FlatUI Dark. You can change your theme color to any of these options here, or you can search for other themes in the extensions store.

If you don’t see one you want, you can also head to the Visual Studio Marketplace online. Here, you can preview tons of different plugins and themes, such as Night Owl by our friend Sarah Drasner. You can install it directly from the browser then find it in your Color Theme Preferences.

Continue Learning

To keep learning with me, you can take the full Real World Vue course, over at VueMastery.com.