ESLint学习_快速入门


参考文章

Getting Started with ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.


ESLint is completely pluggable.

Every single rule is a plugin and you can add more at runtime.

You can also add community plugins, configurations, and parsers to extend the functionality of ESLint.

开始使用 ESLint

ESLint 是一个用于 识别报告 ECMAScript/JavaScript 代码中发现的模式的工具,其目标是使代码更加 一致 并避免错误。


ESLint 是完全 可插拔的

每一个规则都是一个 插件,并且你可以在 运行时 添加更多。

你还可以添加 社区插件配置解析器 来扩展 ESLint 的功能。

Prerequisites

To use ESLint, you must have Node.js (^18.18.0, ^20.9.0, or >=21.1.0) installed and built with SSL support. (If you are using an official Node.js distribution, SSL is always built in.)

先决条件

要使用 ESLint,你必须安装并构建了 SSL 支持Node.js (^18.18.0, ^20.9.0, 或 >=21.1.0)。(如果你使用的是 官方 Node.js 发行版,SSL 总是内置的。)

Quick start

You can install and configure ESLint using this command:

快速开始

你可以使用以下命令安装和配置 ESLint:

npm init @eslint/config@latest

# or

yarn create @eslint/config

# or

pnpm create @eslint/config@latest

If you want to use a specific shareable config that is hosted on npm, you can use the --config option and specify the package name:

如果你想使用 特定的可共享配置 并且该配置 托管 在 npm 上,你可以使用 --config 选项并指定包名:

# use `eslint-config-standard` shared config

# npm 7+
npm init @eslint/config@latest -- --config eslint-config-standard

Note: npm init @eslint/config assumes you have a package.json file already. If you don’t, make sure to run npm init or yarn init beforehand.

After that, you can run ESLint on any file or directory like this:

注意: npm init @eslint/config 假设你已经有了一个 package.json 文件。如果你没有,请确保事先运行 npm inityarn init

之后,你可以像这样在任何文件或目录上运行 ESLint:

npx eslint yourfile.js

# or

yarn run eslint yourfile.js

Configuration

Note: If you are coming from a version before 9.0.0 please see the migration guide.

After running npm init @eslint/config, you’ll have an eslint.config.js (or eslint.config.mjs) file in your directory. In it, you’ll see some rules configured like this:

配置

注意: 如果你是从 9.0.0 之前的版本升级过来的,请参阅 迁移指南

运行 npm init @eslint/config 之后,你的目录中将会有一个 eslint.config.js(或 eslint.config.mjs)文件。在其中,你会看到一些像这样配置的规则:

// eslint.config.js
export default [
    {
        rules: {
            "no-unused-vars": "error",
            "no-undef": "error"
        }
    }
];

The names "no-unused-vars" and "no-undef" are the names of rules in ESLint. The first value is the error level of the rule and can be one of these values:

  • "off" or 0 - turn the rule off
  • "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
  • "error" or 2 - turn the rule on as an error (exit code will be 1)

The three error levels allow you fine-grained control over how ESLint applies rules (for more configuration options and details, see the configuration docs).

"no-unused-vars""no-undef" 是 ESLint 中 规则 的名称。第一个值是规则的错误级别,可以是以下这些值之一:

  • "off"0 - 关闭该规则
  • "warn"1 - 作为警告启用该规则(不影响退出代码)
  • "error"2 - 作为错误启用该规则(退出代码将会是 1)

这三个错误级别允许你对 ESLint 应用规则的方式进行精细控制(更多配置选项和细节,请参阅 配置文档)。

Your eslint.config.js configuration file will also include a recommended configuration, like this:

你的 eslint.config.js 配置文件也将包括一个推荐的配置,像这样:

// eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended,

    {
        rules: {
            "no-unused-vars": "warn",
            "no-undef": "warn"
        }
    }
];

The js.configs.recommended object contains configuration to ensure that all of the rules marked as recommended on the rules page will be turned on.

Alternatively, you can use configurations that others have created by searching for “eslint-config” on npmjs.com.

ESLint will not lint your code unless you extend from a shared configuration or explicitly turn rules on in your configuration.

js.configs.recommended 对象包含了配置,以确保 规则页面 上标记为推荐的所有规则都将被 启用

另外,你也可以通过在 npmjs.com 上搜索“eslint-config”来使用他人创建的 配置

除非你从 一个共享配置 继承或在你的配置中 明确 启用规则,否则 ESLint 不会检查你的代码。

Global Install

It is also possible to install ESLint globally, rather than locally, using npm install eslint --global.

However, this is not recommended, and any plugins or shareable configs that you use must still be installed locally if you install ESLint globally.

全局安装

也可以使用 npm install eslint --global 命令来全局安装 ESLint,而不是本地安装。

然而,这并不 推荐,并且如果你全局安装了 ESLint,你所使用的任何 插件可共享配置 仍然需要本地安装。

Manual Set Up

You can also manually set up ESLint in your project.

Before you begin, you must already have a package.json file.

If you don’t, make sure to run npm init or yarn init to create the file beforehand.

  1. Install the ESLint packages in your project:

手动设置

你也可以在项目中 手动 设置 ESLint。

开始之前,你必须已经有一个 package.json 文件。

如果你没有,请确保事先运行 npm inityarn init 来创建该文件。

  1. 在你的项目中安装 ESLint 包:
npm install --save-dev eslint @eslint/js
  1. Add an eslint.config.js file:
# Create JavaScript configuration file
touch eslint.config.js
  1. 添加一个 eslint.config.js 文件:
# 创建 JavaScript 配置文件
touch eslint.config.js
  1. Add configuration to the eslint.config.js file. Refer to the Configure ESLint documentation to learn how to add rules, custom configurations, plugins, and more.
import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];
  1. eslint.config.js 文件中添加配置。参考 配置 ESLint 文档 来学习如何添加规则、自定义配置、插件等。
import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];
  1. Lint code using the ESLint CLI:
npx eslint project-dir/ file1.js

For more information on the available CLI options, refer to Command Line Interface.

  1. 使用 ESLint CLI 检查代码:
npx eslint project-dir/ file1.js

有关可用 CLI 选项的更多信息,请参阅 命令行接口

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值