eslint + pretteir

1. 安装eslint依赖

yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

2. 运行eslint.exe文件生成eslint.js脚本

cd node_modules/.bin/eslint --init

3. 按照项目需求完成对应配置（规定一些校验规则）

rules: { 
 'no-console': 2, //禁止使用console 
 'no-const-assign': 2, //禁止修改const声明的变量 
 'no-debugger': 2, //禁止使用debugger 
 'no-else-return': 2, //如果if语句里面有return,后面不能跟else语句
},

4. 安装prettier统一风格

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

5. 在根目录下创建.prettierrx.js(配合官方文档，根据项目调节)

module.exports = {    
"printWidth": 120, //一行的字符数，如果超过会进行换行，默认为80    
"semi": false, //在语句末尾添加分号；    
"tabWidth": 2, //一个tab代表几个空格数，默认为2   
 "singleQuote": true, //使用单引号代替双引号。    

"jsxSingleQuote": true, //在 JSX 中使用单引号代替双引号   
 "trailingComma": "all", //在多行逗号分隔的句法结构中尽可能打印尾随逗号。（例如，单行数组永远不会有尾随逗号。）    
"bracketSpacing": false, //在对象文字中的括号之间打印空格。    
"arrowParens": "avoid", //在唯一的箭头函数参数周围包含括号。    
"insertPragma": true, //插入编译指示/@format/   
 "useTabs": false
}

6. 修改eslint配置文件，

extends: ['prettier', 'plugin:prettier/recommended'], //使用推荐的React代码检测规范

7. 配置完后，对全局文件进行解析（在package.json中添加执行命令）

"lint": "eslint --fix src --ext .ts,.tsx,.js,.你文件的后缀名"

8. yarn lint

9. git 提交代码时，通过 prettier 来优化代码

• husky：一个方便用来处理 pre-commit 、 pre-push 等 githooks 的工具

• lint-staged：对 git 暂存区的代码，运行 linters 的工具

yarn add --dev lint-staged husky

// package.json
{  ...  
"husky": { 
   "hooks": {   
   "pre-commit": "lint-staged"   
 }  
}, 
"lint-staged": { 
   "src/*.{js,jsx,mjs,ts,tsx}": ["node_modules/.bin/prettier --write","node_modules/.bin/eslint --fix","git add"],   
   "src/*.{css,scss,less,json,html,md,markdown}": ["node_modules/.bin/prettier --write","git add"]  
} 
...}

完结撒花*~~