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

2017年11月16日

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

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

安装ESLint

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

npm install -g eslint

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

配置

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

配置文件的格式如下：

{
  "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 - 报错该项规则

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

例如：

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

配置IIFE的括号在外侧，正确代码为：

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，那么配置项如下：

"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的安装是全局的，还是局部的。