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 46 · Accepted Answer · edited May 12 '22 at 08:47

46

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

40,416
14
65
133

answered Jan 16 '19 at 04:45

Mahamudul Hasan

2,745
2
17
26

2

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
3

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

40,416
14
65
133

answered Jul 12 '20 at 07:18

Nilanshu Jaiswal

1,583
3
23
34

score 7 · Answer 3 · answered Jul 12 '22 at 11:12

If anyone facing this issue when working with Cloud Functions try this. Find package.json file inside functions folder, replace

"lint": "eslint --ext .js,.ts .",

with

"lint": "eslint --ext .js,.ts . --fix",

Then run the command again:

firebase deploy --only functions

It should fix all issues which fixable. If any error left (sometimes 1 or 2 still left) find that one and edit manually and voila it works.

score 3 · Answer 4 · 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.

jpllosa · Answer 5 · 2022-11-17T10:38:10.647

1

Ran into this error, potentionally fixable with the '--fix' option., unfortunately npm run lint -- --fix didn't do anything. Running npm run format fixed the errors.

lint is for flagging errors
format is for fixing errors

"scripts": {
    "lint": "eslint \"**/*.{js,mjs}\" && prettier --check --loglevel warn \"**/*.{js,mjs,json}\" && stylelint \"**/*.scss\"",
    "format": "eslint \"**/*.{js,mjs}\" --fix && prettier --write --loglevel warn \"**/*.{js,mjs,json}\" && stylelint \"**/*.scss\" --fix",
}

edited Nov 17 '22 at 10:38

answered Jun 07 '22 at 20:41

jpllosa

2,066
1
28
30

Got `npm ERR! Missing script: "format"` What is your script for `format`? – Jake_3H Nov 16 '22 at 12:12

score 1 · Answer 6 · answered Mar 20 '23 at 06:31

1

I am also face the same problem.

Then I got a solution

use this command :-> npm run lint:js -- --fix

Hope your problem will be solved

answered Mar 20 '23 at 06:31

Meheraz

41
2

potentially fixable with the `--fix` option

6 Answers6