在 WebStorm 中结合 Eslint 规范代码

JavaScript 的代码检查工具有:JSLint,JSHint, JSCS, ESLint,本文着重介绍 ESLint。

ESLint 在一系列的代码质量检查工具中,是最年轻的一个,当然也是最现代化的。配置多样,支持 JavaScript, JSON 以及 YAML 格式的 .eslintrc.*文件,同时也支持在package.jsoneslintConfig字段配置(Configuration File Formats)。

安装

ESLint 基于 Node 平台,所以 Nodejs 是必须安装的,然后通过 npm 安装 ESLint 包,至于全局安装还是作为开发依赖安装,取决于个人。

然后在 WebStorm 中,打开设置(File>Setting或者Alt+F7),按路径进入 ESLint 的配置界面(Languages&Frameworks>JavaScript>Code Quality Tools>ESLint)。开启 ESLint,并配置相应路径,配置文件默认使用.eslintrc

webstorm-eslint

配置

ESLint 的配置分为六大块,分别是:

  1. Parser Options(解析器选项)。涉及语言版本等参数。ESLin t默认只支持 ES5,如果需要支持 ES6,需要在这配置。
  2. Parser(解析器选择)。可以让你自己选择ESLint的解析器。ESLint 默认使用Espress作为作为解析器,强烈不推荐修改
  3. Environments(语言环境选项)。比如borwsernodejquerymeteor等等
  4. Globals(全局变量)。比如你自己写了插件,需要全局使用,需要在这个选项中声明。
  5. Plugins(第三方插件)。引入的第三方插件,为了防止误杀,需要在这个选项中申明(但限于 npm 插件,如果是 jquery 插件等前端插件,建议在Globals选择中声明)。
  6. Rules(语法规则)。这个是 ESLint 的重点,同时也是整个配置中最丰富的地方,比如结尾分号检测,单双引号,严格格式等。
语法规则(Rules)配置

在官方文档中,语法规则的配置又分六大类:

  1. Possible Errors,常见错误。
  2. Best Practices,最佳实践
  3. Strict Mode,严格模式
  4. Variables,变量声明相关,比如不允许未定义的变量
  5. Node.js and CommonJS
  6. Stylistic Issues,代码样式,比如单双引号,单行长度,嵌套深度等等
  7. ECMAScript 6,ES6相关语法,箭头函数,生成器等等。
语法规则配置的写法

使用键值对编写,语言规则字段(rule ID)作为,通过不同的来影响规则字段。规则字体的值必须是以下三种之一:

  • "off" 或者0——不检查这个规则
  • "warn"或者1——开启这个规则,规则生效时,作为提醒告诉用户
  • "error"或者2——开启这个规则,规则生效时,作为错误告诉用户

用以下简短的规则配置做说明:

这个配置规则对应如下:

  • 要求使用单引号,如果不是,显示错误信息
  • 如果使用了未声明的变量,显示错误信息
  • 如果变量与操作符之间出现多个空格,显示提醒信息

让我们在WebStorm中实践一下,在项目根目录新建.eslintrc文件,写入上述三项配置,测试代码如下:

结果如图所示,可以看到 ESLint 在 WebStorm 中出现的错误与提醒:
eslint-test

鼠标移动到对应位置,显示详细信息:
quotes
no-undef
no-multi-spaces

.eslintignore

如果你有 Git 的使用经验,那.eslintignore文件的功能也就很容易理解了。类似于.gitignore,用于排除文件与目录,比如npm的node_modules目录等,以及一些第三方插件。对于这些目录与文件,不执行代码质量检查。

最后附上我个人使用的ESLint配置,供大家参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注