在团队协作中,为避免低级 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 盘化生存 」(自带信息,不装系统,随时插拔,自由协作)不也是这样一种理念吗?不是我不明白,这世界变化快。经验固然有用,但在日新月异的技术潮流中,学习、适应能力更为重要。

ESLint 使用入门的更多相关文章

  1. ESLint 使用入门 - 来自推酷

    在团队协作中,为避免低级 Bug.产出风格统一的代码,会预先制定编码规范.使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量. 在以前的项目中,我们选择 JSHint 和 ...

  2. Eslint 从入门到放弃

    https://blog.csdn.net/walid1992/article/details/54633760

  3. ESLint的使用笔记

    原文地址:https://csspod.com/getting-started-with-eslint/?utm_source=tuicool&utm_medium=referral 在团队协 ...

  4. ESLint 检查代码质量

    利用 ESLint 检查代码质量 其实很早的时候就想尝试 ESLint 了,但是很多次都是玩了一下就觉得这东西巨复杂,一执行检查就是满屏的error,简直是不堪入目,遂放弃.直到某天终于下定决心深入看 ...

  5. 利用 ESLint 检查代码质量

    原文发表于作者的个人博客:http://morning.work/page/maintainable-nodejs/getting-started-with-eslint.html 其实很早的时候就想 ...

  6. eslint 入门项目搭建过程

    github 地址 : https://github.com/gebin/eslint-demo 运行该项目 npm install npm start 访问 http://localhost:900 ...

  7. ESLint系列:ESLint入门安装及简单配置

    1.eslint需要依赖node.js环境,在配置之前需要安装好node.js; 2.npm install eslint --save-dev 或 npm install eslint --save ...

  8. ESLint入门

    ESLint是一个用于识别和报告ECMAScript/JavaScript中代码格式的工具,目的是使代码风格更加统一和避免错误. 1.安装和使用有两种方式去安装ESLint:全局和本地. 1.1本地安 ...

  9. eslint 入门学习

    想学eslint已经很久了,可是每次进到官网看一下就觉得头大,无法下手,但是最近到了年底,进行年度总结,作为一个有志向的程序媛,还是要追求编码规范的,因此今天再次拿起来了eslint,记录一下我的学习 ...

随机推荐

  1. HDU4027 线段树

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...

  2. ps命令查看进程指定项目信息、用户名过长显示UID

    有次一个在使用ps命令时,发现部分用户显示的是用户名,有些用户显示的是UID,那是因为用户名长度超过8位的:也就是说ps命令用户名列默认只能显示8位(含8位)的用户名,超过8位就显示UID,如何让长度 ...

  3. 为select2下拉框赋值

    $("#A").select2("val", value);$("#A").val('3232');

  4. Nginx+Tomcat关于Session的管理

    前言 Nginx+Tomcat对Session的管理一直有了解,但是一直没有实际操作一遍,本文从最简单的安装启动开始,通过实例的方式循序渐进的介绍了几种管理session的方式. nginx安装配置 ...

  5. uoj308 【UNR #2】UOJ拯救计划

    传送门:http://uoj.ac/problem/308 [题解] 考虑枚举用了$i$所学校,那么贡献为${k \choose i} * cnt * i!$ 意思是从$k$所选$i$所出来染色,$c ...

  6. 对于所有对象都通用方法的解读(Effective Java 第三章)

    这篇博文主要介绍覆盖Object中的方法要注意的事项以及Comparable.compareTo()方法. 一.谨慎覆盖equals()方法 其实平时很少要用到覆盖equals方法的情况,没有什么特殊 ...

  7. linux c 执行新程序

    学习进程时,linu c上说新开的进程一般要执行另外一个程序,同时与父进程执行同一个程序没有意义 如下是如何执行一个新的程序 使用exec函数簇 exec函数簇包含如下函数

  8. perl6文件操作

    use v6; #perl6中读取文件方法 #:r 只读, :w 只写, :rw 读写, :a 追加 my $fp = open 'filename.txt', :rw; for $fp.^metho ...

  9. peepscan前期准备工作

    具有的功能 1.whoami 2.sub doamin https://dns.aizhan.com/huayi-faucet.com/ 3.dir scan 4.web server 5.port ...

  10. PHP路由代码

    <?php /**  * 路由  * @author 角度 QQ:1286522207  *  */ class Dispatcher extends Action {     private ...