Norme de codage JS et outils pour la respecter.
Ce document est valide pour les développements sur des projets en JS moderne (basé sur NodeJS, React, etc…)
Dans le cadre des modules et outils développées en JS, on utilise la norme de codage mise à disposition par Airbnb (Airbnb Styleguide) et celle-ci est appliquée à l’aide de l’outil ESLint.
Il est recommandé d’installer un plugin ESLint pour l’éditeur de votre choix lorsque vous travaillez sur ce projet. Ce n’est pas obligatoire mais facilite grandement le respect de la norme.
Installation et configuration d’ESLint
Pour une installation des outils localement par projet, on va modifier le fichier package.json
et ajouter le fichier de configuration .eslintrc.js
à la racine du projet.
Installation des dépendances package.json
{
"devDependencies": {
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.2.0",
"eslint-plugin-react": "^7.4.0"
}
}
Fichier de configuration .eslintrc.js
module.exports = {
extends: 'airbnb',
rules: {
// `.jsx` extension cannot be used with React Native
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
},
};
Configuration de l’editeur VisualStudioCode
https://code.visualstudio.com/
Pourquoi celui-ci?
- Bonnes performances, rapide
- Régulièrement mis à jour
- avec une bibliothèque d’extensions prête pour venir aider et le personnaliser
- Support natif de beaucoup de langages, syntaxes (les autres sont disponibles par extensions)
- Disponible sur toutes les plateformes
Extensions
Voici la liste des principaux utilisés:
Nom | Utilité |
---|---|
eslint | Utilisation de eslint directement dans l’editeur |
npm Intellisense | Autocompletion pour les imports de modules |
Path Autocomplete | Autocompletion pour les imports de fichiers |