<工程化>代码检查

Prettier

  • https://prettier.io/
  • 用于构建统一的编码风格
  • Prettier 是一个 Opinionated 的代码格式化工具
  • 使用 prettier-quick 格式化代码
1
2
3
4
5
6
7
npm install --save-dev prettier pretty-quick
// package.json 配合 husky 在提交阶段格式化代码
"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}
  • 配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// .prettierrc
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};
  • 配置 .prettierignore 忽略文件

EsLint

  • https://cn.eslint.org/
  • 除了编码风格检查，还可以允许开发者在执行前发现代码错误或不合理的写法
  • 规则插件化，可插拔（随时开关），使用 Espree 解析 js，使用 AST 分析语法
  • 配置：
    env：表示指定想启用的环境。
    extends：指定额外配置的选项，如 [‘airbnb’] 表示使用 Airbnb 的 Linting 规则。
    plugins：设置规则插件。
    parser：默认情况下 ESLint 使用 Espree 进行解析。
    parserOptions：如果将默认解析器更改，需要制定 parserOptions。
    rules：定义拓展并通过插件添加的所有规则。
1
2
3
4
5
6
7
8
9
// .eslintrc.js 文件
module.exports = { 
   env: {}, 
   extends: ['eslint-config-prettier'], 
   plugins: {}, 
   parser: {}, 
   parserOptions: {}, 
   rules: {},
}
  • 与 prettier 一起使用，安装 eslint-config-prettier 在 extends 中配置
  • package.json 中配置：结合 husky、lint-staged
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "scripts": {
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": [
      "stylelint --fix",
      "git add"
    ],
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
      "git add"
    ],
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.{js,ts,tsx}": "npm run lint-staged:js"
  }
}
  • 通过 .eslintignore 配置 esLint 忽略文件

styleLint

husky

  • husky 是 Git 的一个钩子，在 Git 进行到某一时段时，可以交给开发者完成某些特定的操作

lint-staged

  • 在 git 暂存文件上运行 linters 的工具
  • 整个项目运营 lint 会很慢，使用 lint-staged 可以只针对更改的文件进行检查

参考