使用eslint和editorconfig规范代码

• 规范代码有利于团队协作
• 手工规范费时费力，准确性不令人满意
• 可以配合编辑器自动提醒，提高开发效率

1.eslint[lint:检测]

1.1 随着ECMAScript版本一直更新的Js lint工具，插件丰富，并且能够套用规范，规则丰富，能够满足大部分团队需求。
1.2 eslint可以配合git，可以再git commit代码时，使用git hook调用eslint进行代码规范验证，不规范的代码无法提交到仓库。

2.editorconfig

2.1 不同编辑器队文本的格式会有一定的区别，如果不统一一些规范，可能跟别人合作的时候每次更新下来别人的代码会出现一大堆报错。

3.配置

• 3.1 安装eslint ESLINT官网 + NPM包官网

$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