- 规范代码有利于团队协作
- 手工规范费时费力，准确性不令人满意
- 可以配合编辑器自动提醒，提高开发效率
1.eslint[lint:检测]
1.1 随着ECMAScript版本一直更新的Js lint工具，插件丰富，并且能够套用规范，规则丰富，能够满足大部分团队需求。
1.2 eslint可以配合git，可以再git commit代码时，使用git hook调用eslint进行代码规范验证，不规范的代码无法提交到仓库。
2.editorconfig
2.1 不同编辑器队文本的格式会有一定的区别，如果不统一一些规范，可能跟别人合作的时候每次更新下来别人的代码会出现一大堆报错。
3.配置
$npm i eslint -D
//在项目根目录下创建文件.eslintrc用于规范输出文件
{
"extends":"standard" //需要安装
}
//在client目录下创建.eslintrc--用于规范jsx
{
"parser":"babel-eslint", //需要安装，指定babel-eslint去解析js代码，代替eslint默认的解析器
"env":{
"browser":true, //声明执行在浏览器环境，防止报错没有dom变量
"es6":true, //声明es6代码
"node":true //声明node，防止报错没有node变量
},
"parserOptions":{
"ecmaVersion":6, //定义ecma版本
"sourceType":"module" //声明写代码方式为模块化
},
"extends":"airbnb", //需要安装，美国一个踩过非常多react坑的公司总结出来的
"rules":{ //自定义规则
"semi":[0] //问号（semi）不去检查（[0]）
}
}
//webpack.config.client.js下添加rules
{
enforce:"pre", //在其他的loader之前进行此loader，如果出错则不进行下面的loader
test:/.(js|jsx)$/,
loader:"eslint-loader",
exclude:[
path.resolve(__dirname,"../node_modules") //Node_modules排除
]
}
//安装依赖包[airbnb包安装时会提醒包缺失]
$npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-react \
\ eslint-plugin-promise \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-standard -D \
//安装并且配置好后
npm run dev:client
//如果有不符合规范的，会在控制台打印ERROR，以及文件，行数
//eslint行注释:行末添加 【//eslint-disable-line】，之后eslint对该行代码不进行检测
//eslint提示会有很多优化方面的提示
- 3.2 安装editorconfig
//根目录下新建.editorconfig
root = true
[*]
charset=utf-8
indent_style=space
indent_size=2
end_of_line=lf
insert_final_newline=true
trim_trailing_whitespace=true
//webstorm本身已经集成editorconfig
- 3.3 git时使用eslint检测
$git init //本地项目git仓库化，需要安装git
$npm i husky -D
//package.json添加script
"lint":"eslint --ext .js --ext .jsx client/",
"precommit":"npm run lint"
$git commit -m "asds"
//husky会执行precommit 命令
//如果lint不通过，控制台会eslint出ERROR