ESlint

peaky
51 阅读6分钟

一、概述

  1. 是什么：
    • 一个工具，用于识别和报告在ES/JS代码中发现的模式
    • 一个可配置的JS检查器，帮助发现并修复ES/JS代码中的问题
      • 问题：任何东西（潜在的运行时错误，不遵循最佳实践，风格问题）
  2. 目标：
    • 检查和规范JS、HTML、CSS，确保代码在不同浏览器环境中运行良好、代码风格一致
  3. 特点：
    • 完全插件化：每条规则都是一个插件

二、使用

  1. 准备：
    • 安装并构建node.js并支持SSL（官方Node.js发行版内置SSL）
  2. 安装、配置：
    • 方式1：
      • npm init @eslint/config
        • 运行完了目录会出现一个文件：.eslintrc.{.js,.yml,.json}
    • 方式2：手动设置
      • 准备：项目里已有package.json文件
      • 安装ESlint包：npm install -save-dev eslint
      • 添加配置文件.eslintrc并添加配置
      • 使用ESlint CLI的Lint代码：npx eslint project-dir/filename.js
  3. 运行：
    • npx eslint yourfile.js

三、配置ESLint

  1. 配置方式：
    • 配置注释：使用JS注释将配置信息直接嵌入到文件
    • 配置文件：使用JS、JSON或YAML文件指定整个目录及其所有子目录的配置信息
      • .eslintrc.*文件/package.json文件里的eslintCongfig字段
        • ESLint将自动查找和读取这两个文件
  2. 配置选项：
    • 环境
    • 全局变量
    • 规则
    • 插件
    • 解析器
  3. 配置文件：eslint.config.js
    • 启用方式：
      • 将eslint.config.js文件放在项目根目录
      • 或者将ESLINT_USE_FLAT_CONFIG环境变量设为true
    • 放置位置：
      • 项目根目录
    • 导出：
      • 一个配置对象的数组
      • 或为配置数组的promise
    • 格式：
      • 如果package.json里没指定"type":"module"
        • 必须是CommonJS格式
    • ESLint查找：
      • ESLint仅自动查找名为eslint.config.js的配置文件，不会查找别的eslint.config.*
    • 配置对象：
      • 特点：
        • 每个配置对象都包含ESLint需要在一组文件上执行的所有信息
      • 每个配置对象的组成：
        • 属性
          • files：指示配置对象应应用于的文件的通配符模式数组
            • 默认情况下，ESLint匹配**/.js,**/.cjs,**/*.mjs
          • ignores：只是配置对象不应应用于的文件的通配符模式数组
            • 非全局ignores模式下，仅匹配文件名：
              • 要忽略特定目录里的所有内容：目录名/*
            • 全局ignores模式下，可匹配目录
          • env：配置环境
          • languageOptions：包含与如何为linting配置JS相关的设置的对象
            • ecmaVersion：支持的ECMAScript版本
            • sourceType：JS源代码类型（用来指定代码打算在哪些模式下运行）
              • 可能值
                • scripts：用于传统脚本文件
                • module：用于ECMAScript模块(ESM)[.js,.mjs]
                • commonjs：用于CommonJS文件[.cjs]
            • globals：指定在linting期间应添加到全局作用域的其他对象的对象
            • parser：配置自定义解析器
              • 属性值必须是包含parse()或parseForESLint()的对象
            • parserOptions：配置将选项直接传递给自定义解析器
          • linterOptions：包含与linting过程相关的设置的对象
            • 禁用内联配置：
              • noInlineConfig:true
            • 报告未使用的禁用指令：（默认情况下未使用的禁用指令报告为警告）
              • reportUnuseDisableDirectives:true
          • processor：包含preprocess()和postprocess()方法的对象或指示插件内处理器名称的字符串
          • plugins：包含插件名称到插件对象的名称-值映射的对象
          • rules：包含配置规则的对象
          • globals：配置全局变量
            • 全局变量键的值
              • writable：允许变量被覆盖
              • readonly：不允许覆盖
              • off：禁用全局变量
  4. 在配置中使用插件：
    • 插件用途：
      • 用于跨ESLint项目共享规则、处理器、配置、解析器等
    • plugins中包含的配置项：
      • 你定义的插件名A:插件本身的名B
        • 表示每个规则名称中的前缀A表示该规则来自B插件，而不是来自ESLint本身
  5. 在配置中使用处理器：
    • 实现方法：
      • processor:"pluginName/processorName"
        • 该配置指定名为"pluginName"的插件中包含一个名为"processorName"的处理器
  6. 配置规则：
    • 规则：
      • 是ESLint的核心构建块
    • 规则用途：
      • 验证你的代码是否满足特定期望以及如果不满足期望该怎么办
    • 规则有哪些：（列出的只是一部分）
      • "semi"：[值]
        • 用途：
          • 对ESlint应用规则进行细粒度控制
        • 值：
          • 规则严重性：
            • off/0：关闭规则
            • warn/1：打开规则作为警告
            • error/2：打开规则作为错误
          • 规则选项：
            • never：禁止
            • always：允许
      • "quotes"：[值]
  7. 配置共享设置：
    • 配置方式：
      • 指定settings
  8. ESLint里的预定义JS配置：
    • js.config.recommended：启用ESLint建议每个人使用的规则，以避免潜在的错误
    • js.config.all：启动ESLint附带的所有规则
    • 注意：
      • 要使用这些预定义配置：先安装@eslint/js包，并import js from "@eslint/js"
  9. 配置文件解析：
    • ESLINT_USE_FLAT_CONFIG=true npx -c/--config 备用配置文件名
  10. 配置注解：
    • 配置环境：
      • /* eslint-env 环境名 */
    • 配置全局变量：
      • /* global 变量名 */
    • 配置规则：
      • /* eslint 规则 */
    • 配置注解描述：
      • -- 注解描述
      • 注意：描述必须在配置之后，而且要相隔两个及以上的多个连续'-'字符
    • 配置插件：
      • /* eslint 插件 */
    • 配置禁用或启用规则警告：
      • /* eslint-disable */
      • /* eslint-enable */：如果没列出禁用的特定规则，则会重启所有被禁用的规则
    • 配置禁用或启用特定规则警告：
      • /* eslint-disable no-alert,no-console */
      • /* eslint-enable no-alert,no-console */
    • 配置禁用特定行上的所有规则：
      • // eslint-disable-line
      • 或/* eslint-disable-line */
      • 或// eslint-disable-next-line
  11. 忽略文件：
    • 方式1：将ignorePatterns添加到配置文件
    • 方式2：创建.eslintignore文件
一些术语
术语定义用途
可共享的配置通过npm共享的ESLint配置使用ESLint的内置规则来强制执行风格指南
解析器ESLint的一个组件将代码转换为ESLint可评估的抽象语法树
处理器一种ESLint插件从其他类型的文件中提取JS代码，然后让ESLint对JS代码进行检查
在使用ESLint解析JS代码之前对代码进行检查
格式化器ESLint的一个组件控制检查结果在CLI中的外观
ESLint扩展在工作时就显示文件里代码的ESLint结果，无需使用ESLint CLI来查看检查结果
ESLint CLI一个命令行接口从终端执行检查
Node.js API允许我们用编程方式从Node.js代码中使用ESLint，在开发时与ESLint相关的插件、集成和其他工具时很有用

关于ESLint可使用的解析器： - 内置的Espree解析器： - 与标准的JS运行时和版本兼容 - 自定义解析器 - 用途： - 让ESLint解析非标准的JS语法 - 所在位置： - 可共享配置或插件中
avatar
文章
阅读
粉丝