Processus de formatage de code

Beaucoup d'opinions ont cours pour savoir à quoi doit ressembler un code propre. Les "linters" sont apparus pour inciter le développeur à respecter des standards. On peut mettre une phase de "lint" au lancement du projet (type npm run dev dans le cadre d'un projet Node) ou avant de pousser son code sur le serveur distant par exemple.

Ca a le désavantage de bloquer le développeur si des règles de lint ont été manquées. Par exemple, une règle a été configurée pour terminer toutes les lignes avec un ;. S'il manque un point virgule, le linter va râler, forçant le développeur à corriger lui-même la ligne en question. Il existe une option --fix avec certains linter, mais cela ne corrige pas tout.

Formatage de code

La solution est donc un "code formatter". Prettier.io est un formatter relativement récent, issu du monde JS, et existe pour d'autres langages, tels que le PHP désormais.

On peut ainsi coder sans se soucier de l'indentation, des règles d'espaces..puis passer un coup de formateur pour se retrouver avec un code propre et lisible.

Par exemple, ce code

const displayPage =(url,animate,options = {}) => {
  runLeaveAnimation(url, options).then(() => runEnterAnimation(animate, options)).then(() => getData(url))
.catch(console.log)

}

sera formaté de cette manière :

const displayPage = (url, animate, options = {}) => {
  runLeaveAnimation(url, options)
    .then(() => runEnterAnimation(animate, options))
    .then(() => getData(url))
    .catch(console.log)
}

Les options disponibles sont précisées dans la documentation et concernent la longueur maximum d'une ligne, l'espacement avant une parenthèse, le point-virgule en fin de ligne ou non, ...

Les options que j'utilise sont celles-ci (extrait de package.json) :

"prettier": {
    "printWidth": 100,
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true
  }

Flux de travail

Comment intégrer ce formateur dans ses habitudes de travail ? En suivant les conseils de la documentation de Prettier : avec des hooks de pre-commit.

Illustration à travers un fichier package.json :

"scripts": {
    "lint:js": "prettier --write '**/*.js'"
  },
  "dependencies": {
    "husky": "^1.0.0-rc.13",
    "lint-staged": "^7.2.2",
    "prettier": "1.7.4",
    "prettier-standard": "^6.0.0"
  },
  "lint-staged": {
    "*.js": [
      "npm run lint:js -- ",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

Ainsi, à chaque commit, Husky déclenche une tâche Lint-Staged, qui elle lance le script lint:js et formate les fichiers js du projet. La même chose peut se faire pour du CSS, du JSON, du GraphQL.