{"id":3524,"date":"2019-04-14T08:51:00","date_gmt":"2019-04-14T08:51:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"modified":"2026-04-24T11:32:09","modified_gmt":"2026-04-24T11:32:09","slug":"qualite-premiere-5-etapes-faciles-pour-linteriser-votre-code-avec-les-workflows-github-dans-un-projet-javascript","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fr\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"La qualit\u00e9 avant tout ! 5 \u00e9tapes faciles pour lester votre code avec les workflows GitHub dans le projet JavaScript"},"content":{"rendered":"<p>Que devons-nous faire lorsque le <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/why-do-projects-fail\/\">projet<\/a> est faible ou que le client ne sait pas encore s'il vaut la peine d'investir davantage ? Il est \u00e9vident qu'au <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">Phase MVP du projet<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/what-is-code-refactoring\/\">code<\/a> Les tests de style ou les tests unitaires ne sont pas la priorit\u00e9 absolue. Les investisseurs souhaitent g\u00e9n\u00e9ralement disposer d'un bon <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/how-to-make-product\/\">produit<\/a> Et puis, si \u00e7a marche, \u00e7a n'a pas besoin d'\u00eatre test\u00e9, n'est-ce pas ?<\/p>\n\n\n\n<p>En fait, j'ai une certaine exp\u00e9rience en mati\u00e8re de <strong><a href=\"https:\/\/thecodest.co\/contact\">cr\u00e9er des applications \u00e0 partir de z\u00e9ro<\/a><\/strong>M\u00eame sans utiliser les meilleures pratiques en premier lieu. Certaines circonstances commerciales m'ont oblig\u00e9 \u00e0 chercher un compromis entre les plans budg\u00e9taires d'un investisseur et la liste des \"choses \u00e0 faire\" d'un d\u00e9veloppeur. Heureusement, si vous utilisez GitHub, la plupart des probl\u00e8mes courants li\u00e9s \u00e0 la qualit\u00e9 du code peuvent \u00eatre r\u00e9solus en quelques minutes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dans cet article, je vais vous montrer comment utiliser les workflows GitHub dans l'environnement Node.js pour standardiser votre base de code.<\/strong><\/h2>\n\n\n\n<p>Quelques hypoth\u00e8ses avant de commencer :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vous \u00eates familier avec NPM et la console Linux.<\/li>\n\n\n\n<li>Vous avez une certaine exp\u00e9rience des pr\u00e9processeurs de style, des chargeurs de modules, des bundlers, etc.<\/li>\n\n\n\n<li>Vous savez \u00e0 quoi servent les linters et vous voulez vraiment les utiliser dans vos projets.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Structure typique d'un projet JavaScript<\/strong><\/h2>\n\n\n\n<p>Si vous avez d\u00e9j\u00e0 utilis\u00e9 des <a href=\"https:\/\/thecodest.co\/fr\/blog\/javascript-tools-in-action\/\">JS<\/a> des cadres tels que <a href=\"https:\/\/thecodest.co\/fr\/blog\/hire-vue-js-developers\/\">Vue<\/a> ou <a href=\"https:\/\/thecodest.co\/fr\/blog\/conditional-component-visibility-in-react\/\">React<\/a>Il est facile de trouver des points communs entre eux, par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/src<\/em> avec toute la logique et les composants JS,<\/li>\n\n\n\n<li><em>\/test<\/em> pour les tests unitaires et les tests e2e,<\/li>\n\n\n\n<li><em>\/actifs<\/em> pour les styles, les images, etc.<\/li>\n<\/ul>\n\n\n\n<p>M\u00eame s'il s'agit de <a href=\"https:\/\/thecodest.co\/fr\/blog\/hire-javascript-developer\/\">JavaScript<\/a> projet, nous travaillons en <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/what-is-node-js-used-for\/\">N\u0153ud<\/a> Il est donc \u00e9vident qu'il doit y avoir aussi des \u00e9l\u00e9ments Node comme <em>package.json<\/em>, <em>package-lock.json<\/em> et <em>\/node_modules<\/em> dans notre r\u00e9pertoire racine.<\/p>\n\n\n\n<p>Toutes ces choses sont \u00e0 leur place - c'est ce que nous appelons la <strong>convention<\/strong>. Les frameworks sont invent\u00e9s pour fournir des conventions raisonnables, de sorte qu'habituellement, nous n'avons m\u00eame pas besoin de nous soucier du mod\u00e8le de conception initial. Comme dans cet exemple, je veux expliquer quelques approches, je n'appliquerai pas de solutions pr\u00eates \u00e0 l'emploi comme Vue CLI.<\/p>\n\n\n\n<p><strong>Il est temps de comprendre ce qui se cache sous tous ces scripts de charpie magiques !<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Extension du projet Node typique<\/strong><\/h2>\n\n\n\n<p>Pour fournir des solutions de haute qualit\u00e9, les linters sont la premi\u00e8re chose avec laquelle nous devrions commencer lors de la cr\u00e9ation d'un nouveau projet. Nous allons nous concentrer sur deux linters - Stylelint pour les styles (<em>*.scss<\/em>) et ESLint pour les fichiers sources (<em>*.js<\/em>). Ces deux linters sont disponibles sur NPM et assez faciles \u00e0 configurer. L'utilisation des linters n\u00e9cessite de passer par le processus d'installation, d'ajouter des fichiers de configuration et de d\u00e9finir des scripts de projet. Nous allons le faire \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Ajout de Stylelint<\/strong><\/h2>\n\n\n\n<p>L'installation de Stylelint dans l'environnement Node est tr\u00e8s simple. D'apr\u00e8s <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">documents officiels<\/a>Il suffit de courir :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install --save-dev stylelint stylelint-config-standard<\/code><\/pre>\n\n\n\n<p>et attendez qu'il soit termin\u00e9.<\/p>\n\n\n\n<p><em>stylelint-config-standard<\/em> fournit un ensemble de r\u00e8gles d'analyse par d\u00e9faut et peut \u00eatre remplac\u00e9 par n'importe quel paquetage qui r\u00e9pond mieux \u00e0 vos besoins (par ex. <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Le style Airbnb<\/a>). Cr\u00e9ez ensuite un nouveau fichier cach\u00e9 <em>.stylelintrc.json<\/em>qui est le fichier de configuration de Stylelint, responsable du chargement de nos r\u00e8gles pr\u00e9d\u00e9finies :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">{\n    \"extends\" : \"stylelint-config-standard\"\n}<\/code><\/pre>\n\n\n\n<p>Pour l'instant, la seule chose qui manque est un script NPM (ou des scripts) d\u00e9clar\u00e9 dans le fichier package.json pour commencer \u00e0 lier nos fichiers SCSS. Voici ma proposition :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\" : {\n    \"lint:scss\" : \"stylelint '**\/*.scss' --syntax scss -f verbose --color\",\n    \"lint:scss:fix\" : \"stylelint '**\/*.scss' --syntaxe scss --fix -f verbose -color\"\n}<\/code><\/pre>\n\n\n\n<p>Comme vous pouvez le voir, j'ai d\u00e9clar\u00e9 le script contenant <strong>-fixe<\/strong> Cette option doit \u00eatre utilis\u00e9e avant de transf\u00e9rer les modifications dans le r\u00e9f\u00e9rentiel.<\/p>\n\n\n\n<p><strong>N'oubliez pas que c'est une mauvaise pratique que d'utiliser <em>-fixe<\/em> dans votre flux de CI, car alors le code que vous transmettez \u00e0 la production n'est pas styl\u00e9 correctement dans le r\u00e9f\u00e9rentiel.<\/strong> C'est pourquoi nous avons besoin des deux scripts.<\/p>\n\n\n\n<p>Testons notre linter en cr\u00e9ant un fichier <em>\/assets\/scss\/styles.scss<\/em> avec un certain contenu, comme :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body {\n                    couleur de fond : #fff ;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run lint:scss<\/code><\/pre>\n\n\n\n<p>Vous devriez voir dans votre console quelque chose comme ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; stylelint '**\/*.scss' --syntaxe scss -f verbose --color\n\nassets\/scss\/styles.scss\n\n2:21 \u2716 Indentation attendue de 2 espaces indentation\n\n1 source v\u00e9rifi\u00e9e\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n1 probl\u00e8me trouv\u00e9\n\nniveau de gravit\u00e9 \"error\" : 1\n\nindentation : 1\n\nnpm ERR ! code ELIFECYCLE\n\nnpm ERR ! errno 2\n\nnpm ERR ! github-workflow-demo@1.0.0 lint:scss : `stylelint '**\/*.scss' --syntax scss -f verbose --color`\n\nnpm ERR ! Exit status 2<\/code><\/pre>\n\n\n\n<p>Cela signifie en fait que notre linter fonctionne !<\/p>\n\n\n\n<p>La sortie indique exactement la ligne qui provoque une erreur et d\u00e9crit le probl\u00e8me \u00e0 r\u00e9soudre. Certains probl\u00e8mes ne peuvent pas \u00eatre r\u00e9solus automatiquement car ils n\u00e9cessitent la d\u00e9cision d'un d\u00e9veloppeur, mais dans la majorit\u00e9 des cas, il suffit d'ex\u00e9cuter la m\u00eame commande avec l'option <strong>-fixe<\/strong> et nous allons donc l'ex\u00e9cuter.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run lint:scss:fix<\/code><\/pre>\n\n\n\n<p>Vous devriez maintenant voir une sortie verte sans erreur trouv\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">stylelint '**\/*.scss' --syntaxe scss --fix -f verbose --color\n\n\n1 source v\u00e9rifi\u00e9e\n\n\/Users\/wojciechbak\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n0 probl\u00e8mes trouv\u00e9s<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Ajout d'ESLint<\/strong><\/h2>\n\n\n\n<p>Cette \u00e9tape est presque la m\u00eame que la pr\u00e9c\u00e9dente. Nous allons installer ESLint, d\u00e9finir quelques r\u00e8gles par d\u00e9faut et d\u00e9clarer deux scripts NPM appelables - un pour le CI, un pour le pre-push. C'est parti !<\/p>\n\n\n\n<p>Si vous utilisez NPM dans votre travail quotidien, peut-\u00eatre aimeriez-vous installer ESLint globalement. Si ce n'est pas le cas, veuillez consulter les instructions d'installation dans <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">documents officiels<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install -g eslint<\/code><\/pre>\n\n\n\n<p>Lorsque la commande eslint est disponible sur votre machine, ex\u00e9cutez-la dans votre projet :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">eslint --init<\/code><\/pre>\n\n\n\n<p>En suivant les instructions affich\u00e9es dans votre terminal, il suffit de prendre quelques d\u00e9cisions concernant le projet, comme par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript ou <a href=\"https:\/\/thecodest.co\/fr\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>\u00c0 la mani\u00e8re d'Airbnb ou de Google<\/li>\n\n\n\n<li>type de configuration (fichier JSON, fichier JS ou en ligne dans <em>package.json<\/em>)<\/li>\n\n\n\n<li>Modules ES (<em>importation\/exportation<\/em>) ou <em>exiger<\/em> syntaxe<\/li>\n<\/ul>\n\n\n\n<p>Il convient ici de parler du formateur de code Prettier. Il est enti\u00e8rement standardis\u00e9 et compatible avec la plupart des \u00e9diteurs de code (par exemple VS Code). Prettier fournit de nombreux ensembles de r\u00e8gles de style de code pr\u00e9d\u00e9finies, travaille avec les linters et peut \u00eatre d'un grand soutien dans la recherche de la meilleure qualit\u00e9 de code. Pour comprendre ce qu'est exactement Prettier, visitez le site suivant <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">comparaison<\/a> \u00e0 partir des documents officiels.<\/p>\n\n\n\n<p>Si c'est le cas, le fichier de configuration d'ESlint (par ex. <em>.eslintrc.json<\/em>en fonction de ce que vous avez choisi auparavant) devrait appara\u00eetre dans votre r\u00e9pertoire racine, quelque part \u00e0 c\u00f4t\u00e9 de <em>.stylelintrc.json<\/em> cr\u00e9\u00e9 auparavant.<\/p>\n\n\n\n<p>Nous devons maintenant d\u00e9finir des scripts dans <em>package.json<\/em> comme pour les fichiers SCSS :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\" : {\n    \"lint:js\" : \"eslint '**\/*.js' --ignore-pattern node_modules\/\",\n    \"lint:js:fix\" : \"eslint '**\/*.js' --ignore-pattern node_modules\/ --fix\"\n}<\/code><\/pre>\n\n\n\n<p>F\u00e9licitations ! ESLint est pr\u00eat \u00e0 \u00eatre utilis\u00e9. V\u00e9rifions s'il fonctionne correctement. Cr\u00e9er <em>\/src\/index.js<\/em> avec un certain contenu :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(\"quelque chose\") ;<\/code><\/pre>\n\n\n\n<p>Liner de course :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run lint:js<\/code><\/pre>\n\n\n\n<p><code><br><\/code>Le r\u00e9sultat devrait ressembler \u00e0 ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; eslint '**\/*.js' --ignore-pattern node_modules\/\n\n~\/Codest\/Projets\/github-workflow-demo\/src\/index.js\n\n1:1 avertissement D\u00e9claration de console inattendue no-console\n\n\u2716 1 probl\u00e8me (0 erreur, 1 avertissement)<\/code><\/pre>\n\n\n\n<p>Cet avertissement ne dispara\u00eet pas apr\u00e8s l'utilisation de <em>-fixe<\/em> car l'option <strong>Les linters n'affectent pas le code potentiellement significatif. Ils ne servent qu'\u00e0 styliser le code<\/strong>y compris les espaces blancs, les nouvelles lignes, les points-virgules, les guillemets, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. D\u00e9finir les flux de travail GitHub<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">Flux de travail GitHub<\/a> sont assez bien document\u00e9s. N'h\u00e9sitez pas \u00e0 approfondir la question, mais pour l'instant, je vais mettre en place un flux de travail simple pour lester notre code apr\u00e8s l'avoir pouss\u00e9 vers le d\u00e9p\u00f4t distant (\u00e9videmment, h\u00e9berg\u00e9 sur GitHub).<\/p>\n\n\n\n<p>Cr\u00e9er <em>\/.github\/workflows<\/em> et de nouveaux <em>code-quality-workflow.yml<\/em> car les flux de travail GitHub doivent \u00eatre d\u00e9finis avec des fichiers YAML.<\/p>\n\n\n\n<p>Pour mettre en place un flux de travail ad\u00e9quat, nous devons r\u00e9pondre \u00e0 quelques questions :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quand voulons-nous ex\u00e9cuter notre flux de travail (sur push, sur pull request, sur merge etc.) ?<\/li>\n\n\n\n<li>Voulons-nous exclure certaines situations (comme la pouss\u00e9e vers la branche master) ?<\/li>\n\n\n\n<li>Quel environnement devons-nous configurer pour ex\u00e9cuter correctement nos commandes (dans cet exemple - Node) ?<\/li>\n\n\n\n<li>Devons-nous installer des d\u00e9pendances ? Si oui, comment devons-nous les mettre en cache ?<\/li>\n\n\n\n<li>Quelles sont les \u00e9tapes \u00e0 suivre pour compl\u00e9ter le contr\u00f4le ?<\/li>\n<\/ul>\n\n\n\n<p>Apr\u00e8s quelques consid\u00e9rations et quelques heures de travail avec l'exemple de la documentation <em>.yml<\/em> peut se pr\u00e9senter comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">nom : Qualit\u00e9 du code\n\non : 'push'\n\njobs :\n  code-quality :\n    name : Lint source code\n    s'ex\u00e9cute sur : ubuntu-latest\n    steps :\n    - uses : actions\/checkout@v1\n\n    - nom : Setup Node\n      utilise : actions\/setup-node@v1\n      avec :\n        node-version : '12.1'\n\n    - name : D\u00e9pendances du cache\n      utilisations : actions\/cache@v1\n      avec :\n        chemin : .\/node_modules\n        key : $(( runner.OS ))-dependencies-$(( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        restore-keys : |\n          $(( runner.OS ))-dependencies-$(( env.cache-name ))-\n          $(( runner.OS ))-d\u00e9pendances-\n          $(( runner.OS ))-d\u00e9pendances-\n\n    - name : Installer les d\u00e9pendances\n      ex\u00e9cuter : |\n        npm install\n\n    - name : Lint files\n      run : |\n        npm run lint<\/code><\/pre>\n\n\n\n<p>GitHub fournit tous les \u00e9l\u00e9ments environnementaux dont nous avons besoin. Dans la derni\u00e8re ligne, nous lan\u00e7ons la commande <strong><em>npm run lint<\/em><\/strong> qui n'\u00e9tait pas d\u00e9fini auparavant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\" : {\n    \"lint\" : \"npm run lint:js &amp;&amp; npm run lint:scss\"\n}<\/code><\/pre>\n\n\n\n<p>Notez que dans notre flux de travail, je n'utilise pas de <strong>:fix<\/strong> commandes.<\/p>\n\n\n\n<p>Lorsque toutes ces \u00e9tapes sont termin\u00e9es, vous pouvez profiter de cette belle sortie de GitHub avant de fusionner votre Pull Request : <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/ec82df2be0b1977d857d5f5c1d2d893010fc44a4\/68747470733a2f2f692e696d6775722e636f6d2f425848465370372e706e67\" alt=\"\"> <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/00e93d296b7bf5b089c7b785ecc1cbd18de54ead\/68747470733a2f2f696d6775722e636f6d2f6f63736e6762362e706e67\" alt=\"\"><\/p>","protected":false},"excerpt":{"rendered":"<p>La qualit\u00e9 du code est un \u00e9l\u00e9ment crucial du processus de d\u00e9veloppement, en particulier lorsque l'on souhaite travailler efficacement \u00e0 long terme. Il existe de nombreuses approches et bonnes pratiques, y compris toutes les m\u00e9thodologies agiles, mais la plupart d'entre elles se rapportent \u00e0 un grand projet d'entreprise men\u00e9 par au moins six personnes.<\/p>","protected":false},"author":2,"featured_media":3525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project - The Codest<\/title>\n<meta name=\"description\" content=\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/fr\/blog\/qualite-premiere-5-etapes-faciles-pour-linteriser-votre-code-avec-les-workflows-github-dans-un-projet-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\" \/>\n<meta property=\"og:description\" content=\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/fr\/blog\/qualite-premiere-5-etapes-faciles-pour-linteriser-votre-code-avec-les-workflows-github-dans-un-projet-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-14T08:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:32:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\",\"datePublished\":\"2019-04-14T08:51:00+00:00\",\"dateModified\":\"2026-04-24T11:32:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"},\"wordCount\":1187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\",\"name\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"datePublished\":\"2019-04-14T08:51:00+00:00\",\"dateModified\":\"2026-04-24T11:32:09+00:00\",\"description\":\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/fr\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"La qualit\u00e9 avant tout ! 5 \u00e9tapes faciles pour lester votre code avec les flux de travail GitHub dans le projet JavaScript - The Codest","description":"La qualit\u00e9 du code est un \u00e9l\u00e9ment crucial du processus de d\u00e9veloppement, en particulier lorsque l'on souhaite travailler efficacement \u00e0 long terme. Il existe de nombreuses approches et bonnes pratiques, y compris toutes les m\u00e9thodologies agiles, mais la plupart d'entre elles se rapportent \u00e0 un grand projet d'entreprise men\u00e9 par au moins six personnes.","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:\/\/thecodest.co\/fr\/blog\/qualite-premiere-5-etapes-faciles-pour-linteriser-votre-code-avec-les-workflows-github-dans-un-projet-javascript\/","og_locale":"fr_FR","og_type":"article","og_title":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project","og_description":"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.","og_url":"https:\/\/thecodest.co\/fr\/blog\/qualite-premiere-5-etapes-faciles-pour-linteriser-votre-code-avec-les-workflows-github-dans-un-projet-javascript\/","og_site_name":"The Codest","article_published_time":"2019-04-14T08:51:00+00:00","article_modified_time":"2026-04-24T11:32:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","type":"image\/jpeg"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"wordCount":1187,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","articleSection":["Software Development"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","url":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","name":"La qualit\u00e9 avant tout ! 5 \u00e9tapes faciles pour lester votre code avec les flux de travail GitHub dans le projet JavaScript - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","description":"La qualit\u00e9 du code est un \u00e9l\u00e9ment crucial du processus de d\u00e9veloppement, en particulier lorsque l'on souhaite travailler efficacement \u00e0 long terme. Il existe de nombreuses approches et bonnes pratiques, y compris toutes les m\u00e9thodologies agiles, mais la plupart d'entre elles se rapportent \u00e0 un grand projet d'entreprise men\u00e9 par au moins six personnes.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/fr\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}