🛠Optim: Code Style - Ajout ESLint et Prettier

[malicktech]

Ajout d'ESLint et Prettier au projet

Description

Afin d'améliorer la qualité du code et d'assurer une cohérence dans le style de codage au sein du projet, je propose l'intégration d'ESLint et de Prettier.

• ESLint permettra de détecter et de corriger les erreurs de syntaxe ou de style, selon les règles définies.
• Prettier assurera une mise en forme uniforme du code, rendant le code plus lisible et facilitant les contributions.

Avantages

• Qualité du code : Réduction des erreurs grâce à des règles de linting strictes.
• Consistance : Uniformisation du style de code à travers le projet.
• Facilité de contribution : Les nouveaux contributeurs pourront suivre facilement les règles établies sans ambiguïté.

Implementation

Docs nuxt eslint : https://eslint.nuxt.com

1. Installer ESLint et Prettier :

   npx nuxi module add eslint
   npm i -D prettier eslint
   npm i -D @nuxt/eslint-config eslint-plugin-prettier eslint-config-prettier @types/eslint-config-prettier
   npm add -D prettier-plugin-tailwindcss

2. Fichier de config

└── eslint.config.mjs     # ESLint config file
└── .prettierrc           # Prettier Config file

3. Ajout des command sur le package.json

• 'npm run lint' command pour vérifier que le code style est correct
• 'npm run lint:fix' pour fixer automatiquement les issues.
• 'npm run format' pour formater

4. sur VSCode user, installer ces 2 extensions :

• Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint