Code style is important and eslint can significantly improve the way we write our code.


Start by installing the required packages.

$ npm install --save-dev eslint eslint-config-vue eslint-plugin-vue

Create a new file ./.eslintrc and add the configuration below.

  extends: ['vue'],
  plugins: ['vue'],
  rules: {}

Open ./package.json and define a new command.

  "scripts": {
    "lint": "eslint ./src --ext .js --ext .vue"

You can now run the npm run lint command to verify your code.

Configuring Text Editor


If you are using Atom then install the linter-eslint plugin. This will automatically install also the linter plugin.

After installation under Preferences open the Packages tab, find the linter-eslint plugin and click on the Settings button. Search for Lint HTML Files option and make sure it's marked as checked. This will enable linting in the .vue files.

results matching ""

    No results matching ""