前端 - 已经安装和配置好eslint插件以及prettier，为什么不可以自动修复还疯狂报错？

Question

报错：

ERROR in [eslint] 
/Users/yangqing/VS code/Vue/v7/code/demo/src/App.vue
  18:8   error  Expected space(s) after "default"            keyword-spacing
  23:7   error  Expected space or tab after '//' in comment  spaced-comment
  27:10  error  Missing space before function parentheses    space-before-function-paren

/Users/yangqing/VS code/Vue/v7/code/demo/src/components/Router1.vue
   9:1  error  Trailing spaces not allowed                    no-trailing-spaces
  18:9  error  Newline required at end of file but not found  eol-last

/Users/yangqing/VS code/Vue/v7/code/demo/src/components/Router2.vue
  12:1  error  Trailing spaces not allowed                    no-trailing-spaces
  21:9  error  Newline required at end of file but not found  eol-last

✖ 7 problems (7 errors, 0 warnings)
  7 errors and 0 warnings potentially fixable with the `--fix` option.


webpack compiled with 1 error

在setting.json中的配置：

{ 
"prettier.configPath": "/Users/yangqing/.prettierrc",  
// 安装Prettier配置
  "eslint.alwaysShowStatus": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  // 每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300,
  // 使用单引号替换双引号
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  // 设置 .vue 文件中，HTML代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "trailingComma": "none",
      "singleQuote": true,
      "semi": false,
      "arrowParens": "avoid",
      "printWidth": 300
    },
    "js-beautify-html": {
      "wrap_attributes": false
    },
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "editor.formatOnPaste": true,
  "python.defaultInterpreterPath": "/usr/local/bin/python3",
  "[python]": {
    "editor.formatOnType": true
  },
  "workbench.colorTheme": "Community Material Theme Palenight High Contrast",
  "settingsSync.ignoredExtensions": [],
  "workbench.sideBar.location": "right",
  "git.openRepositoryInParentFolders": "always",
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.fontLigatures": false,
  "settingsSync.ignoredSettings": [],
  "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.tabSize": 2
}

.prettierrc的配置信息：

{
   "trailingComma": "none",
   "semi": false,
   "singleQuote": true,
   "arrowParens": "avoid",
   "printWidth": 300
}

Answer 1

自动处理一般都是在保存的时候处理的，并不会自动处理所有问题。而且有一些地方的Lint规则可能会影响到业务代码，比如说 == 和 === 的问题（eqeqeq | ESLint）我记得是需要手动去修复的。

---

运行 npm run lint --fix 一下看看，不过也得看你的 packages.json 里面有没有配置这个脚本。
我们项目中是有的：

"scripts": {
  "dev": "vue-cli-service serve",
  "dev:stage": "vue-cli-service serve --mode stage",
  "build:dev": "vue-cli-service build --mode development",
  "build:stage": "vue-cli-service build --mode stage",
  "build:prod": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

如果没有的话，可以得看你试试用的什么CLI创建的，VueLCLI创建的就可以参考我们项目中的这个脚本。
如果不是的话，一般来说可以用：

"scripts": {
  "lint": "eslint --ext .js,.vue src"
}