Eslint doesn't fix the errors with vue.js

Question

First I created vue project.

npm init vue@latest

The settings are as follows.

Then I added rules to the .eslintrc.cjs.

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    indent: ["error", 4],
    "vue/html-indent": ["error", 4],
  },
}

Finally I ran the program.

cd test
npm install
npm run lint

But I got the error.

✖ 209 problems (142 errors, 67 warnings)
  142 errors and 67 warnings potentially fixable with the `--fix` option.

The setting of "scripts" in the package.json is as follows.

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

How can I fix the errors automatically?

Where do you have the error, in your code editor or console? That setup works perfectly fine on my side. — kissu, Oct 24 '22 at 01:46
Thank you. After adding `{ "tabWidth": 4 }` to the `.prettierrc.json`, the number of errors decreased. — moonris, Oct 24 '22 at 02:41
if you want to fix the errors automatically on save in VS Code you need to add "editor.codeActionsOnSave": ["source.fixAll.eslint"] in your settings.json — c.m., Oct 24 '22 at 07:25

kissu · Answer 1 · 2022-10-24T02:11:19.420

UPDATE: this is really the 4 spaces rule that is troublesome here.

I found out that restarting the ESlint server + ESlint'ing the file from VScode helps solving most of the errors (that could probably not be done) directly into the CLI.
But then, there are some conflicts regarding ESlint and Prettier.
Not sure exactly of the conflict here, even with a { "tabWidth": 4 } in .prettierrc.json.

I recommend that you also add this to your settings (type >Preferences: Open user settings (JSON) in your command palette)

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

Then type in >ESlint: Restart ESLint Server in palette too.

Oh, and don't forget to actually install the ESlint extension and disable the Prettier one.

Here is one detailed answer on how to configure it. It was done for Nuxt but still relatable in this case IMO.

Eslint doesn't fix the errors with vue.js

1 Answers1