代码质量之：eslint

[youngwind]

前言

以前写代码一般只关注正确与否，但是随着技术的不断深入，开始重视代码规范与否，再加上进来着力推进团队的code review，所以有了eslint的这个探索，发现这是个好东西，跟大家分享一下。

使用方法

安装

npm install eslint

初始化

eslint --init

初始化之后会生成一个配置文件.eslintrc，所有跟eslint相关的配置都写在这儿。

使用

// 检查test1.js文件
eslint test1.js

踩到的一些坑

因为目前我常用的技术栈是react+redux+webpack+babel+gulp，所以eslint势必要集成到这里面去。

1. 如何让eslint支持jsx语法

当前eslint的稳定版本并不支持jsx，但是可以通过插件eslint-plugin-react完成。

2. 如何在webpack打包的时候进行eslint检查

解决方案：eslint-loader
按照里面的流程走就可以了，但是发现下面的这个配置好像是多余的。

module.exports = {
  eslint: {
    configFile: 'path/.eslintrc'
  }
}

估计原因是因为eslint会自动从当前目录开始自动搜索.eslintrl配置文件。

3. 提示require is not defined 和module is not defined

google、github、stackoverflow了一轮都没找到答案，后来在eslint的官网说明中找到了答案。（这个教训了我了解一个新东西的时候记得先把它的官方说明文档过一遍😢）

大概的原因是因为require和module都属于common.js里面的东西，webpack打包的时候能识别，但是假如我把环境只设定为浏览器的话就不能识别了，所以得在环境添加上common.js配置项。
大概长这个样子。

"env": {
    "es6": true,
    "browser": true,
    "commonjs": true,
  },

4. 提示error React is defined but never used no-ununsed-vars

当我们在写react的时候势必要引入react，但是文件中不一定会显示的调用react，那么eslint就会报错，“error React is defined but never used no-ununsed-vars”。因为eslint只会检查原本的js文件，不会检查编译过后的js文件。所以解决这个问题有以下两个方案。
（1）var React = require("react"); // eslint-disable-line no-unused-vars
eslint提供了忽略某些文件某些代码行的功能，

（2）直接使用eslint-plugin-react插件，具体情况可以参考这个。eslint/eslint#4821

5. switch case 缩进问题

eslint默认检查switch case语句的时候是要求没有缩进的，也就是这样的。

switch (action.type) {
case ActionTypes.ADD:
  return Object.assign({}, state, {
    data: state.data + 1
  });
default :
  return state;
}

这能忍？！
解决办法是在indent配置空格

"indent": [
      1,
      2,
      {
        "SwitchCase": 1
      }
    ]

参考资料：http://eslint.org/docs/rules/indent

5. 不识别部分es6语法

我在redux项目中想这样子写reducer。

return {
        ...state,
        currentQuestionNum: state.currentQuestionNum + 1,
        hoverOption: -1,
        selectedOption: -1
      };

eslint在进行语法检查的时候说不认识这个"...."。
解决方案：babel-eslint
这个可以让eslint支持所有babel能支持的语法