Configuration d'Eslint et plus joli pour un projet d'équipe

Installez Eslint et plus joli avec les intégrations: Eslint-Config-Prettier et Eslint-Plugin-Prettier pour aligner les règles de mise en forme et de liaison. 2. Configurez Eslint pour étendre le plugin: plus joli / recommandé et configurez un fichier .prettierrc avec des options de formatage partagées comme semi, singlequote et printwidth. 3. Ajoutez des scripts NPM pour la liaison et la mise en forme, et appliquez-les dans CI en utilisant - Fix et - Vérifier les indicateurs pour empêcher le code non formaté de fusionner. 4. Facultativement, créez un package de configuration partagé pour des règles cohérentes sur plusieurs projets en étendant une configuration centralisée. 5. Assurez-vous que tous les membres de l'équipe utilisent des intégrations d'éditeurs comme les extensions Eslint et plus jolies de VS Code avec FormatOnSave et CodeActionSonsAve activées via .vscode / settings.json. 6. Utilisez .prettiERIGNore et .eslignore pour exclure la construction d'artefacts et Node_modules du traitement, de l'amélioration des performances et d'éviter les erreurs. Cette configuration garantit une qualité de code automatisée cohérente à travers l'équipe, élimine les débats de style et rationalise la collaboration.

La configuration d'Eslint et plus jolie dans un projet d'équipe ne concerne pas seulement le style de code - il s'agit de cohérence, de moins de conflits de fusion et de revues de code plus lisses. Lorsque tout le monde dans l'équipe écrit du code qui se ressemble, il est plus facile de lire, de maintenir et de collaborer. Voici comment configurer Eslint et plus jolis ensemble d'une manière qui fonctionne de manière fiable dans votre équipe.

✅ 1. Installez et configurez Eslint plus joli

Commencez par installer les packages nécessaires sous forme de dépendances de développement:

 Installation du NPM - Save-Dev Eslint plus joli Eslint-Config-Pretttier Eslint-Plugin-Prettrial

• eslint : le Linter.
• prettier : le formateur de code.
• eslint-config-prettier : désactive les règles d'Eslint qui entrent en conflit avec plus joli.
• eslint-plugin-prettier : fonctionne plus jolie en tant que règle Eslint afin que vous puissiez attraper du code non formaté.

Créez ensuite ou mettez à jour votre configuration Eslint ( .eslintrc.js , .eslintrc.json , ou .eslintrc.cjs ):

 module.exports = {
  Env: {
    Navigateur: vrai,
    es2021: vrai,
    Node: vrai,
  },
  s'étend: [
    «Eslint: recommandé»,
    «Plugin: plus joli / recommandé», // permet de plus jolies et désactive les règles contradictoires
  ],
  parserroptions: {
    ecmaversion: «dernier»,
    SourceType: «module»,
  },
  règles: {
    // Ajouter des règles Eslint personnalisées ici
    «Non-console»: «avertit»,
  },
};

Cette configuration utilise plugin:prettier/recommended , qui permet automatiquement la plus jolie via Eslint et applique eslint-config-prettier .

✅ 2. Ajouter un fichier de configuration plus joli

Créez un fichier .prettierrc pour définir les règles de formatage:

 {
  "Semi": vrai,
  "traîningcomma": "es5",
  "singlequote": vrai,
  "Printwidth": 80,
  "Tabwidth": 2
}

Vous pouvez également utiliser .prettierrc.json , .prettierrc.js , ou même prettier.config.js . Cela garantit que tout le monde utilise les mêmes paramètres de formatage.

? Conseil de pro: Évitez de s'appuyer sur les défauts de l'éditeur. La configuration explicite empêche les différences entre les configurations des membres de l'équipe.

✅ 3. Ajouter des scripts et appliquer en CI

Mettez à jour votre package.json avec des scripts utiles:

 {
  "scripts": {
    "peluche": "eslint. --ext .js, .jsx, .ts, .tsx",
    "peluche: fix": "eslint. --ext .js, .jsx, .ts, .tsx --fix",
    "Format": "plus joli --écriture."
  }
}

Exécuter npm run lint:fix des problèmes de liaison automatique et npm run format pour formater tous les fichiers.

Ensuite, appliquez le formatage et la libellule dans votre pipeline CI:

 NPM Run Lint
Format d'exécution NPM - --Check # échoue si les fichiers ne sont pas formatés

--check dit plus à plus de signalement des erreurs au lieu d'écrire des fichiers - parfait pour CI.

✅ 4. Partagez des configurations sur les projets (facultatif mais utile)

Si votre équipe travaille sur plusieurs projets, extraire Eslint et des configurations plus jolies dans un package partagé (par exemple, @yourcompany/eslint-config ).

Exemple:

 // @ yourCompany / Eslint-Config / index.js
module.exports = {
  s'étend: [
    «Eslint: recommandé»,
    «Plugin: plus joli / recommandé»
  ],
  Env: {Node: true, Browser: true},
  ParserORTIONS: {Ecmaversion: 'Dernier'},
  Règles: {'No-UNUSED-VARS': 'ERROR'}
};

Ensuite, installez et étendez-le dans n'importe quel projet:

 Étend: '@ yourCompany / Eslint-Config'

Cela maintient les règles cohérentes entre les références sans duplication.

✅ 5. Intégration de l'éditeur (Configuration de l'équipe)

Assurez-vous que chaque membre de l'équipe configure son éditeur pour respecter les paramètres Eslint et plus jolis du projet.

Pour le code vs:

1. Installez les extensions Eslint et plus jolies .
2. Ajoutez un .vscode/settings.json (facultatif, mais utile):

 {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatonsave": true,
  "editor.CodeActionSonsAve": {
    "source.fixall.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "vue", "html"]
}

⚠️ avertissez les membres de l'équipe de ne pas utiliser les extensions mondiales plus jolies ou dépassées. Laissez la configuration locale du projet gagner.

✅ 6. Utilisez un .prettierignore et .eslintignore

Tout comme .gitignore , excluez les fichiers qui ne doivent pas être vérifiés:

.prettierignore

 node_modules
distr
construire
* .min.js

.eslintignore

 node_modules
distr
construire

Cela évite le traitement et les erreurs inutiles.

Notes finales

• Commissez toujours vos fichiers de configuration: .eslintrc.* , .prettierrc , .prettierignore , etc.
• Étapes de configuration de document dans votre CONTRIBUTING.md .
• Exécutez régulièrement npm run lint et npm run format ou les accrochez-les dans le pré-engagement (par exemple, avec Husky Lint en cours de peluche).

Avec cette configuration, votre équipe obtient une qualité de code et une formatage cohérentes et automatisées - pas de débats sur les demi-colons ou l'indentation dans PRS.

Fondamentalement, c'est un petit coût initial pour la santé mentale à long terme.

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!