前提条件:

  • 已安装 npm

首先需要做一些针对全局和项目的通用安装:

  • 安装 eslint:

npm install -g eslint
  • 转移到你正在开发的项目的根目录,如果根目录下没有 .eslintrc ,建立一个相同命名的文件,并向文件添加如下内容:

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "extends": "airbnb"
}
  • 在项目目录下安装 Airbnb JavaScript 条件集:
 
# 这里我们采用 Airbnb 的规范集合
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

接下来根据不同的编辑器环境做 Linter 的配置:

Sublime

  • 安装 SublimeLinter :推荐在 Sublime 下使用 Package Control 来安装 SublimeLinter,Sublime Linter Guide
  • 重新启动 Sublime 确保 SublimeLinter 已经启动,方可看到 Lint 信息了。

WebStorm

  • 在 WebStorm 中激活 ESLint 插件。
preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
  • 在 ESLint 配置面板中配置 Linter 信息如下:

注意:ESLint package 和 Additional rules directory 需要配置为 ESLint 以及 Airbnb 配置的安装目录。

linter

配置完毕之后 Linter 便可立即生效。

参考