规范自己的代码从 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 eslintnpm --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"]复制代码