ESLint & Prettier in Nuxt + VSCode

This is how to configure Nuxt with ESLint and Prettier + VSCode to format source on save.

• Install dependencies in project folder:

$ npm install eslint babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-loader prettier -D

• Create .eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: [
    "plugin:vue/recommended",
    "eslint:recommended",
    "prettier/vue",
    "plugin:prettier/recommended"
  ],
  rules: {
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  globals: {
    $nuxt: true
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

• Install required extensions for VSCode in File → Settings → Extensions: ESLint, Vetur
• Create .vscode/settings.json in project folder:

{
  "editor.formatOnSave": true,
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

- based on tutorial by Alex Gogl

Comments

[Pacharapol Withayasakpunt]

Apparently, the easiest way is to just use npx create-nuxt-app, and you have a choice to include everything.

But, VSCode settings can be actually hard for newcomers.

[Adam Mateusz Brożyński]

Yes, but this article is aimed on non-standard configurations like laravel-nuxt and laravel-nuxt-js by Cristian Pallarés.

[hamedf62]

Thank you...

[Yilmaz]

Thank you