Eslint官网:http://eslint.cn/docs/user-guide/configuring
写在前面
在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。
ESLint 简介
ESLint是一个QA工具,用来避免低级错误和统一代码的风格。以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。
ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写。
ESLint 主要有以下特点:
- 默认规则包含所有 JSLint、JSHint 中存在的规则,易迁移;
- 规则可配置性高:可设置「警告-1」、「错误-2」两个 error 等级,或者直接「禁用-0」;
- 包含代码风格检测的规则(可以丢掉 JSCS 了);
- 支持插件扩展、自定义规则。
使用 ESLint
ESLint 详尽使用参见 官方文档 ,下面罗列的是由 JSHint 迁移到 ESLint 的一些要点。
全局和本地安装eslint
- npm install eslint -g
- npm install eslint -save-dev
配置
可以通过以下三种方式配置 ESLint:
1.使用 .eslintrc 文件(支持 JSON 和 YAML 两种语法);
2.在 package.json 中添加 eslintConfig 配置块;
3.直接在代码文件中定义。
.eslintrc 文件示例:
|
|
.eslintrc 放在项目根目录,则会应用到整个项目;如果子目录中也包含 .eslintrc 文件,则子目录会忽略根目录的配
置文件,应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。
package.json 示例:
|
|
文件内配置
代码文件内配置的规则会覆盖配置文件里的规则。
禁用 ESLint:
禁用一条规则:
调整规则:
自定义语法规则
显然,ESLint 内置的规则不可能包罗所有需求。可以通过插件实现自定义规则在 NPM 上以 eslintplugin 为关键
词,可以搜索到很多插件,包括 eslint-plugin-react 。如果有自行开发插件的需求,可以阅读
ESLint 插件开发文档 。
以 eslint-plugin-react 为例,安装以后,需要在 ESLint 配置中开启插件,其中 eslint-plugin- 前缀可以省略:
接下来开启 ESLint JSX 支持(ESLint 内置选项):
然后就可以配置插件提供的规则了:
在webpack中配置eslint-loader
- 下载npm install eslint-loader -save-dev
- 指定eslint的配置文件,如果不指定有默认的优先执行顺序
- 在loader中配置加载器
例如在react项目中配置
- 通过.eslintignore文件指定不需要走eslint规范的代码
react项目配置参考
|
|
结语
我们不应该仅仅是使用 ESLint 这个工具,更应该学习 ESLint 背后的设计理念:不求大而全,但求搭好扎实的
基础架构,提供良好的、可扩展的 API 。小到插件,大到应用程序开发,这一原则都适用。