简介
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。
相关网站
安装
- 使用npm全局安装
|
|
- 在VSCode中安装eslint插件
ESLint的基础使用
初始化配置文件
|
|
将生成一个叫.eslintrc的文件
命令行
验证js文件
|
|
自动修复
|
|
配置环境
在配置文件中可以使用 env 属性来指定要启用的环境,将其设置为 true,以保证在进行代码检测时不会把这些环境预定义的全局变量识别成未定义的变量而报错:
|
|
设置语言选项
默认情况下,ESLint 支持 ECMAScript 5 语法,如果你想启用对 ECMAScript 其它版本和 JSX 等的支持,ESLint 允许你使用 parserOptions 属性进行指定想要支持的 JavaScript 语言选项,不过你可能需要自行安装 eslint-plugin-react 等插件。
|
|
配置规则
在上文的配置文件中, “extends”: “eslint:recommended” 选项表示启用推荐规则,在推荐规则的基础上我们还可以根据需要使用 rules 新增自定义规则,每个规则的第一个值都是代表该规则检测后显示的错误级别:
- “off” 或 0 - 关闭规则
- “warn” 或 1 - 将规则视为一个警告
- “error” 或 2 - 将规则视为一个错误
|
|
完整的规则可访问ESLint配置规则列表
其中带 √ 标记的表示该规则为推荐规则,带修复图标的表示可以使用 --fix 进行修复。
.eslintignore
此文件为eslint代码检查的排除文件
|
|
ESLint插件在VSCode中的使用
指定配置文件
在VSCode配置文件指定eslint配置文件路径
|
|
如果项目根目录有.eslintrc,则自动检测此文件配置
让 ESLint 支持 Vue 单文件组件
由于 ESLint 默认只支持 js 文件的脚本检测,如果我们需要支持类 html 文件(如 vue)的内联脚本检测,还需要安装 eslint-plugin-html 插件。
|
|
修改VSCode配置文件
|
|
此时,可以在问题栏中看到eslint代码检测抱怨的问题
ESLint配置详解
ESLint配置文件
ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:
- 在注释中配置:使用JavaScript注释直接把配置嵌入到JS文件中。
- 配置文件:使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
- javascript:使用
.eslintrc.js文件并导出一个包含配置的对象。- YAML:
.eslintrc.yaml或者.eslintrc.yml- JSON:
.eslintrc.json,并且此文件允许使用JS形式的注释- Deprecated:
.eslintrc,此文件可以是JSON或者YAML- package.json:在
package.json文件中创建eslintConfig属性,所有的配置包含在此属性中。
这些文件的优先级则是按照以上出现的顺序(.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json)。
使用js 文件进行配置
|
|
使用注释文件进行配置
|
|
也可以在注释中关闭所有或者某个规则:
|
|
具体的规则可以在官网上找到,或者使用别人写好的配置,例如eslint-config-airbnb。
配置详解(使用json格式)
注释方便理解,使用的时候注意不要使用注释。
|
|