论良好的编码风格的重要性。
ESLint为何物?简单的说,它跟jshint类似,都是对JavaScript代码进行语法的检测,但是它提供了更好的扩展性与更丰富的检测机制。
Airbnb JavaScript Style Airbnb的编码风格在社区内公认是比较好的。
如何安装
第一步
通过npm安装ESLint和eslint-config-airbn
npm install --save-dev eslint-config-airbnb eslint-plugin-reac eslint
这一步建议最好是在当前项目中安装, 不要全局安装,我一开始是全局安装,报错了。在github里也看到了别人遇到了类似的问题,导致这个问题的原因就是因为全局安装了该依赖包。
错误如下:
Error: Cannot find module 'eslint-config-airbnb'
Referenced from: /Users/adam/projects/webpack-boiler/.eslintrc
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js:96:48)
at /usr/local/lib/node_modules/eslint/lib/config.js:123:46
at Array.reduceRight (native)
at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js:111:36)
at getLocalConfig (/usr/local/lib/node_modules/eslint/lib/config.js:225:23)
at Config.getConfig (/usr/local/lib/node_modules/eslint/lib/config.js:363:22)
webpack-boiler|⇒
安装后之后,package.json文件中会出现这几个字段:
"devDependencies": {
"eslint": "^2.5.3",
"eslint-config-airbnb": "^6.2.0",
"eslint-plugin-react": "^4.2.3"
}
第二步
添加.eslintrc文件
目前文件路径大致如下:
project
├node_modules
├public
├web-project
├READDE.md
├server.js
大概是长这样。在根目录下,添加一个.eslintrc的文件,内容如下:
{
"extends": "airbnb/base",
"rules": {
// disable requiring trailing commas because it might be nice to revert to
// being JSON at some point, and I don't want to make big changes now.
"comma-dangle": 0
}
}
这个extends有三种不同的值,eslint根据不同的值,检测方式也不一样,具体看这里
第三步
配置json文件。
如果我们是在全局环境下安装ESLint的话,可以在cmd里输入eslint,判断我们是否安装成功。 目前是在当前项目中安装的,所以无法直接使用eslint这个命令,我们得在json文件中配置一下。
在scrip中添加这一行:
"scripts": {
"start": "node --harmony server.js",
"lint": "eslint" //添加这个
},
这个时候已经配置好了,可以通过在cmd中运行 npm run lint filename.js。
比如我我要检测根目录下的server.js文件,可以在命令行中键入如下命令:npm run lint server.js
结果如图:
第四步
在sublime中装插件。
通过在sublime中安装插件,可以直接在sublime中看到错误提示。
插件安装参考这里
第五步
重启。
安装好插件之后,需要重启一下。打开一个javascript文件
如图
为甚会报这么多错误呢?因为Airbnb的代码检测真的很严格啊!!!!!!!!!!