规范自己的代码从 ESlint 开始。 ESlint 和 webpack 集成，在 babel 编译代码开始前，进行代码规范检测。

Eslint介绍

ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码，尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格，特别是当工程变得越来越大、越来越多的人参与进来时，需要加强一些最佳实践。

依赖版本

"webpack": "^2.3.2"

"react": "^15.4.2"

"babel-eslint": "^7.2.3"

"babel-plugin-import": "^1.1.1"

"eslint": "^3.19.0"

"eslint-loader": "^1.7.1"

"eslint-plugin-react": "^6.10.3"

安装依赖

在项目的根目录下，安装eslint和eslint-loader

npm --save-dev install eslint
npm --save-dev install eslint-loader复制代码

.eslintrc

.eslintrc是ESlint的配置文件，我们需要在项目的根目录下增加.eslintrc文件。

webpack配置

在webpack.config.js中，为需要检测的文件添加eslint-loader加载器。一般我们是在代码编译前进行检测。

module: {
    rules: [
        // ...

        {
            test: /\.js[x]?$/,
            enforce: 'pre',
            use: [{
                loader: 'eslint-loader', 
                options: { fix: true }
            }],
            include: path.resolve(__dirname, './src/**/*.js'),
            exclude: /node_modules/
        },

        // ...
    ]
}复制代码

package.json文件配置

package.json中添加script命令：

"scripts": {
      "lint": "eslint --ext .js src"
}复制代码

到这里，执行npm run lint就可以检测结果了。

通过babel-eslint来检测ES6代码

安装babel-eslint:

npm install --save-dev babel-eslint复制代码

修改.eslintrc:

{
  parser: "babel-eslint",
  "rules": {
  }
}复制代码

在rules中加上规则就可以了。

React的ESLint规则

安装eslint-plugin-react来检测react代码：

npm install --save-dev eslint-plugin-react复制代码

安装之后，我们可以使用react插件来指定我们关于react的第一条代码规则。比如我们要求组件指定PropTypes。

{
  parser: "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}复制代码

.eslintrc示例

下面是一份react项目的.eslintrc配置示例

{
    //文件名 .eslintrc.json
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "commonjs": true
    },
    "extends": "eslint:recommended",
    "installedESLint": true,
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true,
            "arrowFunctions": true,
            "classes": true,
            "modules": true,
            "defaultParams": true
        },
        "sourceType": "module"
    },
    "parser": "babel-eslint",
    "plugins": [
        "react"
    ],
    "rules": {
        "linebreak-style": [
            "error",
            "unix"
        ],
        //"semi": ["error", "always"],
        "no-empty": 0,
        "comma-dangle": 0,
        "no-unused-vars": 0,
        "no-console": 0,
        "no-const-assign": 2,
        "no-dupe-class-members": 2,
        "no-duplicate-case": 2,
        "no-extra-parens": [2, "functions"],
        "no-self-compare": 2,
        "accessor-pairs": 2,
        "comma-spacing": [2, {
            "before": false,
            "after": true
        }],
        "constructor-super": 2,
        "new-cap": [2, {
            "newIsCap": true,
            "capIsNew": false
        }],
        "new-parens": 2,
        "no-array-constructor": 2,
        "no-class-assign": 2,
        "no-cond-assign": 2,
        "no-mixed-spaces-and-tabs": 0
    }
}复制代码

添加pre-commit

如果项目使用了git,可以通过使用pre-commit钩子在每次提交前检测，如果检测失败则禁止提交。可以在很大一定程度上保证代码质量。

首先，安装pre-commit:

npm install pre-commit --save-dev复制代码

在package.json中配置pre-commit需要运行的命令：

"pre-commit": [
  "lint"
]复制代码

示例代码

示例代码 react-molin