ESLint est un outil d'inspection de code JavaScript qui peut être utilisé pour vérifier le style du code et les erreurs potentielles, et assurer la normalisation et le contrôle de la qualité du code. Voici les options de configuration courantes dans les fichiers de configuration ESLint :
1. Installez ESLint
Tout d’abord, exécutez la commande suivante sur la ligne de commande pour installer ESLint globalement :
npm install -g eslint
Ensuite, exécutez la commande suivante dans le répertoire racine du projet pour initialiser la configuration ESLint :
eslint --init
2. Options de configuration courantes
1. analyseur
Spécifiez l'analyseur, Espree est utilisé par défaut. Par exemple, en utilisant l'analyseur Babel :
module.exports = { parser: 'babel-eslint' }
2. s'étend
Étendez un ensemble de règles de configuration existant. Les valeurs facultatives sont :
- eslint : règles par défaut
- airbnb : règles de style Airbnb
- google : règles de style Google
- standard : règles de style standard JavaScript
- vue：Guide Vue.js
Par exemple, en utilisant les règles Airbnb :
module.exports = { extends: 'airbnb-base' }
3. règles
Spécifiez des règles personnalisées ou modifiez les règles existantes. Les règles peuvent spécifier des niveaux d'avertissement et d'erreur, respectivement « avertissement » et « erreur ».
Par exemple, interdisez les points-virgules supplémentaires :
module.exports = { rules: { 'no-extra-semi': 'error' } }
4. environnement
Spécifie l'environnement, lié aux variables globales. Les valeurs facultatives sont : es6, navigateur, nœud, commonjs, amd, mocha, jquery, prototypejs, shelljs, mongo, jasmine, phantomjs, rapporteur.
Par exemple, pour rendre disponible un environnement ES6 :
module.exports = { env: { es6: true } }
5. globales
Définir des variables globales :
module.exports = { globals: { Vue: false } }
3. Exemple de fichier de configuration
Voici un exemple de fichier de configuration utilisant les règles Airbnb et modifiant certaines règles personnalisées :
module.exports = { extends: 'airbnb-base', rules: { 'no-console': 'off', 'no-unused-vars': 'error', 'no-extra-semi': 'error', 'semi': ['error', 'never'] }, env: { es6: true, node: true }, globals: { Vue: false } }
Créez le fichier .eslintrc.js dans le répertoire racine du projet et copiez le contenu ci-dessus dans le fichier. Ensuite, installez et activez le plug-in eslint dans l'éditeur pour implémenter la fonction d'inspection du code.
vscode configurer ESlint
Télécharger dans l'extension vscode
Cliquez sur le bouton des paramètres du plug-in et sélectionnez les paramètres de l'extension
Entrez « eslint.enable » dans la zone de recherche, sélectionnez l'option « Espace de travail » ou « Utilisateur » et définissez-la sur true.
Cliquez ensuite sur le bouton dans le coin supérieur droit (voir capture d'écran)
paramètre.json：
1 //Configurer eslint
2 "eslint.autoFixOnSave": true,
3 "files.autoSave": "off",
4 "eslint.validate": [
5 "javascript",
6 "javascriptreact",
7 "html",
8 { "langue": "vue", "autoFix": true }
9 ],
10 "eslint.options": {
11 "plugins": ["html"]
12 },
13 //Afin de respecter les deux espaces d'eslint principe de séparation
14 "editor.tabSize": 2
De cette façon, à chaque fois que vous enregistrez un fichier (ctrl+s), le plug-in eslint corrigera automatiquement la syntaxe eslint du fichier actuel !
Exemple de code du fichier .eslintrc.cjs (copiez le code suivant dans le fichier .eslintrc.cjs)
module.exports = {
"env": {
"navigateur" : vrai,
"es2021" : vrai,
"nœud": vrai
},
"étend": [
"eslint : recommandé",
"plugin:vue/vue3-recommandé",
"plugin :plus joli/recommandé",
"eslint-config-plus joli"
],
"remplacements": [
],
"ParserOptions": {
"ecmaVersion": "dernière",
"sourceType": "module",
"ecmaFeatures": {
"modules": vrai,
'jsx' : vrai
},
"requireConfigFile": faux,
'analyseur' : '@babel/eslint-parser'
},
"plugins": [
"vue",
"plus jolie"
],
"règles": {
'no-console' : 'warn', // Désactive l'apparence de la console
'no-debugger' : 'warn', // Désactiver le débogueur
'no-duplicate-case' : 'warn', // interdire les cas en double
'no-empty' : 'warn', // Les blocs d'instructions vides sont interdits
'no-extra-parens': 'warn', // interdit les parenthèses inutiles
'no-func-assign': 'warn', // Interdire la réaffectation de la déclaration de fonction
'no-unreachable' : 'warn', // Désactive le bloc de code après [return|throw]
'no-else-return': 'warn', // Interdire le bloc else après l'instruction return dans l'instruction if
'no-empty-function': 'warn', // Désactive les blocs de fonctions vides
'no-lone-blocks': 'warn', // Désactive les blocs imbriqués inutiles
'no-redeclare': 'warn', // Ne déclare pas plusieurs fois la même variable
'no-return-assign': 'warn', // Ne pas utiliser d'instructions d'affectation dans les instructions return
'no-return-await' : 'warn', // Désactive les [retour/attente] inutiles
'no-self-compare' : 'warn', // Désactiver les expressions d'auto-comparaison
'no-useless-catch': 'warn', // Désactive les clauses catch inutiles
'no-useless-return' : 'warn', // interdit les instructions de retour inutiles
'no-multiple-empty-lines': 'warn', // Désactive plusieurs lignes vides
'no-useless-call': 'warn', // Désactivez les .call() et .apply() inutiles
'no-var' : 'warn', // interdit var et remplace-le par let et const
'no-delete-var': 'off', // Autoriser l'utilisation de variables de suppression
'no-shadow': 'off', // Autoriser les déclarations de variables à avoir le même nom que les variables dans la portée externe
'dot-notation': 'warn', // Exiger l'utilisation de points autant que possible
'default-case' : 'warn', // Nécessite une branche par défaut dans l'instruction switch
'eqeqeq' : 'warn', // Nécessite === et !==
// 'curly' : 'warn', // Exiger que toutes les instructions de contrôle utilisent un style de crochet cohérent
'space-infix-ops' : 'warn', // Nécessite des espaces autour des opérateurs
'space-unary-ops' : 'warn', // Nécessite des espaces cohérents avant et après les opérateurs unaires
'switch-colon-spacing' : 'warn', // Nécessite des espaces autour des deux points du commutateur
'arrow-spacing': 'warn', // Nécessite des espaces cohérents avant et après les fonctions fléchées
'array-bracket-spacing': 'warn', // Nécessite un espacement cohérent entre les crochets du tableau
'brace-style' : 'warn', // Nécessite un style d'accolade cohérent dans les blocs de code
'max-profondeur' : ['warn', 4], // Nécessite une profondeur maximale de 4 pour les blocs emboîtables
'max-statements' : ['warn', 100], // Le nombre maximum d'instructions autorisées dans le bloc fonction est de 20
'max-nested-callbacks' : ['warn', 3], // Nécessite une profondeur d'imbrication maximale de 3 pour les fonctions de rappel
'max-statements-per-line': ['warn', { max: 1 }], // Demander le nombre maximum d'instructions autorisées dans chaque ligne
"vue/require-default-prop": 0, // Les paramètres de la propriété Close doivent avoir des valeurs par défaut
"vue/singleline-html-element-content-newline": 0, // Un caractère de nouvelle ligne est requis pour fermer un élément d'une seule ligne
"vue/noms-de-composants-multi-mots": "off",
"vue/multiline-html-element-content-newline": 0, // Un caractère de nouvelle ligne est requis pour fermer les éléments multilignes
// Il est nécessaire que le nombre maximum d'attributs de chaque ligne d'étiquettes ne dépasse pas cinq
'vue/max-attributes-per-line' : ['warn', { singleline : 5 }],
// Annule le paramètre de restriction selon lequel l'étiquette de fermeture ne peut pas se fermer automatiquement
"vue/html-self-closing": ["erreur", {
"html": {
"void": "toujours",
"normal": "jamais",
"composant": "toujours"
},
"svg": "toujours",
"math": "toujours"
}]
}
}