ESLint 使用入门

在团队协做中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则能够辅助编码规范执行，有效控制代码质量。

在之前的项目中，咱们选择 JSHint 和 JSCS 结合使用，WebStorm 等开发环境已经支持这些工具，使用起来很顺手。然而，最近使用 React JSX 语法时，却遇到了问题：JSHint 不支持 JSX 语法。虽然有 JSXHint 这样的 JSHint 衍生工具，但我的并不喜欢这样的实现方式：不是以插件的形式实现，而是从新从新包装了一个工具。 Nicholas C. Zakas 也不喜欢，因此有了 ESLint 。

原来选择 JSHint 的时候，也对比过 ESLint，基于 ESLint 在速度上比 JSHint 要 慢一些 ，最终使用了 JSHint。如今须要 JSX 支持了，才发现 ESLint 的设计理念更符合实际需求。

ESLint 简介

ESLint 由 JavaScript 红宝书 做者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子，而是在实际需求得不到 JSHint 团队响应 的状况下作出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。

ESLint 主要有如下特色：

• 默认规则包含全部 JSLint、JSHint 中存在的规则，易迁移；
• 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；
• 包含代码风格检测的规则（能够丢掉 JSCS 了）；
• 支持插件扩展、自定义规则。

ESLint 已经 宣布支持 JSX ，不过目前为 alpha 版本，正式版发布以前能够先使用 eslint-plugin-react 替代。

使用 ESLint

ESLint 详尽使用参见 官方文档 ，下面罗列的是由 JSHint 迁移到 ESLint 的一些要点。

配置

能够经过如下三种方式配置 ESLint:

• 使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）；
• 在 package.json 中添加 eslintConfig 配置块；
• 直接在代码文件中定义。

.eslintrc 文件示例：

{
  "env": { "browser": true, }, "globals": { "angular": true, }, "rules": { "camelcase": 2, "curly": 2, "brace-style": [2, "1tbs"], "quotes": [2, "single"], "semi": [2, "always"], "space-in-brackets": [2, "never"], "space-infix-ops": 2, } } 

.eslintrc 放在项目根目录，则会应用到整个项目；若是子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样能够方便地对不一样环境的代码应用不一样的规则。

package.json 示例：

{
  "name": "mypackage", "version": "0.0.1", "eslintConfig": { "env": { "browser": true, "node": true } } } 

文件内配置

代码文件内配置的规则会覆盖配置文件里的规则。

禁用 ESLint：

/* eslint-disable */ var obj = { key: 'value', }; // I don't care about IE8 /* eslint-enable */ 

禁用一条规则：

/*eslint-disable no-alert */ alert('doing awful things'); /* eslint-enable no-alert */ 

调整规则：

/* eslint no-comma-dangle:1 */ // Make this just a warning, not an error var obj = { key: 'value', } 

工做流集成

ESLint 能够 集成 到主流的编辑器和构建工具中，以便咱们在编写的代码的同时进行 lint。

编辑器集成

以 WebStorm 为例，只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ，而后在设置里开启 ESLint 便可。其余编辑能够从 官方文档 中得到得到具体信息。

构建系统集成

在 Gulp 中使用：

var gulp = require('gulp'); var eslint = require('gulp-eslint'); gulp.task('lint', function() { return gulp.src('client/app/**/*.js') .pipe(eslint()) .pipe(eslint.format()); }); 

其余构建工具参考官方文档。

代码风格检测

在团队协做中，统一的代码风格更具可读性、可维护性。ESLint 内置了一系列有关代码风格的规则 ，能够根据团队的编码规范设置。

自定义规则

显然，ESLint 内置的规则不可能包罗全部需求。能够经过插件实现自定义规则，这是 ESLint 最有卖点的功能。在 NPM 上以 eslintplugin 为关键词，能够搜索到不少插件，包括 eslint-plugin-react 。若是有自行开发插件的需求，能够阅读 ESLint 插件开发文档 。

以 eslint-plugin-react 为例，安装之后，须要在 ESLint 配置中开启插件，其中 eslint-plugin- 前缀能够省略：

{
  "plugins": [ "react" ] } 

接下来开启 ESLint JSX 支持（ESLint 内置选项）：

{
  "ecmaFeatures": { "jsx": true } } 

而后就能够配置插件提供的规则了：

{
  "rules": { "react/display-name": 1, "react/jsx-boolean-value": 1 } } 

自定义规则都是以插件名称为命名空间的。

结语

至此，ESLint 使用入门就介绍完了。可是，咱们不该该仅仅是使用 ESLint 这个工具，更应该学习 ESLint 背后的设计理念：不求大而全，但求 搭好扎实的基础架构，提供良好的、可扩展的 API。小到插件，大到应用程序开发，这一原则都适用。

由此，很容易让我联想到 WordPress —— 不用修变源代码，经过 hook、filter 机制实现前台、后台全部功能的定制、扩展，其成功离不开这一特性。

Coding 以外，《罗辑思惟》所倡导的「 U 盘化生存 」（自带信息，不装系统，随时插拔，自由协做）不也是这样一种理念吗？不是我不明白，这世界变化快。经验当然有用，但在突飞猛进的技术潮流中，学习、适应能力更为重要。