{"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":"kvalitet-forsta-5-enkla-steg-for-att-linta-din-kod-med-github-arbetsfloden-i-javascript-projekt","status":"publish","type":"post","link":"https:\/\/thecodest.co\/sv\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"Kvalitet f\u00f6rst! 5 enkla steg f\u00f6r att linta din kod med GitHub-arbetsfl\u00f6den i JavaScript-projektet"},"content":{"rendered":"<p>Vad ska vi g\u00f6ra n\u00e4r <a href=\"https:\/\/thecodest.co\/sv\/dictionary\/why-do-projects-fail\/\">projekt<\/a> \u00e4r liten eller om kunden fortfarande inte vet om det \u00e4r v\u00e4rt att investera mer? Uppenbarligen \u00e4r det vid <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">MVP-fasen av projektet<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/sv\/dictionary\/what-is-code-refactoring\/\">kod<\/a> styling eller enhetstester \u00e4r inte h\u00f6gsta prioritet. Investerare vill vanligtvis ha en bra <a href=\"https:\/\/thecodest.co\/sv\/dictionary\/how-to-make-product\/\">Produkt<\/a> och kom igen - om det fungerar beh\u00f6ver det inte testas, eller hur?<\/p>\n\n\n\n<p>Jag har faktiskt en del erfarenhet av <strong><a href=\"https:\/\/thecodest.co\/contact\">bygga appar fr\u00e5n grunden<\/a><\/strong>\u00e4ven utan att anv\u00e4nda b\u00e4sta praxis i f\u00f6rsta hand. Vissa aff\u00e4rsomst\u00e4ndigheter tvingade mig att leta efter kompromissen mellan en investerares budgetplaner och utvecklarens \"nice-to-have\"-lista. Tack och lov, om du anv\u00e4nder GitHub, kan de flesta av de vanliga problemen relaterade till kodkvalitet l\u00f6sas p\u00e5 n\u00e5gra minuter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>I den h\u00e4r artikeln ska jag visa dig hur du anv\u00e4nder GitHub-arbetsfl\u00f6den i Node.js-milj\u00f6n f\u00f6r att standardisera din kodbas.<\/strong><\/h2>\n\n\n\n<p>N\u00e5gra antaganden innan vi b\u00f6rjar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Du \u00e4r bekant med NPM och Linux-konsolen.<\/li>\n\n\n\n<li>Du har viss erfarenhet av stilpreprocessorer, modulladdare, bundlers etc.<\/li>\n\n\n\n<li>Du vet vad linters \u00e4r till f\u00f6r och vill verkligen anv\u00e4nda dem i dina projekt.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Typisk projektstruktur f\u00f6r JavaScript<\/strong><\/h2>\n\n\n\n<p>Om du n\u00e5gonsin anv\u00e4nt n\u00e5gra <a href=\"https:\/\/thecodest.co\/sv\/blog\/javascript-tools-in-action\/\">JS<\/a> ramverk som <a href=\"https:\/\/thecodest.co\/sv\/blog\/hire-vue-js-developers\/\">Vue<\/a> eller <a href=\"https:\/\/thecodest.co\/sv\/blog\/conditional-component-visibility-in-react\/\">React<\/a>kan du enkelt uppt\u00e4cka n\u00e5gra gemensamma saker mellan dem, t.ex.:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/source<\/em> med all din JS-logik och alla dina komponenter,<\/li>\n\n\n\n<li><em>\/test<\/em> katalog f\u00f6r enhets- och e2e-test,<\/li>\n\n\n\n<li><em>\/tillg\u00e5ngar<\/em> katalog f\u00f6r stilar, bilder etc.<\/li>\n<\/ul>\n\n\n\n<p>\u00c4ven om vi talar om <a href=\"https:\/\/thecodest.co\/sv\/blog\/hire-javascript-developer\/\">JavaScript<\/a> projekt arbetar vi i <a href=\"https:\/\/thecodest.co\/sv\/dictionary\/what-is-node-js-used-for\/\">Nod<\/a> milj\u00f6, s\u00e5 sj\u00e4lvklart b\u00f6r det ocks\u00e5 finnas n\u00e5gra Node-grejer som <em>paket.json<\/em>, <em>paket-l\u00e5s.json<\/em> och <em>\/node_moduler<\/em> katalogen i v\u00e5r rotkatalog.<\/p>\n\n\n\n<p>Alla dessa saker \u00e4r p\u00e5 sin plats - det \u00e4r vad vi kallar <strong>Konvention<\/strong>. Ramverk \u00e4r uppfunna f\u00f6r att tillhandah\u00e5lla n\u00e5gra rimliga konventioner, s\u00e5 vanligtvis beh\u00f6ver vi inte ens bry oss om det ursprungliga designm\u00f6nstret. Som i det h\u00e4r exemplet vill jag f\u00f6rklara n\u00e5gra tillv\u00e4gag\u00e5ngss\u00e4tt, jag kommer inte att till\u00e4mpa n\u00e5gra f\u00e4rdiga l\u00f6sningar som Vue CLI.<\/p>\n\n\n\n<p><strong>Dags att f\u00f6rst\u00e5 vad som d\u00f6ljer sig bakom alla dessa magiska lint-skript!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Ut\u00f6kning av det typiska Node-projektet<\/strong><\/h2>\n\n\n\n<p>F\u00f6r att tillhandah\u00e5lla h\u00f6gkvalitativa l\u00f6sningar \u00e4r linters det f\u00f6rsta vi b\u00f6r b\u00f6rja med n\u00e4r vi skapar ett nytt projekt. L\u00e5t oss fokusera p\u00e5 tv\u00e5 linters - Stylelint f\u00f6r stilar (<em>*.scss<\/em>) och ESLint f\u00f6r k\u00e4llfiler (<em>*.js<\/em>). B\u00e5da dessa linters finns tillg\u00e4ngliga p\u00e5 NPM och \u00e4r ganska enkla att konfigurera. Att anv\u00e4nda linters kr\u00e4ver att man g\u00e5r igenom installationsprocessen, l\u00e4gger till konfigurationsfiler och definierar projektskript. L\u00e5t oss g\u00f6ra det steg f\u00f6r steg.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. L\u00e4gga till Stylelint<\/strong><\/h2>\n\n\n\n<p>Installationen av Stylelint i Node-milj\u00f6n \u00e4r v\u00e4ldigt enkel. Enligt <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">officiella dokument<\/a>beh\u00f6ver du bara springa:<\/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>och v\u00e4nta tills det \u00e4r klart.<\/p>\n\n\n\n<p><em>stylelint-konfiguration-standard<\/em> inneh\u00e5ller en standardupps\u00e4ttning av linting-regler och kan ers\u00e4ttas med valfritt paket som passar dina behov b\u00e4ttre (t.ex. <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Airbnb-stil<\/a>). Skapa sedan en ny dold fil <em>.stylelintrc.json<\/em>som \u00e4r Stylelints konfigurationsfil och som ansvarar f\u00f6r att ladda v\u00e5ra f\u00f6rdefinierade regler:<\/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>Just nu \u00e4r det enda som saknas n\u00e5got NPM-skript (eller skript) som deklareras i filen package.json f\u00f6r att b\u00f6rja linting v\u00e5ra SCSS-filer. H\u00e4r \u00e4r mitt f\u00f6rslag:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"skript\": {\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>Som du kan se har jag deklarerat skriptet som inneh\u00e5ller <strong>-fix<\/strong> alternativet - det h\u00e4r alternativet ska anv\u00e4ndas innan \u00e4ndringar l\u00e4ggs till i f\u00f6rvaret.<\/p>\n\n\n\n<p><strong>Kom ih\u00e5g - det \u00e4r en d\u00e5lig id\u00e9 att anv\u00e4nda <em>-fix<\/em> i ditt CI-fl\u00f6de, eftersom koden som du skickar till produktionen d\u00e5 inte stylas korrekt i repositoryt.<\/strong> Det \u00e4r d\u00e4rf\u00f6r vi beh\u00f6ver b\u00e5da skripten.<\/p>\n\n\n\n<p>L\u00e5t oss testa v\u00e5r linter genom att skapa en fil <em>\/tillg\u00e5ngar\/scss\/styles.scss<\/em> med lite inneh\u00e5ll, typ:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">kropp {\n                    bakgrundsf\u00e4rg: #fff;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm k\u00f6r lint:scss<\/code><\/pre>\n\n\n\n<p>Du b\u00f6r se n\u00e5got liknande i din konsol:<\/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\ntillg\u00e5ngar\/scss\/styles.scss\n\n2:21 \u2716 F\u00f6rv\u00e4ntad indragning av 2 mellanslag indragning\n\n1 k\u00e4lla kontrollerad\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n1 problem hittades\n\nallvarlighetsgrad niv\u00e5 \"fel\": 1\n\nindragning: 1\n\nnpm ERR! kod 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! Avsluta status 2<\/code><\/pre>\n\n\n\n<p>Detta betyder faktiskt att v\u00e5r linter fungerar!<\/p>\n\n\n\n<p>Utdata visar exakt vilken rad som orsakar ett fel och beskriver det problem som ska l\u00f6sas. Vissa problem kan inte \u00e5tg\u00e4rdas automatiskt eftersom de kr\u00e4ver ett beslut av en utvecklare, men i de flesta fall beh\u00f6ver du bara k\u00f6ra samma kommando med <strong>-fix<\/strong> alternativet, s\u00e5 l\u00e5t oss k\u00f6ra det.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm k\u00f6r lint:scss:fix<\/code><\/pre>\n\n\n\n<p>Nu b\u00f6r du se ett gr\u00f6nt utdata med inga fel hittade:<\/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 k\u00e4lla kontrollerad\n\n\/Users\/wojciechbak\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n0 problem hittades<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. L\u00e4gga till ESLint<\/strong><\/h2>\n\n\n\n<p>Detta steg \u00e4r n\u00e4stan detsamma som det f\u00f6reg\u00e5ende. Vi kommer att installera ESLint, definiera n\u00e5gra standardregler och deklarera tv\u00e5 anropsbara NPM-skript - ett f\u00f6r CI, ett f\u00f6r pre-push. L\u00e5t oss g\u00e5 igenom detta!<\/p>\n\n\n\n<p>Om du anv\u00e4nder NPM i ditt dagliga arbete kanske du vill installera ESLint globalt. Om du inte g\u00f6r det, v\u00e4nligen kontrollera installationsinstruktionerna i <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">officiella dokument<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm installera -g eslint<\/code><\/pre>\n\n\n\n<p>N\u00e4r kommandot eslint finns tillg\u00e4ngligt p\u00e5 din maskin \u00e4r det bara att k\u00f6ra det i ditt projekt:<\/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>F\u00f6lj ytterligare instruktioner som visas i din terminal och fatta bara n\u00e5gra projektbeslut som:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript eller <a href=\"https:\/\/thecodest.co\/sv\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>Airbnb-stil eller Google-stil<\/li>\n\n\n\n<li>konfigurationstyp (JSON-fil, JS-fil eller inline i <em>paket.json<\/em>)<\/li>\n\n\n\n<li>ES-moduler (<em>import\/export<\/em>) eller <em>kr\u00e4va<\/em> syntax<\/li>\n<\/ul>\n\n\n\n<p>P\u00e5 den h\u00e4r platsen \u00e4r det v\u00e4rt att skriva ett ord om kodformaterare som heter Prettier. Den \u00e4r helt standardiserad och kompatibel med de flesta kodredigerare (t.ex. VS Code). Prettier tillhandah\u00e5ller m\u00e5nga upps\u00e4ttningar f\u00f6rdefinierade kodstylingregler, samarbetar med linters och kan vara ett bra st\u00f6d f\u00f6r att jaga h\u00f6gsta kvalitet p\u00e5 koden. F\u00f6r att f\u00f6rst\u00e5 vad exakt Prettier \u00e4r, bes\u00f6k detta <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">j\u00e4mf\u00f6relse<\/a> fr\u00e5n officiella dokument.<\/p>\n\n\n\n<p>Om det \u00e4r gjort kommer ESlints konfigurationsfil (t.ex. <em>.eslintrc.json<\/em>(beroende p\u00e5 vad du har valt tidigare) b\u00f6r visas i din rotkatalog, n\u00e5gonstans bredvid <em>.stylelintrc.json<\/em> skapade tidigare.<\/p>\n\n\n\n<p>Nu m\u00e5ste vi definiera skript i <em>paket.json<\/em> fil, p\u00e5 samma s\u00e4tt som f\u00f6r SCSS-filer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"skript\": {\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>Gratulerar, grattis! ESLint \u00e4r redo att anv\u00e4ndas just nu. L\u00e5t oss kontrollera att det fungerar korrekt. Skapa <em>\/src\/index.js<\/em> fil med visst inneh\u00e5ll:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(\"n\u00e5got\");<\/code><\/pre>\n\n\n\n<p>K\u00f6r linter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm k\u00f6r lint:js<\/code><\/pre>\n\n\n\n<p><code><br><\/code>Utmatningen b\u00f6r se ut s\u00e5 h\u00e4r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; eslint '**\/*.js' --ignore-m\u00f6nster node_modules\/\n\n~\/Codest\/Projects\/github-workflow-demo\/src\/index.js\n\n1:1 warning Ov\u00e4ntat konsoluttalande no-console\n\n\u2716 1 problem (0 fel, 1 varning)<\/code><\/pre>\n\n\n\n<p>Denna varning f\u00f6rsvinner inte efter anv\u00e4ndning <em>-fix<\/em> alternativ, eftersom <strong>linters p\u00e5verkar inte potentiellt meningsfull kod. De \u00e4r bara till f\u00f6r kodstyling<\/strong>, inklusive vita mellanrum, nya linjer, semikolon, citattecken etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. Definiera arbetsfl\u00f6den f\u00f6r GitHub<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">Arbetsfl\u00f6den i GitHub<\/a> \u00e4r en ganska v\u00e4ldokumenterad sak. Du f\u00e5r g\u00e4rna gr\u00e4va djupare i detta, men f\u00f6r tillf\u00e4llet ska jag implementera ett enkelt arbetsfl\u00f6de f\u00f6r att linta v\u00e5r kod efter push till fj\u00e4rrf\u00f6rvaret (uppenbarligen v\u00e4rd p\u00e5 GitHub).<\/p>\n\n\n\n<p>Skapa <em>\/.github\/arbetsfl\u00f6den<\/em> katalog och ny <em>kod-kvalitet-arbetsfl\u00f6de.yml<\/em> filen d\u00e4r eftersom GitHub-arbetsfl\u00f6den m\u00e5ste definieras med YAML-filer.<\/p>\n\n\n\n<p>F\u00f6r att kunna k\u00f6ra ett korrekt arbetsfl\u00f6de m\u00e5ste vi svara p\u00e5 n\u00e5gra fr\u00e5gor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>N\u00e4r vill vi k\u00f6ra v\u00e5rt arbetsfl\u00f6de (p\u00e5 push, p\u00e5 pull request, p\u00e5 merge etc.)?<\/li>\n\n\n\n<li>Vill vi utesluta vissa situationer (t.ex. push till branch master)?<\/li>\n\n\n\n<li>Vilken milj\u00f6 beh\u00f6ver vi konfigurera f\u00f6r att k\u00f6ra v\u00e5ra kommandon korrekt (i det h\u00e4r exemplet - Node)?<\/li>\n\n\n\n<li>Beh\u00f6ver vi installera beroenden? Om s\u00e5 \u00e4r fallet, hur ska vi cacha det?<\/li>\n\n\n\n<li>Vilka \u00e5tg\u00e4rder beh\u00f6ver vi vidta f\u00f6r att slutf\u00f6ra kontrollen?<\/li>\n<\/ul>\n\n\n\n<p>Efter n\u00e5gra \u00f6verv\u00e4ganden och n\u00e5gra timmars arbete med dokument exempel <em>.yml<\/em> filen kan se ut s\u00e5 h\u00e4r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">namn: Kodkvalitet\n\np\u00e5: \"push\n\njobb\n  kod-kvalitet:\n    namn: Lint k\u00e4llkod\n    k\u00f6rs p\u00e5: ubuntu-latest\n    steg:\n    - anv\u00e4nder: actions\/checkout@v1\n\n    - namn: Konfigurera nod\n      anv\u00e4nder: actions\/setup-node@v1\n      med:\n        node-version: '12.1'\n\n    - namn: Cache-beroenden\n      anv\u00e4nder: actions\/cache@v1\n      med:\n        s\u00f6kv\u00e4g: .\/node_modules\n        key: $(( runner.OS ))-dependencies-$(( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        \u00e5terst\u00e4lla nycklar: |\n          $(( runner.OS ))-beroenden-$(( env.cache-name ))-\n          $(( runner.OS ))-beroenden-\n          $(( runner.OS ))-\n\n    - name: Installera beroenden\n      k\u00f6r: |\n        npm installera\n\n    - namn: Lint-filer\n      k\u00f6r: |\n        npm k\u00f6r lint<\/code><\/pre>\n\n\n\n<p>GitHub tillhandah\u00e5ller alla milj\u00f6grejer vi beh\u00f6ver. I den sista raden k\u00f6r vi kommandot <strong><em>npm k\u00f6r lint<\/em><\/strong> som inte var definierad tidigare:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"skript\": {\n    \"lint\": \"npm run lint:js &amp;&amp; npm run lint:scss\"\n}<\/code><\/pre>\n\n\n\n<p>Observera att jag i v\u00e5rt arbetsfl\u00f6de inte anv\u00e4nder <strong>:fix<\/strong> kommandon.<\/p>\n\n\n\n<p>N\u00e4r alla dessa steg \u00e4r klara kan du njuta av denna vackra utdata fr\u00e5n GitHub innan du sammanfogar din 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>Kodkvalitet \u00e4r en viktig del av utvecklingsprocessen, s\u00e4rskilt n\u00e4r man vill arbeta effektivt och l\u00e5ngsiktigt. Det finns m\u00e5nga tillv\u00e4gag\u00e5ngss\u00e4tt och b\u00e4sta praxis, inklusive hela agila metodikgrejen, men de flesta relaterar till n\u00e5got stort f\u00f6retagsprojekt som genomf\u00f6rs av minst 6 personer.<\/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\/sv\/blogg\/kvalitet-forsta-5-enkla-steg-for-att-linta-din-kod-med-github-arbetsfloden-i-javascript-projekt\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\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\/sv\/blogg\/kvalitet-forsta-5-enkla-steg-for-att-linta-din-kod-med-github-arbetsfloden-i-javascript-projekt\/\" \/>\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 minuter\" \/>\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\":\"sv-SE\",\"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\":\"sv-SE\",\"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\":\"sv-SE\",\"@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\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@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\":\"sv-SE\",\"@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\\\/sv\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Kvalitet f\u00f6rst! 5 enkla steg f\u00f6r att linta din kod med GitHub-arbetsfl\u00f6den i JavaScript-projekt - 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\/sv\/blogg\/kvalitet-forsta-5-enkla-steg-for-att-linta-din-kod-med-github-arbetsfloden-i-javascript-projekt\/","og_locale":"sv_SE","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\/sv\/blogg\/kvalitet-forsta-5-enkla-steg-for-att-linta-din-kod-med-github-arbetsfloden-i-javascript-projekt\/","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 minuter"},"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":"sv-SE","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":"Kvalitet f\u00f6rst! 5 enkla steg f\u00f6r att linta din kod med GitHub-arbetsfl\u00f6den i JavaScript-projekt - 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":"sv-SE","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":"sv-SE","@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":"sv-SE"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@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":"sv-SE","@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\/sv\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/sv\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}