potentially fixable with the `--fix` option

Question

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?

Is your editor formatting on save? Is it doing it the same way ESLint enforces? — jonrsharpe, Jan 13 '19 at 21:29
I asked two questions, which were you answering? If you're asking whether your editor should be applying the same formatting that your linter expects: yes, otherwise you *keep having to reformat it*. — jonrsharpe, Jan 13 '19 at 21:39
Yeah you right. My answer would fit both of your questions. Yes it was for the first one. Thanks for the explanation — Ricardo Moreira, Jan 13 '19 at 21:47

score 44 · Accepted Answer · edited May 12 '22 at 08:47

44

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
}

edited May 12 '22 at 08:47

kissu

24,311
11
36
67

answered Jan 16 '19 at 04:45

Mahamudul Hasan

2,552
2
15
23

1

Can you give a line by line explanation for lines 2 to 5? MIght be valuable for posterity – ledawg May 20 '21 at 20:59
@ledawg this is nowadays not a needed solution anymore. – kissu Jul 26 '21 at 09:59
2

Funny I keep running into these issues in 2021 then... – ledawg Aug 02 '21 at 00:25

score 9 · Answer 2 · edited May 12 '22 at 08:48

9

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
      }
    })
  }
}

edited May 12 '22 at 08:48

kissu

24,311
11
36
67

answered Jul 12 '20 at 07:18

Nilanshu Jaiswal

1,495
3
19
34

score 0 · Answer 3 · answered May 12 '22 at 08:53

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.

potentially fixable with the `--fix` option

3 Answers3