论良好的编码风格的重要性。
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/.eslintrcat 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:46at 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的代码检测真的很严格啊!!!!!!!!!!