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