注:扩展篇里的内容,并不是建立项目的必要条件,属于可选范围。但是如果项目复杂到了一定程度,终究还是要面对的。
统一代码规范的重要性,相信稍微有点项目经验的同学一定会有所感触,光靠人为的约定限制,效果是无法保证的。所以eslint这种强制性的代码规范还是很有必要引入的,不过代码规范到底选择什么版本,估计选择困难症的同学会纠结了。那么就由我不负责任的来提供一套方案,据说airbnb号称史上最严格标准,那么我们就用它。
1、查看airbnb依赖并安装
我们现在只需要安装最基础的eslint-config-airbnb-base就可以了,react、vue什么的后文再说。
$ npm info "eslint-config-airbnb-base@latest" peerDependencies
我们会看到如下信息(版本信息要注意,不一定会跟这里一模一样)
{ eslint: '^4.9.0', 'eslint-plugin-import': '^2.7.0' }
接下来就是按照它的提示安装了,注意,你的版本很可能跟我的不一样,要写自己的,再加上一个eslint-import-resolver-webpack来兼容webpack。
$ npm i -D eslint-config-airbnb-base [email protected] [email protected] eslint-import-resolver-webpack
2、配置.eslintrc.js
新建.eslintrc.js
const path = require('path');
const root = __dirname;
module.exports = {
root: true,
extends: 'airbnb-base',
env: {
browser: true,
node: true,
es6: true,
jest: true
},
settings: {
'import/resolver': {
webpack: {
config: path.resolve(root, 'config/webpack.base.js')
}
}
}
}
还有.eslintignore(不过笔者发现用vscode如果在工作区不是直接引得demo目录,比如引得demo的父目录之类的,这个.eslintigonre不会生效,不过不影响eslint的自检查)
/config/
/dist/
/*.js
/test/**/coverage/
/test/**/reports/
之后,如果你用的vscode,就搜索eslint这个扩展(可以实时提示语法问题,虽不是必须,但是强烈推荐,如果电脑配置较低,有可能会很卡,往后看,还是有办法的),安装一下。然后,你就会看什么叫史上最严格标准……
运行下面的命令
$ ./node_modules/eslint/bin/eslint.js src/**/*.js
就可以看到它报告的结果,不要被吓到哦。写了这么久的代码,才发现我的代码竟然这么不规范。。。在上面的命令后面加上 --fix 可以修复部分警告。为了方便,我们在package.json的scripts里面加上一条命令(为了方便以后,我们把jsx也加进来了,反正影响不大,实在不需要删掉就好),来自动修复一些简单的格式。
"lint": "node ./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx --fix",
只要运行这条命令,就可以修复一些缩进之类的小问题了,大问题还是得自己修复的。
还有更狠的,如果我们装上了eslint-loader,那么你要是代码不符合规范,那每次开发时保存,都会一片片的飘红,甚至过不了。
$ npm i -D eslint-loader
webapck.base.js配置相应改一下
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader','eslint-loader'],
},
可以了,去修改你不规范的代码吧,编译不通过别怪我没提醒过啊~
3、配置展示
全部变化可看笔者的 github记录 ,还是很清晰的。package.json
{
"name": "code-history",
"version": "1.0.0",
"description": "Use to show the change of code in blog!",
"main": "index.js",
"scripts": {
"test": "jest --config config/jest.config.js",
"prod": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js --open",
"lint": "node ./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx --fix",
"start": "npm run dev"
},
"keywords": [],
"author": "[email protected]",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"jest": "^22.4.3",
"jest-babel": "^1.0.1",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.3",
"postcss-url": "^7.3.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2",
"webpack-merge": "^4.1.2"
}
}
目录结构
demo
|- config/
|- jest.config.js
|- webpack.base.js
|- webpack.dev.js
|- webpack.prod.js
|- src/
|- assets/
|- logo.jpg
|- util/
|- index.js
|- index.css
|- index.js
|- test/
|- spec/
|- util.spec.js
|- .babelrc
|- .eslintignore
|- .eslintrc.js
|- .gitignore
|- .postcssrc.js
|- index.html
|- package.json