Eslint代码检查
最近一段时间在做React开发，由于初次接触React前端框架，很多东西都不了解，所以沿用了公司React的开发模板。
完成项目架构搭建之后，上传代码到git上的时候，却一直是上传失败。
Webstorm里的 Event Log 窗口给出错误：
Push failed: Failed with error: fatal: unable to access ...由于看不到相关的错误详情，于是在command中输入git指令：
git push这时可以看到很多错误，原来上传git失败的问题是由于代码检查导致的。
在项目开发中代码检查的配置是十分重要的。随着项目的开发、代码的增多，很小的错误都可能导致页面/功能异常，而调试解决问题却可能耗费我们大量的时间。
然而这次git代码上传失败的经历也说明了一个问题，即，有一个趁手好用的代码工具该多好？
既可以检查语法字符的问题，又不会太严格导致出现上传的问题？
在这里花费了一些时间整理了一下调整Eslint的过程。参考链接： https://github.com/yannickcr/eslint-plugin-react
打开package.json，代码审查部分已经配置好了，
"devDependencies": {
"eslint": "^3.15.0",
"babel-eslint": "^8.0.1",
"eslint-plugin-react": "^6.10.0"
}npm scripts配置：
"scripts": {
...
"lint:js": "eslint app",
"prepush": "npm run lint:js"
...
}在控制台执行 git push, 可以看到下面的错误信息：
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\modules\network\network-reducers.js
3:1 error Parsing error: The keyword 'export' is reserved
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\modules\requestList\components\requestList.js
1:1 error Parsing error: The keyword 'import' is reserved这是因为没有配置parserOptions来指定语言的相关配置信息。指定ES版本ecmaVersion为7，也就是ES2016, 指定模块类型sourceType为module，此外配置一些ES Features，添加ES特性支持，使之能够识别ES6语法。如此便支持export和import来导出并引用文件。
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"arrowFunctions": true,
"classes": true,
"modules": true,
"defaultParams": true
}
}再次运行git push，控制台输出的最后信息如下：
6:5 error Useless constructor no-useless-constructor看到这条错误信息，于是便尝试在rules添加一行代码：
"no-unused-vars": 0对于rules规则的值，可以是”off”(或0), “warn”(或 1), “error”(或2)。
再次git push, 控制台提示下面的错误信息
6:5 error Useless constructor no-useless-constructor
38:21 error Expected indentation of 18 space characters but found 20 react/jsx-indent
38:73 error A space is required before closing bracket react/jsx-tag
-spacing
38:73 error A space is required before closing bracket react/jsx-space-before-closing
39:21 error Expected indentation of 18 space characters but found 20 react/jsx-indent
47:5 error Expected indentation of 2 spaces but found 4 indent
48:5 error Expected indentation of 2 spaces but found 4 indent
49:5 error Expected indentation of 2 spaces but found 4 indent同样的，参考文章开始的链接，在rules里添加代码：
"react/jsx-space-before-closing": 0,
"react/jsx-indent": 0,这时，错误信息便减少到了这几行：
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\index.js
19:5 error 'document' is not defined no-undef
24:10 error 'PropTypes' is not defined no-undef
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\sagas.js
9:28 error Empty block statement no-empty
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\store\configure-store.js
16:30 error 'window' is not defined no-undef
29:7 error 'module' is not defined no-undef
31:5 error 'module' is not defined no-undef再次添加rules：
"no-empty": 0,
"no-undef": 0最后运行git push， 代码可以成功上传！
在此贴出项目中.eslintrc文件的完整配置代码：
{
"extends": "eslint:recommended",
"env": {
"es6": true
},
"installedESLint": true,
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"arrowFunctions": true,
"classes": true,
"modules": true,
"defaultParams": true
}
},
"parser": "babel-eslint",
"rules": {
"linebreak-style": "off",
"arrow-body-style": "off",
"no-bitwise": ["error", { "allow": ["~"] }],
"no-continue": "off",
"max-len": ["error", 100],
"no-unused-vars": 0,
"react/jsx-space-before-closing": 0,
"react/jsx-indent": 0,
"no-empty": 0,
"no-undef": 0
}
}
这样，一个方便好用的Eslint代码检查配置就完成了！
记录不详之处欢迎大家留言补充，不吝赐教：）
参考链接： https://juejin.im/entry/599e5ad4f265da2488089ad3