potentially fixable with the `--fix` option

I am creating a app with nuxt.js but everytime I launch the app, gives me the error of eslint and saying "potentially fixable with the --fix option."

I did the command npm run lint -- --fix and it works but then If I do another change in any vue file it comes again the same error and I have to do it again

Any idea of how to fix that?

Use the below configuration into nuxt config file:

build: {
  extend(config, ctx) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/,
      options: {
        fix: true
      }
    })
  }
}

Important part is:

options: {
  fix: true
}

Extend the build in the nuxt.config.js file

build: {
  extend(config, ctx) {
    config.module.rules.push({
      enforce: "pre",
      test: /\.(js|vue)$/,
      loader: "eslint-loader",
      exclude: /(node_modules)/,
      options: {
        fix: true
      }
    })
  }
}

If you're using VScode, I recommend doing a full ESlint configuration in your project as I've explained here.

Having this ESlint extension and that in your settings.json (accessible via Command Palette)

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true, // this one will fix it on save for you
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

On top of a simple .eslintrc.js file like this

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: ['@nuxtjs']
}

Followed by this in the settings UI, should give you a great DX.