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"