说明

Vue项目配置eslint+prettier的流程，别的类型的项目可以稍作修改，大致流程差不多。

配置

1. VSCode安装eslint和prettier插件

image.png image.png

2. VSCode的setting中配置

  1. // 配置eslint 对 vue 文件生效
  2.   // @see: https://github.com/vuejs/eslint-plugin-vue/issues/327#issuecomment-355729002
  3.   "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  4.   "[vue]": {
  5.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  6.   },
  7.  // 保存时自动修复，根据情况配置
  8.   "editor.codeActionsOnSave": {
  9.     "source.fixAll": true,
  10.     "source.fixAll.eslint": true
  11.   },

3. 项目中安装eslint，eslint-plugin-vue

eslint-plugin-vue：针对vue的eslint规则插件（如果是别的类型的项目，可以使用别的插件，如eslint-plugin-react等，vue相关配置做适量修改即可）

  • 使用vue-cli

    1. vue add @vue/cli-plugin-eslint

  • 使用npm

    1. npm install --save-dev eslint eslint-plugin-vue

  • 使用yarn

    1. yarn add -D eslint eslint-plugin-vue

    Requirements

    • ESLint v6.2.0 and above
    • Node.js v8.10.0 and above

4. 项目中安装prettier，eslint-plugin-prettier， eslint-config-prettier

eslint-plugin-prettier：Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
eslint-config-prettier：禁用与格式化相关的eslint规则（因为prettier和eslint规则可能会有冲突）

  1. npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

5. 项目根目录下配置.eslintrc 和 .eslintignore

.eslintrc

  1. {
  2.   "env": {
  3.     "browser": true,
  4.     "commonjs": true,
  5.     "es6": true,
  6.     "node": true,
  7.     "jest": true
  8.   },
  9.   "parserOptions": {
  10.     "parser": "babel-eslint",
  11.     "sourceType": "module",
  12.     "ecmaVersion": 2020
  13.   },
  14.   "extends": [
  15.     "eslint:recommended",
  16.     // "plugin:vue/base",
  17.     // "plugin:vue/essential",
  18.     // "plugin:vue/、strongly-recommended",
  19.     // 'plugin:vue3/recommended' // Use this if you are using Vue.js 3.x.
  20.     "plugin:vue/recommended", // 包含了base、essential、strongly-recommended
  21.     "prettier",
  22.     "prettier/vue"
  23.   ],
  24.   "rules": {
  25.     // override/add rules settings here, such as:
  26.     "quotes": [ "error", "single", { "allowTemplateLiterals": true } ]
  27.     // 补充需要配置的规则
  28.   },
  29.   "plugins": ["vue"]
  30. }

.eslintignore 不需要执行eslint的文件

  1. node_modules

6. 项目根目录下创建 .prettierrc 和.prettierignore文件，配合eslint规则进行修改

.prettierrc

  1. {
  2.     "bracketSpacing": true,
  3.     "endOfLine": "lf",
  4.     "printWidth": 80,
  5.     "semi": true,
  6.     "singleQuote": true,
  7.     "tabWidth": 2
  8.  }

如果prettier格式化时不生效，将prettier降级到1.19.1，暂未知原因 npm install -D prettier@1.19.1

.prettierignore 不需要执行prettier的文件

  1. node_modules

7. package.json中配置提交时校验

  1. "gitHooks": {
  2.     "pre-commit": "lint-staged"
  3.   },
  4.   "lint-staged": {
  5.     "*.{js,jsx,vue}": [
  6.       "vue-cli-service lint",
  7.       "git add"
  8.     ]
  9.   }

运行

执行VSCode快捷键 Ctrl+Alt+F 即可按.prettier中配置的规则进行格式化，如果第二步中配置了antosave相关的保存时会按照.eslintrc中配置的规则自动修复。