轻松入门Eslint

FEFL
159 阅读4分钟

定义

eslint是一个javascript的代码检查工具，可以帮助发现并修复js代码问题

特点：每个规则都是一个插件，代码中使用了ast评估方案

使用

安装

注意：eslint依赖于ssl，因此要确保我们本地安装的node支持这个内置功能（常见的12.22.0，14.17.0，>=16都支持）

方法一

npm install @eslint/config
  1. 执行上述命令之前，要确保本地有package.json文件
  2. 上述命令执行后会有如下交互，按需选择即可
  4. 默认会生成如下文件及内容
  6. 此时如果要运行eslint检查文件内容，执行如下命令即可
yarn run eslint ./filepath

方法二

npm i eslint -D
  1. 执行上述命令，则为手动安装eslint包，没有方法一的交互过程，也不会默认生成配置文件
  2. 手动创建配置文件
New-Item -Path . -Name .eslintrc.js -ItemType "File"

3. 手动完善配置文件内容 4. 运行eslint检查文件内容，执行如下命令

npx eslint dirpath/filepath

核心概念

规则

  1. 内置数百个规则，通过这些规则，可以验证JavaScript中的语句格式，如semi，句尾是否有分号，singlequote是否使用单引号
  2. 通过0（off），1（warn），2（error）指定规则验证的等级
  3. 常见配置如下
"rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"]
}

配置文件

  1. 默认eslint执行时会从要检查的文件目录开始向上查找配置文件，直到系统的根目录，或者指定root:true时停止
  2. 查找时不同配置文件的优先级如下
    1. .eslint.config.js
    2. .eslintrc.js
    3. .eslintrc.cjs
    4. .eslintrc.yaml
    5. .eslintrc.yml
    6. .eslintrc.json
    7. package.json
  1. 注意：From ESLint v9.0.0, the default configuration file is now eslint.config.js. If you are using a .eslintrc.* file, please follow the migration guide to update your configuration file to the new format: eslint.org/docs/latest…

插件

  1. 插件是一个包含eslint规则，配置，解析器，环境变量的集合的npm包
  2. 通常用来强制使用某种代码风格或者支持扩展js扩展（ts），库（React），框架（Vue），或者自定义规则
  3. 具体如何配置，参考

zh-hans.eslint.org/docs/latest…

解析器

  1. Eslint用来将JavaScript文件解析为AST需要使用的解析器（默认是espree）
  2. 自定义解析器，可以使eslint解析非JavaScript中的语法，如 @typescript-eslint/parse解析器

处理器

  1. 处理器是用来从其他类型的文件中提取JavaScript代码进行检查
  2. 或者在eslint处理代码之前先用处理器处理代码
  3. 如eslint-plugin-markdown就可以用来检查markdown中的JavaScript代码

格式化工具

  1. 用于控制eslint检查结果的外观展示的工具，可通过命令行中 --f 指定
  2. 内置的格式换选项有

zh-hans.eslint.org/docs/latest…

  1. 一般无需更改，默认即可

集成编辑器

  1. 许多代码编辑器都有 ESLint 扩展，这让工作时，可以即刻在文件中查看相关的代码 ESLint 结果，这样你就不需要使用 ESLint 命令行来查看检查结果
  2. 常见的与eslint集成的一些代码编辑器，构建工具，源码控制平台如下

zh-hans.eslint.org/docs/latest…

忽略文件

  1. 指定忽略文件，或者忽略匹配特定规则的文件，可通过如下多种方式
  2. 具体参考官网

zh-hans.eslint.org/docs/latest…

eslint 9.0

此处为最新版的eslint的变化，以及使用方式

参考如下迁移方式

eslint.org/docs/latest…

注意

  1. 如果手动安装，则会安装esling9.0，此时如果配置文件还使用.eslintrc.x这种形式都不会生效，需要改成eslint.config.x
  2. eslint9.0 不再支持Node.js<v18.18, v19的版本

工程化

简述

  1. 为了保证项目的代码质量，大型项目基本都会集成eslint

弊端

  1. 单纯直接使用eslint来校验代码质量，并给出提示，虽然能够保障代码质量，但是对于开发人员来说无疑增加了负担
  2. 在开发时需要熟悉eslint配置的规则，时刻注意代码风格
  3. 频繁的报错或警告也会影响开发体验

Prettier

  1. 作为eslint的好搭档，提供了代码格式化能力
  2. 开箱即用，无需配置
  3. vscode集成的插件
  4. 保存时让代码直接符合eslint的校验规则
  5. 用法参考如下
avatar
文章
阅读
粉丝