Vue-cli: lintOnSave dont work

[lokkomokko]

Version

3.0.0-rc.3

Reproduction link

http://joxi.ru/L21oRqOu8g1KEr

Steps to reproduce

when I save vue file lintOnSave dont work

What is expected?

I just wanna use standard eslint config and auto fix bug on save

What is actually happening?

nothing good

---

[email protected]

[LinusBorg]

This doesn't contain runable reproduction, only a screenshot.

It also doesn't contain a real description of the problem. "nothing good" doesn't tell us anything.

Please provide a reproduction and a real description or we have to close the issue.

[lokkomokko]

Wait please, i just wanna serve my project with --fix option, is it real ?

[LinusBorg]

I don't understand what you are asking, sorry.

[revelt]

Hi guys, the title of the post is imprecise, it should have said "auto fix on save".

The body of the issue description mentions: "I just wanna use standard eslint config and auto fix bug on save". It's exactly that - out of the box, Vue CLI should have autofix enabled or give some clues how to enable autofix. I came here looking how to enable an automated Prettier fixing because "errors" like that are tedious to fix manually:

What i find strange is that CLI doesn't offer the option to fix on save, only fix on commit:

@LinusBorg should we remove the "typescript" tag? It's a universal issue, not typescript-related...

cheers

[Akryum]

We won't enable this by default since it has a caveat. This can be configured in vue.config.js though.
https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
https://github.com/webpack-contrib/eslint-loader#fix-default-false

[Akryum]

Also, running the lint script will auto-fix by default.

[revelt]

@Akryum thank you! I was not aware about lint autofix, indeed it does autofix. 👍 I'll see if I can wire up automated fix on save, hopefully it's not too complicated. Thank you again.

[LinusBorg]

I usually do auto fix on save through the eslint integration of my editor (vs code)

[mario-d-s]

@Akryum can the docs and CLI generator be modified as well? If it offers the option to "Lint on save", it should just work out of the box or not include that option.

Also I explicitly set lintOnSave: true in vue.config.js but it doesn't make a difference. Checked code here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/index.js#L35. Unless I'm missing something, the fix option is never injected into the webpack config and the option is completely ignored...

[revelt]

@mario-d-s just to confirm, we're talking about automatic fixing of linting errors. It's not necessarily a default behaviour of linting in general or ESLint. To be very precise, Vue CLI does what it promises when project is initiated with "Lint on save" — _it does lint on save_, it just doesn't automatically fix linting errors. It will only report linting errors into the console and do nothing about it.

If I understood your intention was to set up autofix, wasn't it? In that case, lintOnSave: true in vue.config.js is pointless anyway.

I wish _autofix_ came as an option in CLI wizard but @Akryum mentioned there are "caveats" for that, which must be bad enough for guys not to set it up at the first place. I trust the Vue team.

[Akryum]

The caveat is here: Be careful: this option might cause webpack to enter an infinite build loop if some issues cannot be fixed properly.

[mario-d-s]

@revelt oh my god I just realized my mistake 🤦‍♂️ ... now I get it. And yes I do see linting errors and warnings when saving and the dev server is running so it works. My bad!! Thanks for clarifying.

[revelt]

no worries!

[moritzjacobs]

Anybody got this working with vue.config.js?

[volokolamskspb]

I'm running eslint with vue-cli but it doesn't autofix errors in .vue files.
package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint src/*/** --fix"
  },

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    indent: ["warn", 4]
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 6
  }
};

vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
            .rule("eslint")
            .use("eslint-loader")
            .options({
                fix: true
            });
  }
};

Versions

 "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  }

What am I doing wrong?

[happilymarrieddad]

Not sure if this is helpful but I just added the above code to my vue.config.js and it started working.

const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .options({
        fix: true,
      });
  },
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json', '.scss'],
      alias: {
        styles: path.resolve(__dirname, 'src/assets/scss'),
      },
    },
  },
};

[colinwagaba]

@happilymarrieddad it helps! Thanks, everyone for your contributions.