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

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.

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:

• Download and install the latest version of Visual Studio Code.
• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Some familiarity with setting up a Vue.js project may be beneficial.

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:

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

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

cd vue-eslint-vetur-example

Then, open the project in Visual Studio Code:

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 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:

Syntax highlighting for Vue projects is now supported.

Updating User Settings

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

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

{
  "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.

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:

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

{
  "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:

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:

{
  "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.