Sublime Text 3 安装eslint的JavaScript ES5版本插件总结

ESLint在JavaScript静态代码检测中变得很流行了,主要有几个原因:第一,容易配置;第二,混合了JShint和JSCS;第三,大神Nicholas Zakas写的,写JavaScript红宝石的作者。

安装ESLint

安装ESLint之前,确保环境中已经安装Node.js和npm。

npm install -g eslint

可以选择全局安装,也可以选择安装在项目本地。

配置

通过项目根目录下.eslintrc配置文件进行规则配置,这里介绍的是根据airbnb提供的扩展文件进行配置,后面会介绍这个文件的配置。

配置文件的格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"globals": {
// Put things like jQuery, etc
"jQuery": true,
"$": true
},
"env": {
// I write for browser
"browser": true,
// in CommonJS
"node": true
},
// To give you an idea how to override rule options:
"rules": {
// Tons of rules you can use, for example...
"quotes": [1, "double"]
}
}

规则

规则通过一个数组来进行配置,第一项是启用某一项规则的配置。

  • 0 - 禁止规则
  • 1 - 警告该项规则
  • 2 - 报错该项规则

第二项参数为配置规则的内容。

例如:

1
wrap-iife: ["error", "outside"]

配置IIFE的括号在外侧,正确代码为:

1
var x = (function () { return { y: 1 };}()); // wrapped call expression

Sublime-Linter

首先安装Sublime Text插件 SublimeLinter,这是一个代码检测的框架,基于这个框架插件,可以再安装其他的插件,包括ESLint。通过Command + Shift + P,安装包SublimeLinter和SublimeLinter-contrib-eslint:
安装sublimelinter
安装eslint

接着配置SublimeLinter,通过菜单Sublime Text -> Prefences -> Package Settings -> SublimeLinter -> Settings-User进行设置,
在这里需要配置一下node的安装位置,通过paths配置项告诉SublimeLinter。可以通过which node命令来确定node的安装路径。如果你是使用nvm,那么配置项如下:

1
2
3
4
5
6
7
"paths": {
"linux": [],
"osx": [
"/Users/jonathanc/.nvm/versions/io.js/v2.0.0/bin"
],
"windows": []
},

配置sublimelint

配置Airbnb代码规范插件

这里介绍ES5的版本,github上最新的airbnb JavaScript代码规范是支持ES6的。
Linux和Mac用户安装方法:
(
export PKG=eslint-config-airbnb-base;
npm info “$PKG” peerDependencies –json | command sed ‘s/[{},]//g ; s/: /@/g’ | xargs npm install –save-dev “$PKG”
)

这类似于运行了以下的安装命令:
npm install –save-dev eslint-config-airbnb-base eslint@^3.0.1 eslint-plugin-import@^1.10.3

注:这里的安装命令,可以选择全局安装或者项目中安装,不过需要和eslint进行匹配,否则eslint跑起来可能会报错。

接着,在项目根目录.eslintrc的文件中增加配置项:
“extends”: “airbnb-base/legacy”

这样你的项目在Sublime编辑器中就可以看到代码检测的提示了。

代码检测结果

Sublime Linter工具使用

通过Tools - SublimeLinter菜单,可以设置代码检测的运行方式、提示风格、错误的跳转等等。
代码检测工具配置项

错误的解决方法

如果通过上述的配置,eslint并没有生效,可以通过工具菜单打开debug模式,并且展开sublime的控制台(View-Show Console),查看报错信息来解决。

需要注意eslint和eslint-config-airbnb-base的安装是全局的,还是局部的。

您的支持将鼓励我继续创作!
0%