{"id":20605,"date":"2021-12-09T15:00:12","date_gmt":"2021-12-09T14:00:12","guid":{"rendered":"https:\/\/www.centreon.com\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/"},"modified":"2021-12-09T14:55:17","modified_gmt":"2021-12-09T14:55:17","slug":"partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier","status":"publish","type":"post","link":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/","title":{"rendered":"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier"},"content":{"rendered":"

Introduction<\/span><\/h2>\n

Cet article est \u00e0 destination de notre communaut\u00e9 et a \u00e9t\u00e9 r\u00e9alis\u00e9 \u00e0 partir des travaux et m\u00e9thodes de travail utilis\u00e9s au sein de notre \u00e9quipe de d\u00e9veloppement et qui ont fait leurs preuves.\u00a0<\/span><\/i><\/p>\n

L\u2019\u00e9quipe de d\u00e9veloppement de Centreon est toujours en recherche constante de nouvelles m\u00e9thodes pour am\u00e9liorer la qualit\u00e9 du code produit mais aussi pour gagner en productivit\u00e9 et cela pour nous permettre de nous concentrer sur ce qui rend le codage vraiment int\u00e9ressant: cr\u00e9er de grandes et belles apps ! C\u2019est la raison pour laquelle nous partageons avec vous ce tuto qui vous explique comment exploiter deux outils que nous aimons particuli\u00e8rement ESLint et Prettier et que nous utilisons pour mieux collaborer et garder un code toujours \u201cnickel\u201d !<\/span><\/p>\n

Commen\u00e7ons par quelques notions de base: si vous savez d\u00e9j\u00e0 \u00e0 quoi sert de linter son code, vous pouvez passer directement au d\u00e9tail du tuto pour apprendre \u00e0 mieux collaborer au sein d\u2019un projet React avec ESLint et Prettier. Dans le cas contraire, lisez le paragraphe ci-dessous !<\/span><\/p>\n

Qu\u2019est-ce que le code linting (\u00e0 quoi cela sert de linter son code) ?<\/b><\/p>\n

Pour commencer, rappelons que Linting en anglais signifie peluchage en r\u00e9f\u00e9rence aux \u201cpeluches\u201d qui peuvent rester sur vos v\u00eatements et qui font que votre linge n\u2019est pas totalement \u201cclean\u201d. Pour vous aider \u00e0 comprendre comment fonctionne le linting de code, comparons-le avec le s\u00e8che-linge qui va \u201cattraper\u201d les peluches et rendre votre linge propre .\u00a0 En programmation, le linter est un outil d\u2019analyse de code statique qui permet de maintenir le code sans erreur ( et sans \u201cpeluche\u201d) et de garantir que le style de codage et la construction restent coh\u00e9rents, quelle que soit la personne qui code. Comme pour la charte graphique, le code va respecter un certain nombre de r\u00e8gles pour \u00e9viter de produire des \u201cpeluches\u201d.<\/span><\/p>\n

Comme la plupart des membres de la communaut\u00e9 JavaScript, nous privil\u00e9gions l’outil ESLint qui permet de scanner le code sans avoir \u00e0 l\u2019ex\u00e9cuter. L\u2019outil est tr\u00e8s flexible et combine une biblioth\u00e8que de plugins qui permettent de r\u00e9pondre \u00e0 de nombreux besoins et qui propose des configurations pr\u00eates \u00e0 l\u2019emploi.\u00a0<\/span><\/p>\n

Parmi ces plugins, il y a Prettier, sur lequel nous allons faire un focus car il permet de re formater automatiquement le code, garantissant ainsi le respect des r\u00e8gles concernant l’indentation, l’espacement , les points virgules et les guillemets.\u00a0<\/span><\/p>\n

Le tutoriel porte donc sur l\u2019utilisation de ce plugin et sur la fa\u00e7on de configurer ESLint et Prettier pour optimiser la collaboration d\u2019une \u00e9quipe dans un environnement React.<\/span><\/p>\n

Installation et configuration<\/span><\/h2>\n

Pour ce tutoriel, nous allons partir de l’exemple d\u2019une application React. Le moyen le plus simple est d\u2019utiliser le g\u00e9n\u00e9rateur <\/span>create-react-app<\/span><\/a>, de mani\u00e8re \u00e0 partir d\u2019une application de base d\u00e9j\u00e0 fonctionnelle. Commen\u00e7ons par g\u00e9n\u00e9rer notre application en lan\u00e7ant :<\/span><\/p>\n\n\n\n
\n
$ npx <\/span>create-react-app<\/span> my-app<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
ESLint peut \u00eatre install\u00e9 comme n\u2019importe quel packet NPM. Nous allons donc l\u2019installer en utilisant :<\/span><\/pre>\n\n\n\n
\n
$ cd<\/span> my-<\/span>app<\/span>\n$ npm install --<\/span>save<\/span>-dev eslint<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Nous allons ensuite g\u00e9n\u00e9rer les fichiers de configuration permettant d\u2019indiquer \u00e0 ESLint quelles r\u00e8gles devront \u00eatre suivies lors de l’ex\u00e9cution de l\u2019analyse :<\/span><\/p>\n\n\n\n
\n
$ npx eslint <\/span>--init<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
La CLI (interpr\u00e9teur de ligne de commande) va ensuite poser un ensemble de questions. Voici les r\u00e9ponses \u00e0 apporter:\u00a0 :<\/span><\/p>\n
How would you like to use ESLint?<\/b> To check syntax, find problems, and enforce code style
\n<\/span>What type of modules does your project use?<\/b> JavaScript modules (import \/ export)
\nWhich framework does your project use?<\/b> React
\n<\/span>Does your project use TypeScript?<\/b> No
\n<\/span>Where does your code run?<\/b> Browser
\n<\/span>How would you like to define a style for your project?<\/b> Use a popular style guide
\n<\/span>Which style guide do you want to follow? <\/b>Airbnb
\n<\/span>What format do you want your config file to be in? <\/b>JavaScript<\/span><\/p>\n
Apr\u00e8s avoir r\u00e9pondu \u00e0 ces questions, les d\u00e9pendances requises vont \u00eatre install\u00e9es sur votre projet.<\/span><\/p>\n
Le <\/span>Airbnb<\/span><\/a> JavaScript Style Guide est devenu un standard solide en ce qui concerne les bonnes pratiques JavaScript, en plus de b\u00e9n\u00e9ficier d\u2019une bonne maintenance de sa configuration JavaScript et d\u2019une importante communaut\u00e9. C\u2019est la raison pour laquelle nous avons d\u00e9cid\u00e9, chez Centreon, de l\u2019utiliser comme base pour nos projets JavaScript. Nous vous recommandons de faire de m\u00eame.<\/span><\/p>\n
Ajoutons maintenant un script dans le fichier package.json afin de v\u00e9rifier les probl\u00e8mes de linting, ainsi qu\u2019un autre pour corriger les erreurs qui peuvent l\u2019\u00eatre automatiquement :<\/span><\/p>\n\n\n\n
\n
\/\/ package.json<\/span>\n\n{<\/span>\n\u00a0 <\/span>\"name\"<\/span>: <\/span>\"my-app\"<\/span>,<\/span>\n\u00a0 ...<\/span>\n\u00a0 },<\/span>\n\u00a0 <\/span>\"scripts\"<\/span>: {<\/span>\n\u00a0 \u00a0 ...<\/span>\n\u00a0 \u00a0 <\/span>\"eslint\"<\/span>: <\/span>\"eslint src --ext .js,.jsx\"<\/span>,<\/span>\n\u00a0 \u00a0 <\/span>\"eslint:fix\"<\/span>: <\/span>\"npm run eslint -- --fix\"<\/span>\n\u00a0 },<\/span>\n\u00a0 ...<\/span>\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ensuite, lan\u00e7ons la commande pour d\u00e9couvrir les probl\u00e8mes qui en r\u00e9sultent :<\/span><\/p>\n\n\n\n
\n
$ npm run eslint<\/span>\n\n> my-app@<\/span>0.1.0<\/span> eslint<\/span>\n> eslint src --ext .js,.jsx<\/span>\n\n\n\/Users\/brunodauria\/my-app\/src\/App.js<\/span>\n \u00a0 <\/span>6<\/span>:<\/span>5<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n \u00a0 <\/span>6<\/span>:<\/span>5<\/span> \u00a0 error\u00a0 JSX not allowed in files with extension '.js'\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/jsx-filename-extension<\/span>\n \u00a0 <\/span>7<\/span>:<\/span>7<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n \u00a0 <\/span>8<\/span>:<\/span>9<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n \u00a0 <\/span>9<\/span>:<\/span>9<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\u00a0 <\/span>10<\/span>:<\/span>16<\/span>\u00a0 error\u00a0 `code` must be placed on a new line\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/jsx-one-expression-per-line<\/span>\n\u00a0 <\/span>10<\/span>:<\/span>16<\/span>\u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\u00a0 <\/span>10<\/span>:<\/span>39<\/span>\u00a0 error\u00a0 ` and save to reload.\u00a0 \u00a0 \u00a0 \u00a0 ` must be placed on a new line\u00a0 react\/jsx-one-expression-per-line<\/span>\n\u00a0 <\/span>12<\/span>:<\/span>9<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/App.test.js<\/span>\n\u00a0 <\/span>4<\/span>:<\/span>1<\/span> \u00a0 error\u00a0 'test' is not defined\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 no-undef<\/span>\n\u00a0 <\/span>5<\/span>:<\/span>10<\/span>\u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\u00a0 <\/span>5<\/span>:<\/span>10<\/span>\u00a0 error\u00a0 JSX not allowed in files with extension '.js'\u00a0 react\/jsx-filename-extension<\/span>\n\u00a0 <\/span>7<\/span>:<\/span>3<\/span> \u00a0 error\u00a0 'expect' is not defined\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 no-undef<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/index.js<\/span>\n \u00a0 <\/span>8<\/span>:<\/span>3<\/span> \u00a0 error\u00a0 JSX not allowed in files with extension '.js'\u00a0 react\/jsx-filename-extension<\/span>\n\u00a0 <\/span>11<\/span>:<\/span>34<\/span>\u00a0 error\u00a0 Missing trailing comma \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 comma-dangle<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/reportWebVitals.js<\/span>\n\u00a0 <\/span>1<\/span>:<\/span>25<\/span>\u00a0 error\u00a0 Expected parentheses around arrow function argument\u00a0 arrow-parens<\/span>\n\u00a0 <\/span>3<\/span>:<\/span>32<\/span>\u00a0 error\u00a0 Expected a line break after this opening brace \u00a0 \u00a0 \u00a0 object-curly-newline<\/span>\n\u00a0 <\/span>3<\/span>:<\/span>74<\/span>\u00a0 error\u00a0 Expected a line break before this closing brace\u00a0 \u00a0 \u00a0 object-curly-newline<\/span>\n\n✖ <\/span>18<\/span> problems (<\/span>18<\/span> errors, <\/span>0<\/span> warnings)<\/span>\n\u00a0 <\/span>6<\/span> errors and <\/span>0<\/span> warnings potentially fixable with the `--fix` option.<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
En premier lieu, corrigeons les probl\u00e8mes qui peuvent l\u2019\u00eatre automatiquement gr\u00e2ce \u00e0 la commande que nous avons ajout\u00e9e :<\/span><\/p>\n\n\n\n
\n
$ npm run eslint:fix<\/span>\n\n> my-app@<\/span>0.1.0<\/span> eslint:fix<\/span>\n> npm run eslint -- --fix<\/span>\n\n\n> my-app@<\/span>0.1.0<\/span> eslint<\/span>\n> eslint src <\/span>\"--fix\"<\/span>\n\n\n\/Users\/brunodauria\/my-app\/src\/App.js<\/span>\n \u00a0 <\/span>6<\/span>:<\/span>5<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n \u00a0 <\/span>6<\/span>:<\/span>5<\/span> \u00a0 error\u00a0 JSX not allowed in files with extension '.js'\u00a0 react\/jsx-filename-extension<\/span>\n \u00a0 <\/span>7<\/span>:<\/span>7<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n \u00a0 <\/span>8<\/span>:<\/span>9<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n \u00a0 <\/span>9<\/span>:<\/span>9<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\u00a0 <\/span>12<\/span>:<\/span>11<\/span>\u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\u00a0 <\/span>16<\/span>:<\/span>9<\/span> \u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/App.test.js<\/span>\n\u00a0 <\/span>4<\/span>:<\/span>1<\/span> \u00a0 error\u00a0 'test' is not defined\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 no-undef<\/span>\n\u00a0 <\/span>5<\/span>:<\/span>10<\/span>\u00a0 error\u00a0 'React' must be in scope when using JSX\u00a0 \u00a0 \u00a0 \u00a0 react\/react-in-jsx-scope<\/span>\n\u00a0 <\/span>5<\/span>:<\/span>10<\/span>\u00a0 error\u00a0 JSX not allowed in files with extension '.js'\u00a0 react\/jsx-filename-extension<\/span>\n\u00a0 <\/span>7<\/span>:<\/span>3<\/span> \u00a0 error\u00a0 'expect' is not defined\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 no-undef<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/index.js<\/span>\n\u00a0 <\/span>8<\/span>:<\/span>3<\/span>\u00a0 error\u00a0 JSX not allowed in files with extension '.js'\u00a0 react\/jsx-filename-extension<\/span>\n\n✖ <\/span>12<\/span> problems (<\/span>12<\/span> errors, <\/span>0<\/span> warnings)<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Vous pouvez voir un grand nombre de probl\u00e8mes, y compris certains indiquant que React doit \u00eatre dans le scope lorsque du code JSX est utilis\u00e9. Depuis React v17, <\/span>cela n\u2019est plus requis<\/span><\/a>, nous allons donc d\u00e9sactiver cette r\u00e8gle dans le fichier <\/span>.eslintrc.js<\/span><\/i>:<\/span><\/p>\n\n\n\n
\n
module<\/span>.exports = {<\/span>\n\u00a0 ...<\/span>\n\u00a0 rules: {<\/span>\n\u00a0 \u00a0 <\/span>'react\/react-in-jsx-scope'<\/span>: <\/span>'off'<\/span>,<\/span>\n\u00a0 },<\/span>\n};<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Renommons ensuite les fichiers contenant du code JSX en utilisant l\u2019extension <\/span>.jsx<\/span><\/i><\/p>\n\n\n\n
\n
$ mv src\/App.js src\/App.jsx<\/span>\n\n$ mv src\/index.js src\/index.jsx<\/span>\n\n$ mv src\/index.test.js src\/index.test.jsx<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Il reste \u00e0 pr\u00e9sent seulement deux erreurs :<\/span><\/p>\n\n\n\n
\n
$ npm run eslint <\/span>\n\n> my-app@<\/span>0.1.0<\/span> eslint<\/span>\n> eslint src --ext .js,.jsx<\/span>\n\n\n\/Users\/brunodauria\/my-app\/src\/App.test.jsx<\/span>\n\u00a0 <\/span>4<\/span>:<\/span>1<\/span>\u00a0 error\u00a0 'test' is not defined\u00a0 \u00a0 no-undef<\/span>\n\u00a0 <\/span>7<\/span>:<\/span>3<\/span>\u00a0 error\u00a0 'expect' is not defined\u00a0 no-undef<\/span>\n\n✖ <\/span>2<\/span> problems (<\/span>2<\/span> errors, <\/span>0<\/span> warnings)<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Comme elles sont li\u00e9es directement au fonctionnement de Jest (framework de test JavaScript), nous pouvons, soit les d\u00e9sactiver (au moins pour les fichiers de test), soit ajouter un plugin ESLint d\u00e9di\u00e9. C\u2019est ce que nous allons faire afin d\u2019\u00e9viter d\u2019\u00e9crire du code qui pourrait potentiellement passer \u00e0 travers nos r\u00e8gles de linting.<\/span><\/p>\n
Installons d\u2019abord le plugin :<\/span><\/p>\n\n\n\n
\n
$ npm install --save-dev eslint-plugin-jest<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ensuite ajoutons le plugin \u00e0 la configuration :<\/span><\/p>\n\n\n\n
\n
\/\/ .eslintrc.js<\/span>\n\nmodule<\/span>.exports = {<\/span>\n\u00a0 env: {<\/span>\n\u00a0 \u00a0 ...<\/span>\n\u00a0 \u00a0 <\/span>'jest\/globals'<\/span>: <\/span>true<\/span>,<\/span>\n\u00a0 },<\/span>\n\u00a0 ...<\/span>\n\u00a0 plugins: [<\/span>\n\u00a0 \u00a0 <\/span>...<\/span>\n\u00a0 \u00a0 <\/span>'jest'<\/span>,<\/span>\n\u00a0 ],<\/span>\n\u00a0 ...<\/span>\n};<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ce qui devrait nous soulager des erreurs restantes !<\/span><\/p>\n
Ajouter les r\u00e8gles de formatage avec le plugin Prettier<\/span><\/h2>\n
Formater le code automatiquement afin de le rendre plus clair et plus lisible est une chose cruciale quand il s\u2019agit de travailler en \u00e9quipe (et de fa\u00e7on g\u00e9n\u00e9rale cela aide beaucoup le d\u00e9veloppeur m\u00eame quand il travaille seul !). Cela peut faire gagner beaucoup de temps, particuli\u00e8rement lors des revues de diffs provenant d\u2019une Pull request, et cela permet de se concentrer sur le code \u00e0 \u00e9crire plut\u00f4t que sa pr\u00e9sentation esth\u00e9tique.\u00a0<\/span><\/p>\n
Prettier<\/span><\/a> permet cela, gr\u00e2ce \u00e0 une configuration minimale et sans avoir \u00e0 se pr\u00e9occuper de la gestion de r\u00e8gles trop nombreuses (g\u00e9rer celles de base suffisent amplement !). Un plugin ESLint est disponible pour r\u00e9aliser son int\u00e9gration compl\u00e8te, \u00e9vitant ainsi d\u2019avoir \u00e0 utiliser plusieurs outils. Toute violation des r\u00e8gles de formatage devient un probl\u00e8me de linting qui va \u00eatre remont\u00e9 par ESLint et qui pourra \u00eatre \u00e9ventuellement corrig\u00e9 automatiquement.\u00a0\u00a0<\/span><\/p>\n
En premier lieu, nous allons indiquer \u00e0 ESLint quelles r\u00e8gles doivent \u00eatre d\u00e9sactiv\u00e9es afin d\u2019\u00e9viter les conflits avec Prettier. Cela est fait par le paquet <\/span>eslint-config-prettier<\/span><\/a>.<\/span><\/p>\n
Installons-le :<\/span><\/p>\n\n\n\n
\n
$ npm install --save-dev eslint-config-prettier<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ensuite, ajoutons-le au fichier de configuration :<\/span><\/pre>\n\n\n\n
\n
\/\/ .eslintrc.js<\/span>\n\nmodule<\/span>.exports = {<\/span>\n\u00a0 ...<\/span>\n\u00a0 extends: [<\/span>\n\n\u00a0\u00a0\u00a0\u00a0...<\/span>\n\u00a0 \u00a0 <\/span>'prettier'<\/span>,<\/span>\n\u00a0 ],<\/span>\n\u00a0 ...<\/span>\n\n};<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
A pr\u00e9sent, installons le plugin Prettier de ESLint :<\/span><\/p>\n\n\n\n
\n
$ npm install --save-dev eslint-plugin-prettier<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ajoutons le plugin dans la configuration, en plus de la r\u00e8gle correspondante :<\/span><\/p>\n\n\n\n
\n
\/\/.eslintrc.js<\/span>\n\nmodule<\/span>.exports = {<\/span>\n\u00a0 ...<\/span>\n\u00a0 plugins: [<\/span>\n\u00a0 \u00a0 ...<\/span>\n\u00a0 \u00a0 <\/span>'prettier'<\/span>\n\u00a0 ],<\/span>\n\u00a0 ...<\/span>\n\u00a0 rules: {<\/span>\n\u00a0 \u00a0 ...<\/span>\n\u00a0 \u00a0 <\/span>\"prettier\/prettier\"<\/span>: <\/span>\"error\"<\/span>,<\/span>\n\u00a0 },<\/span>\n};<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Une v\u00e9rification des probl\u00e8mes donne :<\/span><\/p>\n\n\n\n
\n
$ npm run eslint<\/span>\n\n> my-app@<\/span>0.1.0<\/span> eslint<\/span>\n> eslint src --ext .js,.jsx<\/span>\n\n\n\/Users\/brunodauria\/my-app\/src\/App.jsx<\/span>\n \u00a0 <\/span>1<\/span>:<\/span>18<\/span>\u00a0 error\u00a0 Replace `<\/span>'.\/logo.svg'<\/span>` <\/span>with<\/span> `<\/span>\".\/logo.svg\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n \u00a0 <\/span>2<\/span>:<\/span>8<\/span> \u00a0 error\u00a0 Replace `<\/span>'.\/App.css'<\/span>` <\/span>with<\/span> `<\/span>\".\/App.css\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n\u00a0 <\/span>10<\/span>:<\/span>15<\/span>\u00a0 error\u00a0 Replace `\u23ce\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7{<\/span>'\u00b7'<\/span>}\u23ce\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7<<\/span>code<\/span>>src\/App.jsx<\/<\/span>code<\/span>>\u23ce\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7{<\/span>'\u00b7'<\/span>}\u23ce\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7` <\/span>with<\/span> `\u00b7<<\/span>code<\/span>>src\/App.jsx<\/<\/span>code<\/span>>`\u00a0 prettier\/prettier<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/App.test.jsx<\/span>\n\u00a0 <\/span>1<\/span>:<\/span>32<\/span>\u00a0 error\u00a0 Replace `<\/span>'@testing-library\/react'<\/span>` <\/span>with<\/span> `<\/span>\"@testing-library\/react\"<\/span>`\u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n\u00a0 <\/span>2<\/span>:<\/span>17<\/span>\u00a0 error\u00a0 Replace `<\/span>'.\/App'<\/span>` <\/span>with<\/span> `<\/span>\".\/App\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n\u00a0 <\/span>4<\/span>:<\/span>6<\/span> \u00a0 error\u00a0 Replace `<\/span>'renders\u00b7learn\u00b7react\u00b7link'<\/span>` <\/span>with<\/span> `<\/span>\"renders\u00b7learn\u00b7react\u00b7link\"<\/span>`\u00a0 prettier\/prettier<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/index.jsx<\/span>\n \u00a0 <\/span>1<\/span>:<\/span>19<\/span>\u00a0 error\u00a0 Replace `<\/span>'react'<\/span>` <\/span>with<\/span> `<\/span>\"react\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n \u00a0 <\/span>2<\/span>:<\/span>22<\/span>\u00a0 error\u00a0 Replace `<\/span>'react-dom'<\/span>` <\/span>with<\/span> `<\/span>\"react-dom\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n \u00a0 <\/span>3<\/span>:<\/span>8<\/span> \u00a0 error\u00a0 Replace `<\/span>'.\/index.css'<\/span>` <\/span>with<\/span> `<\/span>\".\/index.css\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n \u00a0 <\/span>4<\/span>:<\/span>17<\/span>\u00a0 error\u00a0 Replace `<\/span>'.\/App'<\/span>` <\/span>with<\/span> `<\/span>\".\/App\"<\/span>`\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n \u00a0 <\/span>5<\/span>:<\/span>29<\/span>\u00a0 error\u00a0 Replace `<\/span>'.\/reportWebVitals'<\/span>` <\/span>with<\/span> `<\/span>\".\/reportWebVitals\"<\/span>`\u00a0 prettier\/prettier<\/span>\n\u00a0 <\/span>11<\/span>:<\/span>27<\/span>\u00a0 error\u00a0 Replace `<\/span>'root'<\/span>),` <\/span>with<\/span> `<\/span>\"root\"<\/span>)` \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 prettier\/prettier<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/reportWebVitals.js<\/span>\n\u00a0 <\/span>3<\/span>:<\/span>12<\/span>\u00a0 error\u00a0 Replace `<\/span>'web-vitals'<\/span>).then(({\u23ce\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7getCLS,\u00b7getFID,\u00b7getFCP,\u00b7getLCP,\u00b7getTTFB,\u23ce\u00b7\u00b7\u00b7` <\/span>with<\/span> `<\/span>\"web-vitals\"<\/span>).then(({\u00b7getCLS,\u00b7getFID,\u00b7getFCP,\u00b7getLCP,\u00b7getTTFB`\u00a0 prettier\/prettier<\/span>\n\n\/Users\/brunodauria\/my-app\/src\/setupTests.js<\/span>\n\u00a0 <\/span>5<\/span>:<\/span>8<\/span>\u00a0 error\u00a0 Replace `<\/span>'@testing-library\/jest-dom'<\/span>` <\/span>with<\/span> `<\/span>\"@testing-library\/jest-dom\"<\/span>`\u00a0 prettier\/prettier<\/span>\n\n✖ <\/span>14<\/span> problems (<\/span>14<\/span> errors, <\/span>0<\/span> warnings)<\/span>\n\u00a0 <\/span>14<\/span> errors and <\/span>0<\/span> warnings potentially fixable <\/span>with<\/span> the `--fix` option.<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
La bonne nouvelle est que la plupart des erreurs identifi\u00e9es par Prettier peuvent \u00eatre corrig\u00e9es automatiquement. Pour corriger les erreurs remont\u00e9es, lan\u00e7ons simplement :<\/span><\/p>\n\n\n\n
\n
$ npm <\/span>run<\/span> eslint:fix<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
R\u00e9sultat : un code libre de toute erreur !<\/span><\/p>\n
Nous allons voir dans la prochaine section qu\u2019il existe un moyen de remonter ces probl\u00e8mes encore plus rapidement, directement depuis VSCode, si c\u2019est votre \u00e9diteur de choix, et sinon, il est peut-\u00eatre temps d\u2019y passer:)<\/span><\/p>\n
Configurer ESLint dans VSCode<\/span><\/h2>\n
Un des bons points \u00e0 propos de <\/span>VSCode<\/span><\/a>\u00a0: le nombre important d\u2019extensions disponibles! ESLint est l\u2019une d\u2019entre elles et va permettre de r\u00e9duire le temps de r\u00e9ponse au niveau de processus de linting. Pour l\u2019installer, s\u00e9lectionnez le menu d’extensions, recherchez ESLint, et installez-la :\u00a0<\/span><\/p>\n
\"\"<\/p>\n
Il faut ensuite autoriser la v\u00e9rification de fichiers en cliquant sur le bouton correspondant dans la barre des t\u00e2ches \u00e0 droite. Une fois cette action r\u00e9alis\u00e9e, vous obtenez un indicateur pr\u00e9cisant que la v\u00e9rification est fonctionnelle :\u00a0<\/span><\/p>\n
\"\"<\/p>\n
Ensuite, afin d\u2019indiquer quels types de sources vous souhaitez faire valider par ESLint lors de l\u2019\u00e9criture du code, allez dans le fichier de configuration de VSCode nomm\u00e9 settings.json (File > Preferences > Settings) :<\/span><\/p>\n\n\n\n
\n
...<\/span>\n\u00a0 \u00a0 <\/span>\"eslint.validate\"<\/span>: [<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>\"javascript\"<\/span>,<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>\"javascriptreact\"<\/span>\n\u00a0 \u00a0 ]<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Pour corriger automatiquement les probl\u00e8mes r\u00e9sultant au moment de la sauvegarde d\u2019un fichier, ajoutez le param\u00e8tre suivant :<\/span><\/p>\n\n\n\n
\n
...<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/span>\"editor.codeActionsOnSave\"<\/span>: {<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \"source.fixAll.eslint\": <\/span>true<\/span>\n\u00a0 \u00a0 }<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Maintenant, en plus d\u2019obtenir les erreurs de linting (ce qui inclut celles au niveau du formatage remont\u00e9es par Prettier), la sauvegarde va \u00e9galement corriger automatiquement les erreurs qui peuvent l\u2019\u00eatre :<\/span><\/p>\n
\"\"<\/p>\n
Et nous sommes maintenant pr\u00eats \u00e0 commettre notre code !<\/span><\/p>\n
Si vous avez des questions ou suggestions par rapport \u00e0 cet article, r\u00e9agissez sur The Watch<\/a>.<\/p>\n
\n
Bruno D’Auria, Team Leader – Modern UX\/UI<\/strong><\/p>\n
Dipl\u00f4m\u00e9 d\u2019un master en Informatique, R\u00e9seaux et T\u00e9l\u00e9communications \u00e0 l\u2019IMT Atlantique (Ex T\u00e9l\u00e9com Bretagne), Bruno a travaill\u00e9 en tant que d\u00e9veloppeur logiciel dans diverses industries : t\u00e9l\u00e9communications, sport, \u00e9nergie, immobilier et domotique. Il a ensuite choisi de se sp\u00e9cialiser dans le d\u00e9veloppement d\u2019interfaces web et mobile. Bruno a rejoint Centreon il y a 3 ans et il est aujourd\u2019hui responsable de l’\u00e9quipe \u201cModern UI\/UX\u201d. Sa mission est de concevoir et d\u2019impl\u00e9menter les interfaces de demain dans le but de rendre l\u2019exp\u00e9rience utilisateur encore plus ergonomique et agr\u00e9able.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Cet article est \u00e0 destination de notre communaut\u00e9 et a \u00e9t\u00e9 r\u00e9alis\u00e9 \u00e0 partir des travaux et m\u00e9thodes de travail utilis\u00e9s au sein de notre \u00e9quipe de d\u00e9veloppement et qui ont fait leurs preuves.\u00a0 …<\/p>\n","protected":false},"author":1,"featured_media":6001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"post-type":[108],"theme":[],"class_list":["post-20605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","post-type-communaute"],"acf":[],"yoast_head":"\nPartage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier - Centreon<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier - Centreon\" \/>\n<meta property=\"og:description\" content=\"Introduction Cet article est \u00e0 destination de notre communaut\u00e9 et a \u00e9t\u00e9 r\u00e9alis\u00e9 \u00e0 partir des travaux et m\u00e9thodes de travail utilis\u00e9s au sein de notre \u00e9quipe de d\u00e9veloppement et qui ont fait leurs preuves.\u00a0 ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\" \/>\n<meta property=\"og:site_name\" content=\"Centreon\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CentreonMonitoring\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-09T14:00:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-09T14:55:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.centreon.com\/wp-content\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CentreonFR\" \/>\n<meta name=\"twitter:site\" content=\"@CentreonFR\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\"},\"author\":{\"name\":\"Thomas\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419\"},\"headline\":\"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier\",\"datePublished\":\"2021-12-09T14:00:12+00:00\",\"dateModified\":\"2021-12-09T14:55:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\"},\"wordCount\":1574,\"publisher\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\",\"url\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\",\"name\":\"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier - Centreon\",\"isPartOf\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg\",\"datePublished\":\"2021-12-09T14:00:12+00:00\",\"dateModified\":\"2021-12-09T14:55:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage\",\"url\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg\",\"contentUrl\":\"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg\",\"width\":1600,\"height\":836},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.centreon.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#website\",\"url\":\"https:\/\/www.centreon.com\/fr\/\",\"name\":\"Centreon\",\"description\":\"Just another WordPress site\",\"publisher\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.centreon.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#organization\",\"name\":\"Centreon\",\"url\":\"https:\/\/www.centreon.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png\",\"contentUrl\":\"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png\",\"width\":180,\"height\":42,\"caption\":\"Centreon\"},\"image\":{\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/CentreonMonitoring\/\",\"https:\/\/x.com\/CentreonFR\",\"https:\/\/www.linkedin.com\/company\/centreonsoftware\/\",\"https:\/\/www.youtube.com\/channel\/UCIKJKvZ8acLmEg2fCdDzsvA\",\"https:\/\/fr.wikipedia.org\/wiki\/Centreon\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419\",\"name\":\"Thomas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g\",\"caption\":\"Thomas\"},\"sameAs\":[\"http:\/\/centreon.stagewink.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier - Centreon","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/","og_locale":"fr_FR","og_type":"article","og_title":"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier - Centreon","og_description":"Introduction Cet article est \u00e0 destination de notre communaut\u00e9 et a \u00e9t\u00e9 r\u00e9alis\u00e9 \u00e0 partir des travaux et m\u00e9thodes de travail utilis\u00e9s au sein de notre \u00e9quipe de d\u00e9veloppement et qui ont fait leurs preuves.\u00a0 ...","og_url":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/","og_site_name":"Centreon","article_publisher":"https:\/\/www.facebook.com\/CentreonMonitoring\/","article_published_time":"2021-12-09T14:00:12+00:00","article_modified_time":"2021-12-09T14:55:17+00:00","og_image":[{"width":1600,"height":836,"url":"https:\/\/www.centreon.com\/wp-content\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg","type":"image\/jpeg"}],"author":"Thomas","twitter_card":"summary_large_image","twitter_creator":"@CentreonFR","twitter_site":"@CentreonFR","twitter_misc":{"\u00c9crit par":"Thomas","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#article","isPartOf":{"@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/"},"author":{"name":"Thomas","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419"},"headline":"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier","datePublished":"2021-12-09T14:00:12+00:00","dateModified":"2021-12-09T14:55:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/"},"wordCount":1574,"publisher":{"@id":"https:\/\/www.centreon.com\/fr\/#organization"},"image":{"@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage"},"thumbnailUrl":"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/","url":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/","name":"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier - Centreon","isPartOf":{"@id":"https:\/\/www.centreon.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage"},"image":{"@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage"},"thumbnailUrl":"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg","datePublished":"2021-12-09T14:00:12+00:00","dateModified":"2021-12-09T14:55:17+00:00","breadcrumb":{"@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#primaryimage","url":"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg","contentUrl":"https:\/\/www.centreon.com\/uploads\/2022\/10\/linkedin1200x627_community_Bruno-FR-1.jpg","width":1600,"height":836},{"@type":"BreadcrumbList","@id":"https:\/\/www.centreon.com\/fr\/partage-dexperience-un-tuto-inspire-des-methodes-de-travail-centreon-pour-ameliorer-le-travail-dequipe-sur-react-avec-eslint-et-prettier\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.centreon.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Partage d\u2019exp\u00e9rience : un tuto inspir\u00e9 des m\u00e9thodes de travail Centreon pour am\u00e9liorer le travail d\u2019\u00e9quipe sur React avec ESLint et Prettier"}]},{"@type":"WebSite","@id":"https:\/\/www.centreon.com\/fr\/#website","url":"https:\/\/www.centreon.com\/fr\/","name":"Centreon","description":"Just another WordPress site","publisher":{"@id":"https:\/\/www.centreon.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.centreon.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.centreon.com\/fr\/#organization","name":"Centreon","url":"https:\/\/www.centreon.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png","contentUrl":"https:\/\/www.centreon.com\/wp-content\/uploads\/2023\/07\/Logo_Centreon_Email_Signature_light_02.png","width":180,"height":42,"caption":"Centreon"},"image":{"@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CentreonMonitoring\/","https:\/\/x.com\/CentreonFR","https:\/\/www.linkedin.com\/company\/centreonsoftware\/","https:\/\/www.youtube.com\/channel\/UCIKJKvZ8acLmEg2fCdDzsvA","https:\/\/fr.wikipedia.org\/wiki\/Centreon"]},{"@type":"Person","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/c5bd0f4e75adbd1ee75f5d1f8a7ff419","name":"Thomas","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.centreon.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1d4c181e1a496d3d6d25441adb6830a23883e0f93ed97a30e4616fea3c950268?s=96&d=mm&r=g","caption":"Thomas"},"sameAs":["http:\/\/centreon.stagewink.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/posts\/20605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/comments?post=20605"}],"version-history":[{"count":0,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/posts\/20605\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/media\/6001"}],"wp:attachment":[{"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/media?parent=20605"}],"wp:term":[{"taxonomy":"post-type","embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/post-type?post=20605"},{"taxonomy":"theme","embeddable":true,"href":"https:\/\/www.centreon.com\/fr\/wp-json\/wp\/v2\/theme?post=20605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}