Web相关:Sublime如何安装ESLint插件?

论良好的编码风格的重要性。

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
结果如图:
Web相关:Sublime如何安装ESLint插件?_第1张图片

第四步

在sublime中装插件。
通过在sublime中安装插件,可以直接在sublime中看到错误提示。
插件安装参考这里

第五步

重启。

安装好插件之后,需要重启一下。打开一个javascript文件
如图
Web相关:Sublime如何安装ESLint插件?_第2张图片

为甚会报这么多错误呢?因为Airbnb的代码检测真的很严格啊!!!!!!!!!!

你可能感兴趣的:(Web相关)