Seamless code styling

Combien de fois vous avez perdu du temps à argumenter sur des règles de codestyle sans arriver à vous mettre d’accord ?

Si vous faites du JavaScript, c’est sûrement arrivé plus d’une fois.

Après un énième débat sur les ternaires qui divisent plus les foules que le débat chocolatine/pain au chocolat, et après beaucoup trop de commentaires superflus sur les merge requests, on décide enfin de mettre un terme à tout ça.

Comment ? Avec un outil fédérateur et opiniâtre : prettier.

C’est quoi et pourquoi ?

C’est quoi : un outil de formatage de code automatique dont la configuration est pour le moins minimaliste.

Pourquoi : finis les débats, c’est Prettier qui décide et on n’en parle plus.

Prenons l’exemple de la ternaire :

  free ?
    "Gratuit" : price;
  free
    ? "Gratuit" : price;
  free
    ? "Gratuit"
    : price;
  free ?
    "Gratuit" :
    price;

Laquelle de ces syntaxes vous semble la meilleure ?

Réponse : on s’en fout, c’est Prettier qui décide

Prettier vous offre le luxe de ne plus avoir à vous en soucier. Vous allez voir par la suite que vous ne serez même plus obligé de coder proprement.

Distinction

Prettier s’occupe du code formatting, c’est-à-dire les points-virgules, les espaces, la taille des lignes, les quotes, etc. (aka les règles sujettes à débat)

Prettier ne s’occupe pas du code quality, c’est-à-dire les règles du type no-unused-vars, no-console-log, no-param-reassign, etc.

Ce sont les erreurs qui peuvent impacter l’exécution du code, contrairement aux erreurs de formatage qui n’ont aucun impact.

Pour le code quality, il faut un linter type eslint, tslint.

Configuration – Prettier tout seul

Si vous souhaitez utiliser Prettier tout seul c’est possible.

yarn install --dev --exact prettier

Puis exécuter cette commande avec le glob qui correspond à votre structure de dossiers :

prettier --write "./app/**/*.{js,jsx}"

Configuration – Prettier et eslint sitting in a tree

L-I-N-T-I-N-G. First comes Prettier, then comes eslint.

Pour de meilleurs résultats, il est conseillé d’utiliser Prettier de paire avec un linter, ici on a choisi eslint.

Pour ça on a besoin de 3 packages :

• prettier : duh
• eslint-config-prettier : permet de désactiver toutes les règles de formatting d’eslint pour éviter les conflits.
• eslint-plugin-prettier : permet d’exécuter Prettier dans eslint, comme un plugin.

yarn install --dev --exact prettier eslint-config-prettier eslint-plugin-prettier

Avec un peu de config eslint :

extends:
  # Autres plugins comme airbnb, prettier/react, prettier/standard, etc.
  # Attention, il doit être à la fin de la liste pour surcharger les autres règles
  - plugin:prettier/recommended
rules:
  prettier/prettier: error
  # Autres règles

Il suffit ensuite d’exécuter un bon vieux eslint --fix pour que Prettier formatte votre code.

Doc Prettier : Intégrer Prettier avec eslint.

Tout ça c’est bien beau, mais je déteste devoir exécuter ma suite de code style linting avant de pousser ma branche

Oui, moi aussi, la bonne nouvelle c’est qu’il y a des plugins pour vos éditeurs préférés afin de profiter du formatOnSave.

Éditeurs format on save

• Pour Atom
• Pour Visual Studio Code

Pour vscode, vous pouvez activer le formatOnSave dans les paramètres (il est configurable par langage) :

"editor.formatOnSave": false,
"[javascript]": {
    "editor.formatOnSave": true
}

Faites un simple Cmd + s et zoop, votre fichier est formatté.

Vous n’avez même plus besoin d’écrire les points-virgules si ça vous chante !

Astuces

• Placez un fichier global ~/.prettierrc.yml si vous en avez marre de mettre tout le temps la même conf partout, prettier remonte jusqu’à ce qu’il trouve un fichier conf.
• Prettier fonctionne pour du CSS, Markdown, JSX, TypeScript et j’en passe. La liste ici
• Exemple de conf :

singleQuote: true
trailingComma: es5
printWidth: 120
bracketSpacing: true
arrowParens: always
jsxBracketSameLine: false

That’s all folks!