Tutorial

How To Integrate ESLint with Vue.js and Vetur in Visual Studio Code

Updated on July 28, 2021
Default avatar

By Daniel Schmitz

How To Integrate ESLint with Vue.js and Vetur in Visual Studio Code

This tutorial is out of date and no longer maintained.

Introduction

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs, checking the code formatting, unused variables, etc.

Through this tool, we will be made aware of whether we are using the correct formatting for the project, whether the braces are in the right place, whether or not there is a semicolon at the end of the line, whether there is an unused import, among others.

Note: This tutorial contains configuration settings and default values for earlier versions of ESLint and Vue.

In this article, you will learn how to configure Visual Studio Code with ESLint rules for handling Vue.js projects.

Prerequisites

To complete this tutorial, you will need:

Setting Up the Project

For ESLint to work properly, you must configure it. In addition, you need to have some packages installed.

For the needs of this tutorial, we can use the default configurations from a new project generated by @vue/cli.

With Node 8 or higher installed, run the following command:

  1. npx @vue/cli create vue-eslint-vetur-example --default

Note: If you are not familiar with npx yet, now is the time to learn about it! It is a Node package runner, responsible for running the Node packages, without the need to install them globally.

After the project is created, navigate to the new project directory:

  1. cd vue-eslint-vetur-example

Then, open the project in Visual Studio Code:

  1. code .

Open the src/App.vue file.

If this is your first time using Visual Studio Code with Vue, you will notice that there is no syntax highlighting:

Visual Studio Code without Vue extensions and without syntax highlighting.

Visual Studio Code will warn you, in the lower right corner, that there are extensions available for Vue.

Here are some good extensions to start with:

  • Vue
  • Vue 2 Snippets
  • Vue Peek
  • Vetur
  • ESLint
  • Editorconfig for VS Code

After installing these extensions and restarting VS Code:

Visual Studio Code with Vue extensions installed and with syntax highlighting.

Syntax highlighting for Vue projects is now supported.

Updating User Settings

For ESLint to work correctly, you must change the VS Code preferences.

Warning: Before making changes to your settings.json file, you may wish to back up your current settings to restore them.

Go to File > Preferences > Settings and edit the User Settings file:

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

With this configuration, VS Code will perform validation for these three file types: Vue, HTML and JavaScript.

Now go back to the src/App.vue file and press CTRL+ALT+F on Windows or CTRL+SHIFT+I on Linux or CTRL+OPTION+F on MacOS to perform the formatting of the code. ESLint will validate the code and display some errors on the screen.

Screenshot of error: Missing space before function parentheses.

These errors can be corrected automatically and it is not necessary to correct each error manually. To accomplish this, you can press CTRL+SHIFT+P and select ESLint: Fix all problems:

Screenshot of VS Code Command Pallete selecting: Fix all auto-fixable problems.

We can still optimize ESLint by configuring it to perform code formatting every time we save the file:

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

This setting, eslint.autoFixOnSave, enables auto-fixing on file save. You must restart Visual Studio Code to apply this change.

We still have a problem that occurs between formatting a document and saving it:

Animated gif of errors indicated for ESLint rules for with double quotes and spacing for functions.

Formatting changed the single quotes to double quotes and removed the space between functions and parentheses.

When the code is formatted, it is not using ESLint yet, it uses VS Code’s own formatter (or another like Prettier). When VS Code saves the file, ESLint will be executed, thanks to eslint.autoFixOnSave.

To solve this problem we need some additional settings regarding the Vetur extension:

 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

With these three settings, we now have the correct configuration for ESLint to fix the errors automatically for you. In this way, we can write code and, when there are some formatting errors, ESLint will automatically fix them.

Here’s the complete list of settings for the configuration file:

settings.json
{
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ]
}

Save your changes and restart Visual Studio Code.

Conclusion

In this article, you learned how to configure Visual Studio Code with ESLint rules for handling Vue.js projects.

Continue your learning with ESLint and JavaScript projects with How To Lint and Format Code with ESLint in Visual Studio Code.

Or continue your learning with ESLint and Vue projects with How To Configure ESLint and Prettier for Vue.js.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Daniel Schmitz

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel