So installieren und verwenden Sie ESLint in Node.js-Projekten

Wie installiere und verwende ich ESLint im Node.jsProjekt? In diesem Artikel erfahren Sie, wie Sie ESLint in Node.js-Anwendungen verwenden.

【Empfohlenes Lernen: „nodejs Tutorial“】

ESLint ist ein Open-Source-JavaScript-Linting-Dienstprogramm, das uns dabei helfen kann, den Code zu standardisieren und einige unerwartete Fehler von Entwicklern zu überwinden, da JavaScript eine schwach typisierte Sprache ist.

In der Javascript-Community gibt es viele Kanonisierungsoptionen wie JSHint und JSCS für Code-Linting, einschließlich ESLint, über das wir heute sprechen werden.

ESLint wurde entwickelt, um alle Regeln vollständig steckbar zu machen. Dies ist einer der Hauptgründe dafür. Es ermöglicht Entwicklern, ihre eigenen Linting-Regeln zu erstellen. Jede im ESLint Official Guide bereitgestellte Regel ist eine unabhängige Regel und Entwickler können jederzeit entscheiden, ob sie eine bestimmte Regel verwenden möchten.

Installation

Für die lokale Installation im Projektverzeichnis:

$ npm i eslint -D

Für die globale Installation im Arbeitssystem:

$ npm i eslint -g

Nach der Installation können wir ESLint über den Befehl eslint im Terminal verwenden . eslint 命令使用 ESLint。

配置

最简单的配置方法是设置一个 .eslintrc JSON 文件，其中可以描述所有的 linting 规则。

.eslintrc 的一个示例：

{
  "env": {
    "node": true,
    "browser": true
  },
  "globals": {
    "exampleGlobalVariable": true
  },
  "rules": {
    "no-console": 0,
    "space-infix-ops": "error",
    "quotes": ["error", "single", {
      "avoidEscape": true,
      "allowTemplateLiterals": true
    }],
    "space-before-blocks": ["error", "always"],
    "semi": ["error", "never"]
  },
  "plugins": []
}

主要字段：

• parse — 指定解析器
• parserOptions — 指定解析器选项
• env — 指定脚本的运行环境
• root — 为 true 时，停止向上查找父级目录中的配置文件
• globals — 脚本在执行期间访问的额外的全局变量
• rules — 在此处添加您的自定义规则

如果全局安装了 eslint，我们还可以使用以下命令生成配置文件：

$ eslint --init

在其他情况下，如果您已在本地将其安装到项目中，则需要在终端中输入：

$ ./node_modules/.bin/eslint --init

在这两种情况下，都会提示您生成 .eslintrc 文件的一组基本规则。

上述提示后生成的文件示例：

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "indent": [
      "error",
      "tab"
    ],
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "never"
    ]
  }
}

有关配置的详细信息，请阅读：

http://eslint.org/docs/user-guide/configuring

为了方便运行，我们可以在项目的 package.json，在 scripts 字段里面添加以下脚本：

{
  "scripts" : {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js"
  }
}

我们将该规则应用于以下文件：

var a = 1;
console.log(1);

执行 npm run lint 后将出现以下信息：

ESLint 提示已经很明显了：3 个错误。第一行和第二行的最后又额外的分号错误，a 被赋值但从未使用。

并且提示使用 --fix 选项修复错误和警告，有 2 个错误是可以修复的。现在，使用 npm run lint-fix 修复它，a 的去留就看自己手动更改。

你还可以运行 npm run lint-html 命令，将检查结果写入一个网页文件。

配置文件优先级

如果您按上面的步骤一步步来，你会可能已经知道，ESLint 支持几种格式的配置文件。

现在存在一个问题，如果同个目录下有多个 ESLint

Konfiguration

Die einfachste Konfigurationsmethode besteht darin, eine .eslintrc JSON-Datei einzurichten, die alle Linting-Regeln beschreiben kann. Ein Beispiel für

.eslintrc:

const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json"
]

Hauptfelder:

• parse – gibt den Parser an
• parserOptions – gibt Parseroptionen an
• env – gibt die Ausführungsumgebung des Skripts an
• root – ist When true, hör auf, nach oben nach Konfigurationsdateien im übergeordneten Verzeichnis zu suchen
• globals – zusätzliche globale Variablen, auf die das Skript während der Ausführung zugreift
• rules – fügen Sie hier Ihre benutzerdefinierten Regeln hinzu

Wenn eslint global installiert ist, können wir die Konfigurationsdatei auch mit dem folgenden Befehl generieren:

$ eslint index.js

Andernfalls, wenn Sie Nachdem Sie es lokal in Ihrem Projekt installiert haben, müssen Sie im Terminal Folgendes eingeben:

module.exports = {
  parserOptions: {
    babelOptions: {
      presets: ['@babel/preset-react'],
    },
  },
  plugins: ['react'],
  rules: {
    /**
     * 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
     * @reason 类型相关的约束交给 TypeScript
     */
    'react/boolean-prop-naming': 'off',
    /**
     * <button> 必须有 type 属性
     */
    &#39;react/button-has-type&#39;: &#39;off&#39;,
    /**
     * 一个 defaultProps 必须有对应的 propTypes
     * @reason 类型相关的约束交给 TypeScript
     */
    &#39;react/default-props-match-prop-types&#39;: &#39;off&#39;,
    /**
     * props, state, context 必须用解构赋值
     */
    &#39;react/destructuring-assignment&#39;: &#39;off&#39;,
    /**
     * 组件必须有 displayName 属性
     * @reason 不强制要求写 displayName
     */
    &#39;react/display-name&#39;: &#39;off&#39;,
    // ...
  }
}

In beiden Fällen werden Sie aufgefordert, einen Satz von .eslintrc-Dateien zu generieren. Grundregeln.

Oben Beispiel einer generierten Datei nach der Eingabeaufforderung:

rrreee

Weitere Informationen zur Konfiguration finden Sie unter: 🎜🎜http://eslint.org/docs/user-guide/configuring🎜🎜🎜Für eine einfachere Ausführung können wir es im ausführen Fügen Sie zum package.json des Projekts das folgende Skript im Feld scripts hinzu: 🎜rrreee🎜Wir wenden diese Regel auf die folgende Datei an: 🎜rrreee🎜Execute npm run lint Die folgenden Informationen werden angezeigt: 🎜🎜🎜🎜ESLint Der Tipp ist schon klar: 3 Fehler. Die zusätzlichen Semikolons am Ende der ersten und zweiten Zeile sind falsch, a wird zugewiesen, aber nie verwendet. 🎜🎜Und fordert Sie auf, die Option --fix zu verwenden, um Fehler und Warnungen zu beheben. Es gibt zwei Fehler, die behoben werden können. Verwenden Sie nun npm run lint-fix, um das Problem zu beheben, und es liegt an Ihnen, a manuell zu ändern. 🎜🎜Sie können auch den Befehl npm run lint-html ausführen, um die Prüfergebnisse in eine Webseitendatei zu schreiben. 🎜🎜🎜

🎜Konfigurationsdateipriorität🎜🎜🎜Wenn Sie die obigen Schritte Schritt für Schritt befolgen, wissen Sie möglicherweise bereits, dass ESLint mehrere Formate von Konfigurationsdateien unterstützt. 🎜🎜Jetzt stellt sich die Frage: 🎜Wenn sich mehrere ESLint-Dateien im selben Verzeichnis befinden, wie werden diese ausgeführt und welche Priorität haben sie? Unsere Antwort ist im 🎜🎜🎜ESLint 🎜Quellcode🎜 und die Prioritätskonfiguration lautet wie folgt: 🎜rrreee🎜🎜🎜.eslintrc.js > .eslintrc.yml > .eslintrc.json > ; . eslintrc > package.json🎜🎜🎜🎜🎜Rules🎜🎜🎜 Regeln in ESLint werden separat hinzugefügt. Standardmäßig werden keine Regeln erzwungen. Sie müssen eine Regel explizit angeben, bevor sie für den Linting-Prozess aktiviert wird. 🎜🎜🎜Öffnen Sie die offizielle Dokumentation, um die vollständige Liste der Regeln zu finden: 🎜🎜http://eslint.org/docs/rules/🎜

在决定要包含哪些规则之后，您必须设置这些错误级别。每个错误级别可定义如下：

• 0 — 关闭规则，相当于 off
• 1 — 打开规则作为警告，相当于 warn
• 2 — 打开规则作为错误，相当于 error

错误和警告之间的区别在于 eslint 完成时将具有的退出代码。如果发现任何错误，eslint 将以 1 退出代码退出，否则将以 0 退出。

如果您在生成步骤中进行 lint，这允许您控制哪些规则应破坏您的生成，哪些规则应视为警告。

环境

您正在编写的代码可能适用于特定环境，例如，您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API，并且该应用程序的前端将在 Vue/React 中构建。

两个不同的项目、两个不同的环境，它们都可以在一个文件中具有单独的 eslint 配置，即使客户端和服务器位于一个被视为项目根目录的项目目录下。

它是如何完成的？

通过在 .eslintrc 的 "env" 部分将环境 id 设置为 true。

ESLint CLI

ESLint 附带一个命令行界面（CLI），用于 lint 文件或目录。

$ eslint index.js

前面示例中我们已经看到，运行命令后生成的输出将按文件分组，并将指定 line:column 警告/错误、错误原因以及每个故障的规则名称。

将 ESLint 与您喜欢的编码风格结合使用

ESLint 个人并不提倡任何编码风格。您可以设置 .eslintrc 文件以使用您喜欢的样式规则强制编码样式。

您还可以将 ESLint 与样式指南（如 Airbnb、JavaScript 标准风格）一起使用。

你还必须使用额外的插件，例如：

• Airbnb 的插件 eslint-config-airbnb-base。
• JavaScript 标准风格 eslint-config-standard
• 一些流行库的插件：Vue | React

团队规范

AlloyTeam 给出的 React/Vue/TypeScript 项目的渐进式 ESLint 配置（eslint-config-alloy），以下贴出 React 的一小部分配置：

module.exports = {
  parserOptions: {
    babelOptions: {
      presets: ['@babel/preset-react'],
    },
  },
  plugins: ['react'],
  rules: {
    /**
     * 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
     * @reason 类型相关的约束交给 TypeScript
     */
    'react/boolean-prop-naming': 'off',
    /**
     * <button> 必须有 type 属性
     */
    &#39;react/button-has-type&#39;: &#39;off&#39;,
    /**
     * 一个 defaultProps 必须有对应的 propTypes
     * @reason 类型相关的约束交给 TypeScript
     */
    &#39;react/default-props-match-prop-types&#39;: &#39;off&#39;,
    /**
     * props, state, context 必须用解构赋值
     */
    &#39;react/destructuring-assignment&#39;: &#39;off&#39;,
    /**
     * 组件必须有 displayName 属性
     * @reason 不强制要求写 displayName
     */
    &#39;react/display-name&#39;: &#39;off&#39;,
    // ...
  }
}

您可以参考该团队的一些配置，应用到自己的项目中。

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonSo installieren und verwenden Sie ESLint in Node.js-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!