当前解决方案

● 使用 editorconfig 控制书写代码期间的基本风格统一。
● 使用 eslint 做代码语法检查，实现代码质量控制。
● 使用 prettier 做代码格式化，实现统一风格。
● git commit 之前执行自动修复，无法自动修复的地方手动修改。

ps: 由于 eslint 也包含了代码格式化功能，所以 prettier 仅做非 js 类代码(js/ts/tsx/jsx)的格式化。

VSCode 环境配置(IDE 的配置此处只以 VSCode 为例)

○ 目的是让 IDE 插件的格式化与命令行执行命令的格式化统一使用 prettier。
○ 安装如下插件：EditorConfig for VS Code、ESLint、Vetur、Prettier-Code formatter。
○ 由于跟 Prettier 重复与键位冲突，如果有 Beautify 插件则删掉。
○ 打开 VSCode 的 setting.json 文件，增加如下配置内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*************vetur相关*****************/
"vetur.format.defaultFormatter.html": "prettier",
"vetur.validation.template": false,
"vetur.validation.script": false,
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
/*************eslint相关*****************/
"eslint.format.enable": true,
"eslint.validate": [
    {
        "language": "javascript",
        "autoFix": true
    },
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],
/*************prettier相关*****************/
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[sass]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

本机环境配置

◇ 考虑版本兼容不推荐全局安装 eslint，通过全局安装 eslint-cli 以实现对全局 eslint 命令的支持。

项目内配置

◆ 根目录下的”.editorconfig” 文件内容如下(此处以空 2 格作为标准)：

1
2
3
4
5
6
7
8
9
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

◆ 运行如下命令以安装 eslint、babel-eslint、prettier、eslint-config-google、eslint-config-prettier、eslint-plugin-prettier

1
yarn add -D eslint babel-eslint prettier eslint-config-google eslint-config-prettier eslint-plugin-prettier

◆ 根目录下的”.prettierrc”文件内容：

1
2
3
4
5
6
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 140,
  "endOfLine": "lf"
}

◆ 根目录下的”package.json” 文件中增加名为”codecheck”的 script：

1
"codecheck": "eslint --ext .jsx,.js,.vue,.ts,.tsx --fix src && prettier --write src/**/*.(css,scss,less) --log-level warn"

vue 项目

◇ 安装 eslint-plugin-vue（使 eslint 支持 vue 语法的官方插件）
◇ 根目录下的”.eslintrc.js”文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    root: true,
    extends: ['google', 'plugin:vue/essential', 'plugin:prettier/recommended'],
    env: {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "node": true
    },
    parserOptions: {
      parser: 'babel-eslint',
      sourceType: 'module'  //配置JS文件加载模式: script--script标签方式 module--es6的import方式
    }
}

react 项目

● 安装 eslint-plugin-react
● 根目录下的”.eslintrc.js”文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
    root: true,
    extends: ['google', 'plugin:react/recommended', 'plugin:prettier/recommended'],
    env: {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "node": true
    },
    parser: 'babel-eslint',
    parserOptions: {
      sourceType: 'module'
    },
    settings:{
        react: {
            version: 'detect'
        }
    }
}

如果使用了 babel-eslint 无法识别的 typescript 特性

○ eslint 的 parser 改用“@typescript-eslint/parser”，并安装“@typescript-eslint/eslint-plugin”插件：

1
2
yarn remove babel-eslint
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

○ “.eslint.js”文件修改如下部分：

1
2
3
4
{
  plugins: ["@typescript-eslint"],
  parser: '@typescript-eslint/parser',
}

手动进行代码检查

○ 命令行运行：npm run codecheck

强制进行 git 提交前的代码检查

△ 预备知识：
（1）通过在 git hooks 里配置各种预处理脚本，比如代码检查或者跑单元测试之类的事情，如果我们的代码没有通过代码检查或者测试用例覆盖率不够，我们的 push 甚至 commit 会直接被拒绝。
（2）预处理脚本位于 git 项目下隐藏文件夹“.git”的“hooks”文件夹中。
△husky 可用于自动完成上述动作，使用方法：
（1）安装 husky。
（2）执行”npx husky install”打开 git hooks 支持。
（3）为使项目每次 install 之后默认执行（2）中命令，在 package.json 的“scripts“中添加如下内容：

1
2
3
4
"script": {
   "prepare": "husky install",
   ... ...
}

（4）将代码检查命令添加为 hook，执行：npx husky add .husky/pre-commit “npm run codecheck”，此命令将创建文件”.husky/pre-commit”，文件内容如下。

1
2
3
4
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run codecheck

△ 以上操作之后，项目 commit 前将自动执行代码检查脚本，结果将在执行 commit 的窗口中输出。

△ 对 codecheck 的改进
（1）当前 codecheck 脚本对指定范围的代码做全量处理，当代码量大时会拖慢速度。此时可使用”lint-staged”将范围限定在处于 staged 状态的文件(即文件被执行过 git add)。
（2）安装 lint-staged，将如下 lint-staged 的配置增加到 package.json 文件的第一级字段，lint-staged 也支持其他配置方式，参考官方文档：

1
2
3
4
"lint-staged": {
  "./src/!(**/node_modules)/*.{ts,tsx,js,jsx,vue}": "eslint --fix",
  "./src/!(**/node_modules)/*.{css,scss,less}": "prettier --write"
}

（3）将 husky 的 pre-commit 内容改为: yarn lint-staged。

常见问题

◇ 某些必须违背规则的地方（如服务器接口的参数），通过如下 eslint 专用注释忽略对其做自动化检查与格式化，例：

1
2
3
4
5
6
7
8
9
10
axios({
    method: 'get',
    url: 'oneUrl',
    data: {
       /* eslint-disable */
       para_first: 1,
       para_second: 2
      /* eslint-enable */
    }
})

◇ prettier 命令中的 file pattern 之前使用的是”src/**/*.{css,scss,less}”，当查找不到任何文件时候会报“No files matching the pattern”错误，改成”src/**/*.(css,scss,less)”就没有这个问题了。

参考文献

●prettier 官方文档
●file pattern 语法
●husky 官方文档
●ESLint + VSCode: How to Format Your Code Using .eslintrc