Vue project with Vue CLI3, ESLint, Prettier in VS Code

Working example: https://github.com/akozyreva/vue-eslint-prettier

Formatting code on the fly and highlighting errors are extremely important, while you’re working, and I was surprised, how it’s difficult to configure properly yours IDE for it. In this article I will try to describe, how to configure you Vue.js project properly in VS Code.

1 Step. Initializing new project with Vue CLI3.

Let’s start with creating new project. Please, install Vue CLI3 firstly, if you haven’t done it already. Please, be careful — if you have older Vue CLI, you should uninstall old version firstly:

# delete old vue-cli
npm uninstall vue-cli -g
# install vue-cli3
npm install -g @vue/cli

Now, please open your terminal and switch to the folder, where you want to create a new project by the command (vue create <name-of-your-project>)

After some waiting you see, that you can choose preset, please select Manually select features and press Enter:

Now you see different options — by default Babel and Lint/Formatter are already checked. If you want, you want to choose Router, or Vuex, or whatever you want (<space> — for select, <a> — toggle all, <i> — to invert selection). We don’t need this, so we simply press Enter for the next step.

In the next step you see proposed ESLint configurations — please, choose ESLint+Prettier (is checked by default) and press Enter.

I prefer to check lining errors every time, when I save files — so, I choose Lint on Save in the question of choosing additional lint features and go further.

The next question is very simple — choose the the place for config files of Babel, ESLint, etc. — I think the first option In dedicated config files is better than In package.json.

I don’t want to save my choice as a preset — so, I chose No in the last question and then wait, until installation will be finished.

After some time you see something like this:

So, let’s switch to the project directory and run the server:

cd <name-of-your-project>
npm run server

When it will be compiled, you see, that you can go on localhost:// and see you application!

2 Step. Installation VS Code Plugins.

The next step will be to install required plugins for VS Code. So, it’s rather simple, go to the Code ->Preferences -> Extensions, find extension and press button Install. Bellow is the list of extensions:

• ESLint extension;

• Prettier — Code formatter;

• Vue 2 Snippets (so, I simply like to see snippets, it’s not required for this task);

• Vetur.

3 Step. 1 attempt of trying to see errors in code.

Let’s see, what we have now. Please open your project in VS Code (File -> Open…). Then, open App.vue for example (src -> App.vue) and create a mistake — in my case I create a variable and forget about closing quotation mark:

Please open console and you should see your error:

Good thing is that ESLint and Prettier work in terminal, but VS Code doesn’t know about them and as consequence doesn’t highlight and fix errors. I want to fix it.

4. Step. Configuration of VS Code.

So, we have all extensions for validation errors in our project, but for someone reason, they don’t work. We should configure them for working correctly.

Go to the Code -> Preferences -> Settings. You see Setting Page:

Please, switch to the Workspace section and then click on sign of curly braces in right top corner:

You will see empty settings.json file. That’s is what we need. Please paste the following code:

{ 
 "eslint.validate": [    
 {     
  "language": "vue",     
  "autoFix": true   
 },    
 {     
  "language": "javascript",   
  "autoFix": true    
 },   
 {    
  "language": "javascriptreact",      
  "autoFix": true    
 }  
],  
"eslint.autoFixOnSave": true, 
"editor.formatOnSave": false,  
"vetur.validation.template": true
}

Restart VS Code. You see, that now you see warning messages in IDE:

Also, if you’re trying to write incorrect HTML, it will be automatically fixed. It will also fix you JS formatting by the fly.

Don’t hesitate to ask questions, if you have!

References

How to properly set up ESLint with Prettier for Vue or Nuxt in VSCode

How to integrate ESLint with Vue.js and Vetur in Visual Studio Code