Comment installer et utiliser ESLint dans les projets Node.js

Comment installer et utiliser ESLint dans un projet Node.js ? Cet article vous expliquera comment utiliser ESLint dans les applications Node.js.

【Apprentissage recommandé : "Tutoriel Nodejs"】

ESLint est un utilitaire de linting JavaScript open source qui peut nous aider à standardiser le code et à surmonter certaines erreurs inattendues des développeurs car JavaScript est un langage faiblement typé.

Il existe de nombreuses options de canonisation dans la communauté Javascript, telles que JSHint et JSCS, pour le linting de code, y compris ESLint, dont nous allons parler aujourd'hui.

ESLint est conçu pour rendre toutes les règles entièrement connectables. C’est l’une des principales raisons. Il permet aux développeurs de créer leurs propres règles de peluchage. Chaque règle fournie dans le ESLint Official Guide est une règle indépendante et les développeurs peuvent décider à tout moment d'utiliser ou non une règle spécifique.

Installation

Pour une installation locale dans le répertoire du projet :

$ npm i eslint -D

Pour une installation globale dans le système de travail :

$ npm i eslint -g

Après l'installation, nous pouvons utiliser ESLint via la commande eslint dans le terminal . 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

Configuration

La méthode de configuration la plus simple consiste à configurer un fichier JSON .eslintrc, qui peut décrire toutes les règles de peluchage. Un exemple de

.eslintrc :

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

Champs principaux :

• parse — spécifie l'analyseur
• parserOptions — spécifie les options de l'analyseur
• env — spécifie l'environnement d'exécution du script
• root — est Quand true, arrêtez de rechercher vers le haut les fichiers de configuration dans le répertoire parent
• globals — variables globales supplémentaires accessibles par le script pendant l'exécution
• rules — ajoutez vos règles personnalisées ici

Si eslint est installé globalement, nous pouvons également générer le fichier de configuration à l'aide de la commande suivante :

$ eslint index.js

In Sinon, si vous Après l'avoir installé localement dans votre projet, vous devrez taper dans le terminal :

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;,
    // ...
  }
}

Dans les deux cas, vous serez invité à générer un ensemble de fichiers .eslintrc Règles de base.

Ci-dessus Exemple de fichier généré après l'invite :

rrreee

Pour plus d'informations sur la configuration, veuillez lire : 🎜🎜http://eslint.org/docs/user-guide/configuring🎜🎜🎜Pour une exécution facile, nous pouvons l'exécuter dans le du package.json du projet, ajoutez le script suivant dans le champ scripts : 🎜rrreee🎜Nous appliquons cette règle au fichier suivant : 🎜rrreee🎜Exécutez npm run lint Les informations suivantes apparaîtront : 🎜🎜🎜🎜ESLint L'astuce est déjà évidente : 3 erreurs. Les points-virgules supplémentaires à la fin des première et deuxième lignes sont erronés, a est attribué mais jamais utilisé. 🎜🎜Et vous invite à utiliser l'option --fix pour corriger les erreurs et les avertissements. Il y a 2 erreurs qui peuvent être corrigées. Maintenant, utilisez npm run lint-fix pour le réparer, et c'est à vous de modifier a manuellement. 🎜🎜Vous pouvez également exécuter la commande npm run lint-html pour écrire les résultats de la vérification dans un fichier de page Web. 🎜🎜🎜

🎜Priorité du fichier de configuration🎜🎜🎜Si vous suivez les étapes ci-dessus étape par étape, vous savez peut-être déjà que ESLint prend en charge plusieurs formats de fichiers de configuration. 🎜🎜Maintenant, il y a une question : 🎜S'il y a plusieurs fichiers ESLint dans le même répertoire, comment seront-ils exécutés et quelle est leur priorité ? Notre réponse est donnée dans 🎜🎜🎜ESLint 🎜code source🎜, et sa configuration prioritaire est la suivante : 🎜rrreee🎜🎜🎜.eslintrc.js > .eslintrc.yaml > ; . eslintrc > package.json🎜🎜🎜🎜🎜Rules🎜🎜🎜 Les règles dans ESLint sont ajoutées séparément. Aucune règle n'est appliquée par défaut. Vous devez spécifier explicitement une règle avant qu'elle ne soit activée pour le processus de peluchage. 🎜🎜🎜Ouvrez la documentation officielle pour retrouver la liste complète des règles : 🎜🎜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;,
    // ...
  }
}

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!