{"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":"kwaliteit-eerste-5-eenvoudige-stappen-om-je-code-te-linten-met-github-workflows-in-javascript-project","status":"publish","type":"post","link":"https:\/\/thecodest.co\/nl\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"Kwaliteit eerst! 5 eenvoudige stappen om je code te linten met GitHub workflows in JavaScript project"},"content":{"rendered":"<p>Wat moeten we doen als de <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/why-do-projects-fail\/\">project<\/a> klein is of de klant nog steeds niet weet of het de moeite waard is om meer te investeren? Het is duidelijk dat <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">MVP-fase van het project<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/what-is-code-refactoring\/\">code<\/a> styling of unit tests zijn niet de hoogste prioriteit. Investeerders willen meestal een goede <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/how-to-make-product\/\">product<\/a> en kom op - als het werkt, hoeft het niet getest te worden, toch?<\/p>\n\n\n\n<p>Eigenlijk heb ik enige ervaring in <strong><a href=\"https:\/\/thecodest.co\/contact\">apps vanaf nul bouwen<\/a><\/strong>Zelfs zonder best practices te gebruiken. Sommige zakelijke omstandigheden dwongen me te zoeken naar het compromis tussen de budgetplannen van een investeerder en de \"nice-to-have\" lijst van de ontwikkelaar. Gelukkig kunnen, als je GitHub gebruikt, de meeste veelvoorkomende problemen met betrekking tot de kwaliteit van code in een paar minuten opgelost worden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>In dit artikel laat ik je zien hoe je GitHub workflows kunt gebruiken in de Node.js omgeving om je codebase te standaardiseren.<\/strong><\/h2>\n\n\n\n<p>Een paar aannames voordat we beginnen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Je bent bekend met NPM en Linux console.<\/li>\n\n\n\n<li>Je hebt enige ervaring met style preprocessors, module loaders, bundlers, enz.<\/li>\n\n\n\n<li>Je weet waar linters voor zijn en je wilt ze echt gebruiken in je projecten.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Typische JavaScript projectstructuur<\/strong><\/h2>\n\n\n\n<p>Als je ooit wat <a href=\"https:\/\/thecodest.co\/nl\/blog\/javascript-tools-in-action\/\">JS<\/a> frameworks zoals <a href=\"https:\/\/thecodest.co\/nl\/blog\/hire-vue-js-developers\/\">Vue<\/a> of <a href=\"https:\/\/thecodest.co\/nl\/blog\/conditional-component-visibility-in-react\/\">React<\/a>Je kunt gemakkelijk zien dat ze een aantal dingen gemeen hebben, bijv:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/bron<\/em> map met al je JS-logica en componenten,<\/li>\n\n\n\n<li><em>\/test<\/em> map voor unit- en e2e-tests,<\/li>\n\n\n\n<li><em>\/activa<\/em> map voor stijlen, afbeeldingen, enz.<\/li>\n<\/ul>\n\n\n\n<p>Zelfs als we het hebben over <a href=\"https:\/\/thecodest.co\/nl\/blog\/hire-javascript-developer\/\">JavaScript<\/a> project werken we in <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/what-is-node-js-used-for\/\">Knooppunt<\/a> omgeving, dus er moet natuurlijk ook wat Node spul zijn zoals <em>pakket.json<\/em>, <em>pakket-slot.json<\/em> en <em>\/node_modules<\/em> catalogus in onze hoofdmap.<\/p>\n\n\n\n<p>Al deze dingen zijn op hun plaats - dat noemen we de <strong>conventie<\/strong>. Frameworks zijn uitgevonden om een aantal redelijke conventies te bieden, dus meestal hoeven we ons niet eens druk te maken over het initi\u00eble ontwerppatroon. In dit voorbeeld wil ik enkele benaderingen uitleggen, ik zal geen kant-en-klare oplossingen toepassen zoals Vue CLI.<\/p>\n\n\n\n<p><strong>Tijd om te begrijpen wat er onder al deze magische scripts schuilgaat!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Het typische Node-project uitbreiden<\/strong><\/h2>\n\n\n\n<p>Om oplossingen van hoge kwaliteit te bieden, zijn linters het eerste waar we mee moeten beginnen tijdens het opzetten van een nieuw project. Laten we ons richten op twee linters - Stylelint voor stijlen (<em>*.scss<\/em>) en ESLint voor bronbestanden (<em>*.js<\/em>). Beide linters zijn beschikbaar op NPM en vrij eenvoudig te configureren. Het gebruik van linters vereist het doorlopen van het installatieproces, het toevoegen van configuratiebestanden en het defini\u00ebren van projectscripts. Laten we het stap voor stap doen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Stylelint toevoegen<\/strong><\/h2>\n\n\n\n<p>De installatie van Stylelint in de Node-omgeving is heel eenvoudig. Volgens <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">offici\u00eble documenten<\/a>Je hoeft alleen maar te rennen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install --save-dev stylelint stylelint-config-standaard<\/code><\/pre>\n\n\n\n<p>en wacht tot het klaar is.<\/p>\n\n\n\n<p><em>stylelint-config-standaard<\/em> biedt een standaardset van lintingregels en kan worden vervangen door een pakket dat beter past bij je behoeften (bijv. <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Airbnb stijl<\/a>). Maak vervolgens een nieuw verborgen bestand <em>.stylelintrc.json<\/em>Dit is het Stylelint configuratiebestand, dat verantwoordelijk is voor het laden van onze vooraf gedefinieerde regels:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">{\n    \"extends\": \"stylelint-config-standaard\".\n}<\/code><\/pre>\n\n\n\n<p>Op dit moment ontbreekt er alleen nog een NPM-script (of scripts) in package.json om onze SCSS-bestanden te linten. Dit is mijn voorstel:<\/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' --syntax scss --fix -f verbose -color\"\n}<\/code><\/pre>\n\n\n\n<p>Zoals je kunt zien, heb ik het script gedeclareerd met daarin <strong>-fix<\/strong> optie - deze moet je gebruiken voordat je wijzigingen naar het archief pushed.<\/p>\n\n\n\n<p><strong>Onthoud - het is een slechte gewoonte om <em>-fix<\/em> in je CI flow, want dan wordt de code die je doorgeeft aan productie niet correct opgemaakt in de repository.<\/strong> Daarom hebben we beide scripts nodig.<\/p>\n\n\n\n<p>Laten we onze linter testen door een bestand te maken <em>\/assets\/scss\/styles.scss<\/em> met wat inhoud, zoals:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">lichaam {\n                    achtergrondkleur: #fff;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm uitvoeren lint:scss<\/code><\/pre>\n\n\n\n<p>Je zou in je console iets als dit moeten zien:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; stylelint '**\/*.scss' --syntax scss -f verbose --color\n\nactiva\/scss\/styles.scss\n\n2:21 \u2716 Verwachte inspringing van 2 spaties inspringing\n\n1 bron gecontroleerd\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n1 probleem gevonden\n\nernstgraad \"fout\": 1\n\ninspringen: 1\n\nnpm fout! 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! Afsluitstatus 2<\/code><\/pre>\n\n\n\n<p>Dit betekent eigenlijk dat onze linter werkt!<\/p>\n\n\n\n<p>De uitvoer laat precies zien welke regel een fout veroorzaakt en beschrijft het probleem dat opgelost moet worden. Sommige problemen kunnen niet automatisch opgelost worden omdat er een beslissing van de ontwikkelaar voor nodig is, maar in de meeste gevallen hoeft alleen maar hetzelfde commando uitgevoerd te worden met <strong>-fix<\/strong> optie, dus laten we die uitvoeren.<\/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>Nu zou je groene uitvoer moeten zien zonder fouten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">stylelint '**\/*.scss' --syntax scss --fix -f verbose --color\n\n\n1 bron gecontroleerd\n\n\/Users\/wojciechbak\/Codest\/Projecten\/github-workflow-demo\/assets\/scss\/styles.scss\n\n0 problemen gevonden<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. ESLint toevoegen<\/strong><\/h2>\n\n\n\n<p>Deze stap is bijna hetzelfde als de vorige. We gaan ESLint installeren, een aantal standaard regels defini\u00ebren en twee oproepbare NPM scripts declareren - \u00e9\u00e9n voor CI, \u00e9\u00e9n voor pre-push. Laten we hier doorheen gaan!<\/p>\n\n\n\n<p>Als je NPM gebruikt in je dagelijkse werk, wil je misschien ESLint wereldwijd installeren. Als je dat niet doet, bekijk dan de installatie-instructies in <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">offici\u00eble documenten<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm installeren -g eslint<\/code><\/pre>\n\n\n\n<p>Als het eslint commando beschikbaar is op je machine, voer dit dan gewoon uit in je project:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">eslint --initialiseren<\/code><\/pre>\n\n\n\n<p>Volg de verdere instructies in je terminal en neem een paar projectbeslissingen zoals:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript of <a href=\"https:\/\/thecodest.co\/nl\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>Airbnb-stijl of Google-stijl<\/li>\n\n\n\n<li>configuratietype (JSON-bestand, JS-bestand of inline in <em>pakket.json<\/em>)<\/li>\n\n\n\n<li>ES-modules (<em>import\/export<\/em>) of <em>nodig hebben<\/em> syntax<\/li>\n<\/ul>\n\n\n\n<p>Op deze plaats is het de moeite waard om iets te schrijven over code formatter genaamd Prettier. Het is volledig gestandaardiseerd en compatibel met de meeste code editors (bijv. VS Code). Prettier biedt vele sets van voorgedefinieerde code styling regels, werkt samen met linters en kan een geweldige ondersteuning zijn in het najagen van topkwaliteit van de code. Om te begrijpen wat Prettier precies is, bezoek deze <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">vergelijking<\/a> uit offici\u00eble documenten.<\/p>\n\n\n\n<p>Als het gedaan is, zal het ESlint configuratiebestand (bijv. <em>.eslintrc.json<\/em>afhankelijk van wat je eerder hebt gekozen) zou in je hoofddirectory moeten verschijnen, ergens naast <em>.stylelintrc.json<\/em> eerder gemaakt.<\/p>\n\n\n\n<p>Nu moeten we scripts defini\u00ebren in <em>pakket.json<\/em> bestand, hetzelfde als voor SCSS-bestanden:<\/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>Gefeliciteerd! ESLint is nu klaar voor gebruik. Laten we eens kijken of het goed werkt. Maak <em>\/src\/index.js<\/em> bestand met wat inhoud:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(\"iets\");<\/code><\/pre>\n\n\n\n<p>Linter uitvoeren:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm uitvoeren lint:js<\/code><\/pre>\n\n\n\n<p><code><br><\/code>De uitvoer zou er als volgt uit moeten zien:<\/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\/Projects\/github-workflow-demo\/src\/index.js\n\n1:1 waarschuwing Onverwachte console-instructie no-console\n\n\u2716 1 probleem (0 fouten, 1 waarschuwing)<\/code><\/pre>\n\n\n\n<p>Deze waarschuwing verdwijnt niet na het gebruik van <em>-fix<\/em> optie, omdat <strong>linters hebben geen invloed op potentieel zinvolle code. Ze zijn alleen voor code styling<\/strong>inclusief witregels, newlines, puntkomma's, aanhalingstekens enz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. GitHub workflows defini\u00ebren<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">GitHub workflows<\/a> zijn behoorlijk goed gedocumenteerd. Voel je vrij om hier dieper in te duiken, maar voor nu ga ik een eenvoudige workflow implementeren om onze code te linten na het pushen naar de remote repository (uiteraard gehost op GitHub).<\/p>\n\n\n\n<p>Maak <em>\/.github\/workflows<\/em> map en nieuwe <em>code-kwaliteit-workflow.yml<\/em> bestand daarin, omdat GitHub workflows gedefinieerd moeten worden met YAML bestanden.<\/p>\n\n\n\n<p>Om een goede workflow uit te voeren, moeten we een aantal vragen beantwoorden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wanneer willen we onze workflow uitvoeren (op push, op pull request, op samenvoegen etc.)?<\/li>\n\n\n\n<li>Willen we sommige situaties uitsluiten (zoals push naar branch master)?<\/li>\n\n\n\n<li>Welke omgeving moeten we instellen om onze commando's correct uit te voeren (in dit voorbeeld - Node)?<\/li>\n\n\n\n<li>Moeten we afhankelijkheden installeren? Zo ja, hoe moeten we de cache plaatsen?<\/li>\n\n\n\n<li>Welke stappen moeten we nemen om de controle te voltooien?<\/li>\n<\/ul>\n\n\n\n<p>Na wat overwegingen en een paar uur werk met docs voorbeeld <em>.yml<\/em> bestand kan er als volgt uitzien:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">naam: Code kwaliteit\n\naan: \"push\n\nbanen:\n  code-kwaliteit:\n    naam: Lint broncode\n    draait op: ubuntu-latest\n    stappen:\n    - gebruikt: actions\/checkout@v1\n\n    - naam: Node instellen\n      gebruikt: actions\/setup-node@v1\n      met:\n        node-versie: '12.1'\n\n    - naam: Cache-afhankelijkheden\n      gebruikt: actions\/cache@v1\n      met:\n        pad: .\/node_modules\n        sleutel: $(( runner.OS ))-afhankelijkheden-$(( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        herstel-sleutels: |\n          $(( runner.OS ))-afhankelijkheden-$(( env.cache-naam ))-\n          $(( runner.OS ))-afhankelijkheden-\n          $(( runner.OS ))-afhankelijkheden\n\n    - naam: afhankelijkheden installeren\n      uitvoeren: |\n        npm installeren\n\n    - naam: Lint bestanden\n      uitvoeren: |\n        npm run lint<\/code><\/pre>\n\n\n\n<p>GitHub biedt alle omgevingsdingen die we nodig hebben. In de laatste regel voeren we het commando <strong><em>npm lint uitvoeren<\/em><\/strong> die eerder niet gedefinieerd was:<\/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>Merk op dat ik in onze workflow geen gebruik maak van <strong>:fix<\/strong> commando's.<\/p>\n\n\n\n<p>Als al deze stappen gedaan zijn, kun je genieten van deze prachtige uitvoer van GitHub voordat je je Pull Request samenvoegt: <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>Codekwaliteit is een cruciaal onderdeel van het ontwikkelproces, vooral als je effici\u00ebnt wilt werken op de lange termijn. Er zijn veel benaderingen en best practices, waaronder hele agile methodologie\u00ebn, maar de meeste hebben betrekking op een groot, enterprise project dat door minstens 6 mensen wordt uitgevoerd.<\/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\/nl\/blog\/kwaliteit-eerste-5-eenvoudige-stappen-om-je-code-te-linten-met-github-workflows-in-javascript-project\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\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\/nl\/blog\/kwaliteit-eerste-5-eenvoudige-stappen-om-je-code-te-linten-met-github-workflows-in-javascript-project\/\" \/>\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 minuten\" \/>\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\":\"nl-NL\",\"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\":\"nl-NL\",\"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\":\"nl-NL\",\"@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\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@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\":\"nl-NL\",\"@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\\\/nl\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Kwaliteit eerst! 5 eenvoudige stappen om je code te linten met GitHub workflows in JavaScript project - The Codest","description":"Codekwaliteit is een cruciaal onderdeel van het ontwikkelproces, vooral als je effici\u00ebnt wilt werken op de lange termijn. Er zijn veel benaderingen en best practices, waaronder hele agile methodologie\u00ebn, maar de meeste hebben betrekking op een groot, enterprise project dat door minstens 6 mensen wordt uitgevoerd.","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\/nl\/blog\/kwaliteit-eerste-5-eenvoudige-stappen-om-je-code-te-linten-met-github-workflows-in-javascript-project\/","og_locale":"nl_NL","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\/nl\/blog\/kwaliteit-eerste-5-eenvoudige-stappen-om-je-code-te-linten-met-github-workflows-in-javascript-project\/","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 minuten"},"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":"nl-NL","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":"Kwaliteit eerst! 5 eenvoudige stappen om je code te linten met 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":"Codekwaliteit is een cruciaal onderdeel van het ontwikkelproces, vooral als je effici\u00ebnt wilt werken op de lange termijn. Er zijn veel benaderingen en best practices, waaronder hele agile methodologie\u00ebn, maar de meeste hebben betrekking op een groot, enterprise project dat door minstens 6 mensen wordt uitgevoerd.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb"},"inLanguage":"nl-NL","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":"nl-NL","@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":"nl-NL"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@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":"nl-NL","@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\/nl\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/nl\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}