{"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":"laatu-ensimmainen-5-helppoa-vaihetta-lint-koodiasi-github-tyonkulut-javascript-projekti","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fi\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"Laatu ensin! 5 helppoa vaihetta koodin niputtamiseen GitHub-ty\u00f6nkulkujen avulla JavaScript-projektissa."},"content":{"rendered":"<p>Mit\u00e4 meid\u00e4n pit\u00e4isi tehd\u00e4, kun <a href=\"https:\/\/thecodest.co\/fi\/dictionary\/why-do-projects-fail\/\">projekti<\/a> on pieni tai asiakas ei viel\u00e4 tied\u00e4, kannattaako siihen investoida enemm\u00e4n? On selv\u00e4\u00e4, ett\u00e4 <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">Hankkeen MVP-vaihe<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/fi\/dictionary\/what-is-code-refactoring\/\">koodi<\/a> muotoilu tai yksikk\u00f6testit eiv\u00e4t ole ensisijaisia. Sijoittajat haluavat yleens\u00e4 hyv\u00e4n <a href=\"https:\/\/thecodest.co\/fi\/dictionary\/how-to-make-product\/\">tuote<\/a> ja jos se toimii, sit\u00e4 ei tarvitse testata, eik\u00f6 niin?<\/p>\n\n\n\n<p>Itse asiassa minulla on jonkin verran kokemusta <strong><a href=\"https:\/\/thecodest.co\/contact\">sovellusten rakentaminen tyhj\u00e4st\u00e4<\/a><\/strong>jopa ilman parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4. Er\u00e4\u00e4t liiketoimintaolosuhteet pakottivat minut etsim\u00e4\u00e4n kompromissia sijoittajan budjettisuunnitelmien ja rakennuttajan \"nice-to-have\" -listan v\u00e4lilt\u00e4. Onneksi jos k\u00e4yt\u00e4t GitHubia, useimmat yleisimm\u00e4t koodin laatuun liittyv\u00e4t ongelmat voidaan ratkaista muutamassa minuutissa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, miten voit k\u00e4ytt\u00e4\u00e4 GitHub-ty\u00f6nkulkuja Node.js-ymp\u00e4rist\u00f6ss\u00e4 koodipohjan standardoimiseksi.<\/strong><\/h2>\n\n\n\n<p>Muutamia oletuksia ennen kuin aloitamme:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tunnet NPM:n ja Linux-konsolin.<\/li>\n\n\n\n<li>Sinulla on jonkin verran kokemusta tyylin esik\u00e4sittelij\u00f6ist\u00e4, moduulinlataajista, bundlerista jne.<\/li>\n\n\n\n<li>Tied\u00e4t, mit\u00e4 varten linterit ovat ja haluat todella k\u00e4ytt\u00e4\u00e4 niit\u00e4 projekteissasi.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Tyypillinen JavaScript-projektin rakenne<\/strong><\/h2>\n\n\n\n<p>Jos olet koskaan k\u00e4ytt\u00e4nyt <a href=\"https:\/\/thecodest.co\/fi\/blog\/javascript-tools-in-action\/\">JS<\/a> puitteet kuten <a href=\"https:\/\/thecodest.co\/fi\/blog\/hire-vue-js-developers\/\">Vue<\/a> tai <a href=\"https:\/\/thecodest.co\/fi\/blog\/conditional-component-visibility-in-react\/\">React<\/a>, voit helposti havaita joitakin yhteisi\u00e4 asioita niiden v\u00e4lill\u00e4, esimerkiksi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/src<\/em> hakemistoon, jossa on kaikki JS-logiikkasi ja -komponenttisi,<\/li>\n\n\n\n<li><em>\/testi<\/em> hakemistoon yksikk\u00f6- ja e2e-testej\u00e4 varten,<\/li>\n\n\n\n<li><em>\/varat<\/em> hakemistoon tyylej\u00e4, kuvia jne. varten.<\/li>\n<\/ul>\n\n\n\n<p>Vaikka puhumme <a href=\"https:\/\/thecodest.co\/fi\/blog\/hire-javascript-developer\/\">JavaScript<\/a> projektissa ty\u00f6skentelemme <a href=\"https:\/\/thecodest.co\/fi\/dictionary\/what-is-node-js-used-for\/\">Solmu<\/a> ymp\u00e4rist\u00f6ss\u00e4, joten ilmeisesti siell\u00e4 pit\u00e4isi olla my\u00f6s joitakin Node-juttuja, kuten <em>package.json<\/em>, <em>package-lock.json<\/em> ja <em>\/node_modules<\/em> luettelon juurihakemistossamme.<\/p>\n\n\n\n<p>Kaikki n\u00e4m\u00e4 asiat ovat omalla paikallaan - sit\u00e4 me kutsumme nimell\u00e4 <strong>yleissopimus<\/strong>. Kehykset on keksitty tarjoamaan joitakin j\u00e4rkevi\u00e4 konventioita, joten yleens\u00e4 meid\u00e4n ei tarvitse edes v\u00e4litt\u00e4\u00e4 alkuper\u00e4isest\u00e4 suunnittelumallista. Koska t\u00e4ss\u00e4 esimerkiss\u00e4 haluan selitt\u00e4\u00e4 joitakin l\u00e4hestymistapoja, en k\u00e4yt\u00e4 mit\u00e4\u00e4n valmiita ratkaisuja, kuten Vue CLI:t\u00e4.<\/p>\n\n\n\n<p><strong>On aika ymm\u00e4rt\u00e4\u00e4, mit\u00e4 kaikkien n\u00e4iden maagisten nukkausskriptien alla piilee!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Tyypillisen Node-projektin laajentaminen<\/strong><\/h2>\n\n\n\n<p>Laadukkaiden ratkaisujen tarjoaminen edellytt\u00e4\u00e4, ett\u00e4 uutta hanketta perustettaessa on ensimm\u00e4iseksi aloitettava linterit. Keskityt\u00e4\u00e4n kahteen linteriin - Stylelint tyyleille (<em>*.scss<\/em>) ja ESLint l\u00e4hdetiedostoille (<em>*.js<\/em>). Molemmat n\u00e4ist\u00e4 lintereist\u00e4 ovat saatavilla NPM:ss\u00e4, ja ne on melko helppo konfiguroida. Linterien k\u00e4ytt\u00e4minen vaatii asennusprosessin l\u00e4pik\u00e4ymist\u00e4, konfigurointitiedostojen lis\u00e4\u00e4mist\u00e4 ja projektiskriptien m\u00e4\u00e4rittely\u00e4. Tehd\u00e4\u00e4n se vaihe vaiheelta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Stylelintin lis\u00e4\u00e4minen<\/strong><\/h2>\n\n\n\n<p>Stylelintin asennus Node-ymp\u00e4rist\u00f6\u00f6n on todella yksinkertaista. Mukaan <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">viralliset asiakirjat<\/a>sinun tarvitsee vain juosta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install --save-dev stylelint stylelint-config-standardi<\/code><\/pre>\n\n\n\n<p>ja odota, ett\u00e4 se on valmis.<\/p>\n\n\n\n<p><em>stylelint-config-standard<\/em> tarjoaa oletusarvoisen joukon niputuss\u00e4\u00e4nt\u00f6j\u00e4, ja se voidaan korvata mill\u00e4 tahansa paketilla, joka sopii tarpeisiisi paremmin (esim. <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Airbnb-tyyliin<\/a>). Luo sitten uusi piilotettu tiedosto <em>.stylelintrc.json<\/em>, joka on Stylelintin konfigurointitiedosto, joka vastaa ennalta m\u00e4\u00e4ritettyjen s\u00e4\u00e4nt\u00f6jemme lataamisesta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">{\n    \"extends\": \"stylelint-config-standard\": \"stylelint-config-standard\"\n}<\/code><\/pre>\n\n\n\n<p>Juuri nyt ainoa puuttuva asia on jokin NPM-skripti (tai skriptit), joka on ilmoitettu package.json-tiedostossa, jotta SCSS-tiedostot voidaan aloittaa niputtaminen. T\u00e4ss\u00e4 on ehdotukseni:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"skriptit\": {\n    \"lint:scss\": scss' --syntax scss -f verbose --color\": \"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>Kuten n\u00e4et, olen ilmoittanut skriptin sis\u00e4lt\u00e4v\u00e4n <strong>-fix<\/strong> -vaihtoehto - t\u00e4t\u00e4 k\u00e4ytet\u00e4\u00e4n ennen muutosten siirt\u00e4mist\u00e4 arkistoon.<\/p>\n\n\n\n<p><strong>Muista - on huono k\u00e4yt\u00e4nt\u00f6 k\u00e4ytt\u00e4\u00e4 <em>-fix<\/em> CI-virtauksessa, koska silloin tuotantoon siirt\u00e4m\u00e4\u00e4si koodia ei ole tyylitelty oikein arkistossa.<\/strong> Siksi tarvitsemme molemmat k\u00e4sikirjoitukset.<\/p>\n\n\n\n<p>Testaamme linteri\u00e4 luomalla tiedoston <em>\/assets\/scss\/styles.scss<\/em> jossa on sis\u00e4lt\u00f6\u00e4, kuten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body {\n                    background-color: #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>Konsolissasi pit\u00e4isi n\u00e4ky\u00e4 jotain t\u00e4llaista:<\/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\nassets\/scss\/styles.scss\n\n2:21 \u2716 Odotettu sisennys 2 v\u00e4lily\u00f6nti\u00e4 sisennys\n\n1 l\u00e4hde tarkistettu\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n1 ongelma l\u00f6ydetty\n\nvakavuustaso \"virhe\": 1\n\nsisennys: 1\n\nnpm ERR! koodi 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! Poistumistila 2<\/code><\/pre>\n\n\n\n<p>T\u00e4m\u00e4 tarkoittaa sit\u00e4, ett\u00e4 linterimme toimii!<\/p>\n\n\n\n<p>Tulosteessa n\u00e4kyy tarkalleen, mik\u00e4 rivi aiheuttaa virheen, ja siin\u00e4 kuvataan ratkaistava ongelma. Joitakin ongelmia ei voi korjata automaattisesti, koska ne vaativat kehitt\u00e4j\u00e4n p\u00e4\u00e4t\u00f6ksen, mutta useimmissa tapauksissa sinun tarvitsee vain ajaa sama komento komennolla <strong>-fix<\/strong> vaihtoehto, joten ajetaan se.<\/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>Nyt sinun pit\u00e4isi n\u00e4hd\u00e4 vihre\u00e4 tuloste, jossa ei ole virheit\u00e4:<\/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 l\u00e4hde tarkistettu\n\n\/Users\/wojciechbak\/Codest\/Projektit\/github-workflow-demo\/assets\/scss\/styles.scss\n\n0 ongelmaa l\u00f6ydetty<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. ESLintin lis\u00e4\u00e4minen<\/strong><\/h2>\n\n\n\n<p>T\u00e4m\u00e4 vaihe on l\u00e4hes sama kuin edellinen. Asennamme ESLintin, m\u00e4\u00e4rittelemme joitakin oletuss\u00e4\u00e4nt\u00f6j\u00e4 ja ilmoitamme kaksi kutsuttavaa NPM-skripti\u00e4 - yhden CI:t\u00e4 ja yhden pre-pushia varten. K\u00e4yd\u00e4\u00e4n t\u00e4m\u00e4 l\u00e4pi!<\/p>\n\n\n\n<p>Jos k\u00e4yt\u00e4t NPM:\u00e4\u00e4 p\u00e4ivitt\u00e4isess\u00e4 ty\u00f6ss\u00e4si, ehk\u00e4 haluat asentaa ESLintin globaalisti. Jos et halua, tutustu asennusohjeisiin osoitteessa <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">viralliset asiakirjat<\/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>Kun eslint-komento on k\u00e4ytett\u00e4viss\u00e4 koneellasi, suorita se projektissasi:<\/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>Kun olet noudattanut p\u00e4\u00e4telaitteessa n\u00e4kyvi\u00e4 lis\u00e4ohjeita, tee vain muutama projektip\u00e4\u00e4t\u00f6s, kuten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript tai <a href=\"https:\/\/thecodest.co\/fi\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>Airbnb:n tai Googlen tyyliin<\/li>\n\n\n\n<li>konfiguraatiotyyppi (JSON-tiedosto, JS-tiedosto tai inline in <em>package.json<\/em>)<\/li>\n\n\n\n<li>ES-moduulit (<em>tuonti\/vienti<\/em>) tai <em>vaativat<\/em> syntaksi<\/li>\n<\/ul>\n\n\n\n<p>T\u00e4ss\u00e4 paikassa on syyt\u00e4 kirjoittaa sana koodin muotoilijasta nimelt\u00e4 Prettier. Se on t\u00e4ysin standardoitu ja yhteensopiva useimpien koodieditoreiden (esim. VS Code) kanssa. Prettier tarjoaa monia valmiita koodin muotoilus\u00e4\u00e4nt\u00f6j\u00e4, tekee yhteisty\u00f6t\u00e4 linterien kanssa ja voi olla suuri tuki koodin huippulaadun tavoittelussa. Jos haluat ymm\u00e4rt\u00e4\u00e4, mik\u00e4 Prettier tarkalleen ottaen on, k\u00e4y t\u00e4ss\u00e4 osoitteessa. <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">vertailu<\/a> virallisista asiakirjoista.<\/p>\n\n\n\n<p>Jos se on tehty, ESlintin konfigurointitiedosto (esim. <em>.eslintrc.json<\/em>riippuen siit\u00e4, mit\u00e4 olet valinnut aiemmin) pit\u00e4isi n\u00e4ky\u00e4 juurihakemistossasi, jossain seuraavassa paikassa. <em>.stylelintrc.json<\/em> luotu aiemmin.<\/p>\n\n\n\n<p>Nyt meid\u00e4n on m\u00e4\u00e4ritelt\u00e4v\u00e4 skriptit <em>package.json<\/em> tiedosto, kuten SCSS-tiedostotkin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"skriptit\": {\n    \"lint:js\": \"js' --ignore-pattern node_modules\/\",\n    \"lint:js:fix\": \"eslint '**\/*.js' --ignore-pattern node_modules\/ --fix\"\n}<\/code><\/pre>\n\n\n\n<p>Onneksi olkoon! ESLint on nyt k\u00e4ytt\u00f6valmis. Tarkistetaan, toimiiko se oikein. Luo <em>\/src\/index.js<\/em> tiedosto, jossa on jotain sis\u00e4lt\u00f6\u00e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(\"jotain\");<\/code><\/pre>\n\n\n\n<p>Suorita linteri:<\/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>Tuloksen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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 warning Odottamaton konsoli-lauseke no-console\n\n\u2716 1 ongelma (0 virhett\u00e4, 1 varoitus)<\/code><\/pre>\n\n\n\n<p>T\u00e4m\u00e4 varoitus ei katoa sen j\u00e4lkeen, kun olet k\u00e4ytt\u00e4nyt <em>-fix<\/em> vaihtoehto, koska <strong>linterit eiv\u00e4t vaikuta potentiaalisesti mielekk\u00e4\u00e4seen koodiin. Ne ovat vain koodin muotoilua varten.<\/strong>, mukaan lukien v\u00e4lily\u00f6nnit, uudet viivat, puolipisteet, lainausmerkit jne.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. GitHub-ty\u00f6nkulkujen m\u00e4\u00e4ritt\u00e4minen<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">GitHub-ty\u00f6nkulut<\/a> ovat melko hyvin dokumentoitu asia. Voit vapaasti kaivaa syvemm\u00e4lle t\u00e4h\u00e4n, mutta nyt aion toteuttaa yksinkertaisen ty\u00f6nkulun, jolla koodimme voidaan niputtaa sen j\u00e4lkeen, kun se on siirretty et\u00e4tietovarastoon (ilmeisesti GitHubissa).<\/p>\n\n\n\n<p>Luo <em>\/.github\/ty\u00f6nkulut<\/em> hakemisto ja uusi <em>code-quality-workflow.yml<\/em> tiedostoa, koska GitHub-ty\u00f6nkulut on m\u00e4\u00e4ritelt\u00e4v\u00e4 YAML-tiedostojen avulla.<\/p>\n\n\n\n<p>Jotta ty\u00f6nkulku toimisi kunnolla, meid\u00e4n on vastattava muutamaan kysymykseen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Milloin haluamme suorittaa ty\u00f6nkulun (push, pull request, merge jne.)?<\/li>\n\n\n\n<li>Haluammeko sulkea pois joitakin tilanteita (kuten push to branch master)?<\/li>\n\n\n\n<li>Mink\u00e4 ymp\u00e4rist\u00f6n meid\u00e4n on asetettava, jotta komentomme voidaan suorittaa oikein (t\u00e4ss\u00e4 esimerkiss\u00e4 - Node)?<\/li>\n\n\n\n<li>Pit\u00e4\u00e4k\u00f6 meid\u00e4n asentaa riippuvuudet? Jos on, miten meid\u00e4n pit\u00e4isi tallentaa se v\u00e4limuistiin?<\/li>\n\n\n\n<li>Mit\u00e4 toimenpiteit\u00e4 meid\u00e4n on toteutettava tarkastuksen loppuun saattamiseksi?<\/li>\n<\/ul>\n\n\n\n<p>Joidenkin n\u00e4k\u00f6kohtien ja muutaman tunnin ty\u00f6n j\u00e4lkeen docs esimerkki <em>.yml<\/em> tiedosto voi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">nimi: Koodin laatu\n\non: 'push'\n\njobs:\n  Laatu: Code-quality:\n    name: Lint source code\n    K\u00e4yt\u00f6ss\u00e4: ubuntu-latest\n    vaiheet:\n    - uses: actions\/checkout@v1\n\n    - nimi: Setup Node\n      k\u00e4ytt\u00e4\u00e4: actions\/setup-node@v1\n      with:\n        12.1'.\n\n    - name: Cache-riippuvuudet\n      k\u00e4ytt\u00e4\u00e4: actions\/cache@v1\n      with:\n        \/node_modules\n        avain: $(( runner.OS ))-dependencies-$((( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        restore-keys: |\n          $(( runner.OS ))-dependencies-$(( env.cache-name ))-\n          $(( runner.OS ))-dependencies- $(( runner.OS ))-dependencies-\n          $(( runner.OS ))- -\n\n    - name: Asenna riippuvuudet\n      run: |\n        npm install\n\n    - name: Lint-tiedostot\n      run: |\n        npm run lint<\/code><\/pre>\n\n\n\n<p>GitHub tarjoaa kaikki tarvitsemamme ymp\u00e4rist\u00f6tuotteet. Viimeisell\u00e4 rivill\u00e4 suoritamme komennon <strong><em>npm run lint<\/em><\/strong> jota ei ollut m\u00e4\u00e4ritelty aiemmin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"skriptit\": {\n    \"lint\": \"npm run lint:js &amp;&amp; npm run lint:scss\": \"npm run lint:js &amp;&amp; npm run lint:scss\"\n}<\/code><\/pre>\n\n\n\n<p>Huomaa, ett\u00e4 meid\u00e4n ty\u00f6nkulussamme en k\u00e4yt\u00e4 <strong>:fix<\/strong> komentoja.<\/p>\n\n\n\n<p>Kun kaikki n\u00e4m\u00e4 vaiheet on tehty, voit nauttia t\u00e4st\u00e4 kauniista GitHubin tulosteesta ennen Pull Requestin yhdist\u00e4mist\u00e4: <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>Koodin laatu on ratkaiseva osa kehitysprosessia, etenkin kun haluat ty\u00f6skennell\u00e4 tehokkaasti ja pitk\u00e4j\u00e4nteisesti. On olemassa monia l\u00e4hestymistapoja ja parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4, mukaan lukien ketter\u00e4t menetelm\u00e4t, mutta useimmat niist\u00e4 liittyv\u00e4t johonkin suureen, v\u00e4hint\u00e4\u00e4n kuuden henkil\u00f6n toteuttamaan yritysprojektiin.<\/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=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/fi\/blogi\/laatu-ensimmainen-5-helppoa-vaihetta-lint-koodiasi-github-tyonkulut-javascript-projekti\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\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\/fi\/blogi\/laatu-ensimmainen-5-helppoa-vaihetta-lint-koodiasi-github-tyonkulut-javascript-projekti\/\" \/>\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 minuuttia\" \/>\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\":\"fi\",\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\"},\"inLanguage\":\"fi\",\"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\":\"fi\",\"@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\":\"fi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@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\":\"fi\",\"@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\\\/fi\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laatu ensin! 5 helppoa vaihetta koodin nukkaamiseen GitHub-ty\u00f6nkulkujen avulla JavaScript-projektissa - The Codest","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\/fi\/blogi\/laatu-ensimmainen-5-helppoa-vaihetta-lint-koodiasi-github-tyonkulut-javascript-projekti\/","og_locale":"fi_FI","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\/fi\/blogi\/laatu-ensimmainen-5-helppoa-vaihetta-lint-koodiasi-github-tyonkulut-javascript-projekti\/","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 minuuttia"},"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":"fi","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":"Laatu ensin! 5 helppoa vaihetta koodin nukkaamiseen GitHub-ty\u00f6nkulkujen avulla JavaScript-projektissa - 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","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb"},"inLanguage":"fi","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":"fi","@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":"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":"fi"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fi","@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":"fi","@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\/fi\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fi\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}