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"