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.
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 支持几种格式的配置文件。
现在存在一个问题，如果同个目录下有多个 ESLintConfiguration
.eslintrc : Si eslint est installé globalement, nous pouvons également générer le fichier de configuration à l'aide de la commande suivante :const configFilenames = [ ".eslintrc.js", ".eslintrc.yaml", ".eslintrc.yml", ".eslintrc.json", ".eslintrc", "package.json" ]Copier après la connexionChamps principaux :
parse— spécifie l'analyseur- < code>parserOptions — spécifie les options de l'analyseur
env— spécifie l'environnement d'exécution du scriptroot— est Quandtrue, arrêtez de rechercher vers le haut les fichiers de configuration dans le répertoire parentglobals— variables globales supplémentaires accessibles par le script pendant l'exécutionrules— ajoutez vos règles personnalisées ici
$ eslint index.js
module.exports = {
parserOptions: {
babelOptions: {
presets: ['@babel/preset-react'],
},
},
plugins: ['react'],
rules: {
/**
* 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
* @reason 类型相关的约束交给 TypeScript
*/
'react/boolean-prop-naming': 'off',
/**
* <button> 必须有 type 属性
*/
'react/button-has-type': 'off',
/**
* 一个 defaultProps 必须有对应的 propTypes
* @reason 类型相关的约束交给 TypeScript
*/
'react/default-props-match-prop-types': 'off',
/**
* props, state, context 必须用解构赋值
*/
'react/destructuring-assignment': 'off',
/**
* 组件必须有 displayName 属性
* @reason 不强制要求写 displayName
*/
'react/display-name': 'off',
// ...
}
}.eslintrc Règles de base. 
Ci-dessus Exemple de fichier généré après l'invite :
rrreeePour 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 dupackage.jsondu projet, ajoutez le script suivant dans le champscripts: 🎜rrreee🎜Nous appliquons cette règle au fichier suivant : 🎜rrreee🎜Exécuteznpm run lint </code > Les informations suivantes apparaîtront : 🎜🎜<img src="https://img.php.cn/upload/image/217/229/260/1628559713501817.png" title="1628559713501817.png" alt= "2. png"/>🎜🎜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, <code>aest attribué mais jamais utilisé. 🎜🎜Et vous invite à utiliser l'option--fixpour corriger les erreurs et les avertissements. Il y a 2 erreurs qui peuvent être corrigées. Maintenant, utiliseznpm run lint-fixpour le réparer, et c'est à vous de modifieramanuellement. 🎜🎜Vous pouvez également exécuter la commandenpm run lint-htmlpour é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
ESLintprend en charge plusieurs formats de fichiers de configuration. 🎜🎜Maintenant, il y a une question : 🎜S'il y a plusieurs fichiersESLintdans 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 — 关闭规则，相当于 off1 — 打开规则作为警告，相当于 warn2 — 打开规则作为错误，相当于 error错误和警告之间的区别在于 eslint 完成时将具有的退出代码。如果发现任何错误，eslint 将以 1 退出代码退出，否则将以 0 退出。
如果您在生成步骤中进行 lint，这允许您控制哪些规则应破坏您的生成，哪些规则应视为警告。
您正在编写的代码可能适用于特定环境，例如，您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API，并且该应用程序的前端将在 Vue/React 中构建。
两个不同的项目、两个不同的环境，它们都可以在一个文件中具有单独的 eslint 配置，即使客户端和服务器位于一个被视为项目根目录的项目目录下。
它是如何完成的？
通过在 .eslintrc 的 "env" 部分将环境 id 设置为 true。
ESLint 附带一个命令行界面（CLI），用于 lint 文件或目录。
$ eslint index.js
前面示例中我们已经看到，运行命令后生成的输出将按文件分组，并将指定 line:column 警告/错误、错误原因以及每个故障的规则名称。
ESLint 个人并不提倡任何编码风格。您可以设置 .eslintrc 文件以使用您喜欢的样式规则强制编码样式。
您还可以将 ESLint 与样式指南（如 Airbnb、JavaScript 标准风格）一起使用。
你还必须使用额外的插件，例如：
eslint-config-airbnb-base。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 属性
*/
'react/button-has-type': 'off',
/**
* 一个 defaultProps 必须有对应的 propTypes
* @reason 类型相关的约束交给 TypeScript
*/
'react/default-props-match-prop-types': 'off',
/**
* props, state, context 必须用解构赋值
*/
'react/destructuring-assignment': 'off',
/**
* 组件必须有 displayName 属性
* @reason 不强制要求写 displayName
*/
'react/display-name': 'off',
// ...
}
}您可以参考该团队的一些配置，应用到自己的项目中。
更多编程相关知识，请访问：编程入门！！
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!
débogage node.js
Avertissement d'appel du Centre national antifraude
tu protèges le pilote
Combien vaut un Bitcoin en RMB ?
Outil de valorisation de nom de domaine de site Web
Comment supprimer les filigranes TikTok d'autres personnes des vidéos TikTok
La différence entre vscode et vs
Quelle est la différence entre xls et xlsx
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
