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 errorvar 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 使用入门 - 来自推酷的更多相关文章
- 利用Dnspod api批量更新添加DNS解析【python脚本】 - 推酷
利用Dnspod api批量更新添加DNS解析[python脚本] - 推酷 undefined
- ESLint 使用入门
在团队协作中,为避免低级 Bug.产出风格统一的代码,会预先制定编码规范.使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量. 在以前的项目中,我们选择 JSHint 和 ...
- 用react native 做的一个推酷client
用react native 做的一个推酷client 仅供大家參考.仅仅为抛砖引玉.希望大家能以此来了解react.并编写出很多其它的优质的开源库,为程序猿做出贡献. 用的的组件: Navigator ...
- Python爬虫入门教程 36-100 酷安网全站应用爬虫 scrapy
爬前叨叨 2018年就要结束了,还有4天,就要开始写2019年的教程了,没啥感动的,一年就这么过去了,今天要爬取一个网站叫做酷安,是一个应用商店,大家可以尝试从手机APP爬取,不过爬取APP的博客,我 ...
- HTML入门——互动式推送初尝试
0.背景 疫情原因,导致许多大众喜闻乐见的体育活动停摆,但博主和队友们运营的体育社团公众号不能停摆.为了利用当下线上活动频率高的契机增加关注量,加之微信推送的互动性已成为趋势,博主打算和队友们尝试实现 ...
- entityframework 入门-来自微软
必备条件 要完成本演练,需要安装 Visual Studio 2010 或 Visual Studio 2012. 如果使用的是 Visual Studio 2010,还需要安装 NuGet. 1.创 ...
- 关于MDN,HTML入门来自MDN文档
由开发者和作者组成的开源社区:推动web发展, MDN(Mozilla Developer Network) 维基,共同维护做贡献: 需要使用到github账号进行验证,以此再创建MDN账号: HTM ...
- RabbitMQ入门_03_推拉模式
我们知道,消费者有两种方式从消息中间件获取消息: 推模式:消息中间件主动将消息推送给消费者 拉模式:消费者主动从消息中间件拉取消息 推模式将消息提前推送给消费者,消费者必须设置一个缓冲区缓存这些消息. ...
- Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring - 大新博客 - 推酷 - 360安全浏览器 7.1
Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring - 大新博客 时间 2014-02-11 21:08:00 博客园-所有随笔区 ...
随机推荐
- IO流(File类,IO流的分类,字节流和字符流,转换流,缓冲流,对象序列化)
1.File类 File类可以在程序中 操作文件和目录.File类是通过建立File类对象,在调用File类的对象来进行相关操作的. 示例: public class Demo01 { public ...
- 小白的Python之路 PEP8 代码风格
转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...
- Data Base mongodb高版本与低版本的区别
mongodb高版本与低版本的区别 一.mongodb引擎: Mongodb 3.0支持用户自定义存储引擎,用户可配置使用mmapv1或者wiredTiger存储引擎. 3.2版本以后默认的开启的是w ...
- sqlserver 存储过程 带输出参数
CREATE PROCEDURE [dbo].[output] @acctNbr varchar(), --会员卡号 @acctPwd1 nvarchar() OUT, --登录密码 @acctPwd ...
- ES6初体验
开始学习ES6,打算走全栈这条路了,废话不多说,开始吧. 首先安装node环境,去node官网上面下载node最新版本的,我用的系统是window10,所以我只需要下一步下一步就行了,安装完成后打开c ...
- UITextFiled的输入框改成一条下划线
在一些程序的界面中,它们的编辑框是一条线,而UITextFiled本身并没有这种style,所有需要我们自己设置.方法还是挺多的 第一种 , (1).我们可以声明一个类继承与UITextFiled ( ...
- java二维码生成代码
QRCodeUtil.encode(text, "D:/004.jpg", "D:", true, "exp");// 这个方法的第一个参数 ...
- [WinForm]委托应用①——窗口之间方法/控件调用
不传参数 第二窗口:public partial class Form2 : Form { /// <summary> /// 定义委托 /// </summary> publ ...
- Swift学习第二天--面向对象
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- Node.js平台的一些使用总结
Node.js的安装 菜鸟教程 npm -v查看npm的版本. npm更新 npm官网 npm权限问题 由于npm经常会因为权限问题,不能全局安装模块,所以解决办法如下: npm官网 npm切换淘宝源 ...