Nuxt.js with ESLint in VS Code

This is a short “note to self” type of article where a future me and perhaps someone else as well, might save some time googling for tooling configurations.

When setting up a Nuxt.js project with ESLint using create-nuxt-app version 2.10.0, I ran into this problem, where the project did not autofix on save.

I was not using Prettier so the error would stem from the ESLint integration solely. Since I had ESLint working in a previous Vue.js project out of the box, I decided to use those settings instead and installed the ESLint plugin used in the Vue.js project: npm install --save-dev eslint-plugin-vue

I then changed the VS Code settings.json file to:

{
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
}

And made the following changes to the .eslintrc.js file, where I removed the nuxt eslint extensions and added one for vue instead.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    //'@nuxtjs',
    //'plugin:nuxt/recommended',
    //'plugin:vue/recommended',
    'plugin:vue/essential',
    'eslint:recommended'
  ],
}

If you also need to add Prettier to your project, you might find some help in this post: "How to properly set up Nuxt with ESLint and Prettier in VSCode"

Comments

[Rodrigo Hernando]

Thank you so much Frida!!!!
I've been looking for over an hour on how to set up eslint properly in a Nuxt project where at least three people will work on and coding style enforcement is needed.

Is odd that Nuxt setup using npx doesn't include this configuration for eslint.

Anyway, thanks again, your post was a big time saver.

Greetings from Chile!!!
Rodrigo.

[Chuck]

Nice read. I just published an article about Nuxt, Eslint, and Prettier in Webstorm. Significant changes to Prettier that helps a lot with Vue/Nuxt.