Norme de codage JS et outils pour la respecter.

Edit me

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