eslint核心概念-系列1

133 阅读3分钟

注:本文主要内容来自eslint官方文档v8.56.0

什么是eslint

  • ESLint是一个可配置的JavaScript检查器。
  • 它可以帮助您发现并修复JavaScript代码中的问题。(Problems can be anything from potential runtime bugs, to not following best practices, to styling issues.)

rules

  • 规则是 ESLint 的核心构建模块。
  • 规则验证你的代码是否满足特定的期望,并指导在不满足这些期望时应当做什么。
  • 规则还可以包含特定于该规则的额外配置选项

例子

举个例子,semi规则允许您指定JavaScript语句是否应该以分号(;)结束。您可以将规则设置为总是要求分号,或者要求语句永远不以分号结束。

{
    rules: {
        'semi': true;
    }
}

规则来源

ESLint包含数百个你可以使用的内置规则。您还可以创建自定义规则或使用其他人使用插件创建的规则。

内置规则

使用推荐的默认规则

注:extends方式,源码地址

{
    extends: ['eslint:recommended']
}

插件规则

注:举个eslint-plugin-import例子

{
    plugins:['import'],
    rules: {
        'extends:': 2
    }
}

image.png

Rule Fixes

规则可以选择性地为它们发现的违规提供修复。在不更改应用程序逻辑的情况下安全地纠正了违规。

Rule Suggestions

Rules may optionally provide suggestions in addition to or instead of providing fixes. Suggestions differ from fixes in two ways:

  1. Suggestions may change application logic and so cannot be automatically applied.
  2. Suggestions cannot be applied through the ESLint CLI and are only available through editor integrations.

Rules that may provide suggestions are marked with 💡 in Rules.

Configuration Files:配置文件

  • ESLint配置文件是你在项目中放置ESLint配置的地方。
  • 您可以包含内置规则、希望如何执行这些规则、带有自定义规则的插件、可共享配置、希望将规则应用于哪些文件等等。
{
    extends: {
        // ...
    },
    plugins: {
        // ...
    }
}

Shareable Configurations:可共享配置

可共享配置是指通过 npm 分享的 ESLint 配置。

举个例子:eslint-config-airbnb-base

{
    extends: {
        'airbnb-base'
    }
}

plugin: 插件

  • ESLint插件是一个npm模块,可以包含一组ESLint规则、配置、处理器和环境。通常插件包含自定义规则。
  • 插件可以用来加强风格指南,并支持JavaScript扩展(如TypeScript)、库(如React)和框架(Angular)。

本文开始提到eslint-plugin-import

parsers:解析器

ESLint 解析器将代码转换为 ESLint 可以评估的抽象语法树(AST, abstract syntax tree)。默认情况下,ESLint 使用内置的与标准 JavaScript运行时和版本兼容的 Espree 解析器。

自定义解析器让 ESLint 可以解析非标准的 JavaScript 语法。通常自定义解析器会被包含在可共享配置或插件中,这样你就不需要直接使用它们了。

比如用于让 ESLint 可以解析 TypeScript 代码的 @typescript-eslint/parser 解析器就被包含在 typescript-eslint 项目中。

Custom Processors:自定义处理器

ESLint 处理器可以从其他类型的文件中提取 JavaScript 代码,然后让 ESLint 对 JavaScript 代码进行检查。另外,你也可以在用 ESLint 解析 JavaScript 代码之前使用处理器先对其进行处理。

例如 eslint-plugin-markdown 就包括一个自定义处理器,让你可以对 Markdown 代码块内的 JavaScript 代码进行检查。

Formatters

An ESLint formatter controls the appearance of the linting results in the CLI.

For more information, refer to Formatters.

Integrations

One of the things that makes ESLint such a useful tool is the ecosystem of integrations that surrounds it. For example, many code editors have ESLint extensions that show you the ESLint results of your code in the file as you work so that you don’t need to use the ESLint CLI to see linting results.

For more information, refer to Integrations.

CLI & Node.js API

The ESLint CLI is a command line interface that lets you execute linting from the terminal. The CLI has a variety of options that you can pass to its commands.

The ESLint Node.js API lets you use ESLint programmatically from Node.js code. The API is useful when developing plugins, integrations, and other tools related to ESLint.

Unless you are extending ESLint in some way, you should use the CLI.

For more information, refer to Command Line Interface and Node.js API.