代码检测、规范

一、editorconfig

主要是用不同的编辑器，IDE,不同的个人在缩进和其它规范有统一的风格

1.在根目录新建.editorconfig

常用属性配置

1
2
3
4
5
6
7
8
root<boolean>:是否是顶级配置文件，设置为true的时候才会停止搜索.editorconfig文件
charset<"latin" | "utf-8" | "utf-8-bom" | "utf-16be" | "utf-16le">:文件编码格式
indent_style<"tab" | "space">：缩进方式
indent_size<number>：缩进大小
end_of_line<"lf" | "cr" | "crlf">：换行符类型
insert_final_newline<boolean>：是否让文件以空行结束
trim_trailing_whitespace<boolean>：是否删除行尾空格 
max_line_length<number>：最大行宽

文件匹配

1
2
3
4
5
6
7
*                  匹配除/之外的任意字符
**                 匹配任意字符串
?                  匹配任意单个字符
[name]             匹配name字符 
[!name]            不匹配name字符
[s1,s2,s3]         匹配给定的字符串
[num1..num2]       匹配num1到mun2直接的整数

vscode支持的属性

1
2
3
4
5
6
indent_style
indent_size
tab_width
end_of_line （保存时）
insert_final_newline （保存时）
trim_trailing_whitespace （保存时）

.editorconfig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
2.无需另外装插件的编辑器
3.需要另外装插件的编辑器
4.VSCode直接安装拓展EditorConfig for vs code

二、eslint

代码规范,代码检测，配置什么就检测什么。create-react-app模版已经内置了eslint，假如需要扩展，可以在根目录新建配置文件重写配置

1.根目录创建.eslintrc.js

一些常用的配置（typescript-eslint rules, eslint rules)

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  parser: "@typescript-eslint/parser",//指定解析器，将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用
  extends: [//继承插件规则
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "plugin:prettier/recommended"
  ],
  plugins: ["@typescript-eslint", "react","react-hooks"],//第三方插件
  rules: {
    "prettier/prettier": "error",//prettier标记的地方抛出错误
    "@typescript-eslint/no-explicit-any": "off",//关掉any报错
    "@typescript-eslint/interface-name-prefix": "on",//interface IAnimal这样是不允许的
    "@typescript-eslint/class-name-casing": "off",
    "@typescript-eslint/camelcase": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "no-empty-function": "off",
    "@typescript-eslint/no-var-requires": 0, //允许使用require引入包
    "@typescript-eslint/no-empty-function": [
      "error",
      { allow: ["functions", "arrowFunctions", "methods"] }
    ]
  }
};
2.创建.eslintignore文件，配置无需代码检测的文件

.eslintignore

1
2
3
4
5
6
/scripts
/config
/node_modules
/public
/dll
/docker

三、Prettier

prettier,自动格式化，让代码风格统一

（1）vscode安装拓展Prettier - Code formatter
（2）安装依赖

eslint-config-prettier避免prettier，eslint配置冲突
eslint-plugin-prettier调用prettier风格对代码进行检查

1
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
（3）创建.prettierignore文件，配置无需格式化的文件

.prettierignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
**/*.svg
package.json
/dist
/dll
/script
/config
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log

四、.vscode

统一大家的vscode配置

1.根目录创建.vscode文件夹或者在settings里面选择Edit in settings.json自动创建

settings.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "editor.tabSize": 2, //tab 两格
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true, // eslint保存格式化（所有支持的语言）
  "prettier.eslintIntegration": true, // 让prettier遵循eslint格式美化
  "editor.defaultFormatter": "esbenp.prettier-vscode", //设置prettier为默认格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" //设置prettier为默认格式化工具
  }
}

五、husky

哈士奇，git hooks,允许执行某个git操作前或者后，执行某个脚本，类似一个监听事件。一般项目中与lint-staged一起使用

1.安装依赖
1
npm install husky --save-dev
2.在package.json中配置
1
2
3
4
5
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"  //代码提交前使用lint-staged检查代码
    }
  },

六、lint-staged

lint-staged，对git暂存区的代码，进行lint检测

1.安装依赖
1
npm install lint-staged --save-dev
2.在package.json中配置
1
2
3
4
5
6
7
"lint-staged": {
    "**/*.{js,jsx,tsx,ts}": [
      "eslint --fix --ext .js,.jsx,.ts,.tsx",
      "prettier --write",
      "git add"
    ]
  }