{"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":"pierwsze-5-prostych-krokow-do-lintowania-kodu-za-pomoca-przeplywow-pracy-github-w-projekcie-javascript","status":"publish","type":"post","link":"https:\/\/thecodest.co\/pl\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"Jako\u015b\u0107 przede wszystkim! 5 prostych krok\u00f3w do lintowania kodu za pomoc\u0105 przep\u0142yw\u00f3w pracy GitHub w projekcie JavaScript"},"content":{"rendered":"<p>Co powinni\u015bmy zrobi\u0107, gdy <a href=\"https:\/\/thecodest.co\/pl\/dictionary\/why-do-projects-fail\/\">projekt<\/a> jest niewielka lub klient wci\u0105\u017c nie wie, czy warto zainwestowa\u0107 wi\u0119cej? Oczywi\u015bcie, na <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">Etap MVP projektu<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/pl\/dictionary\/what-is-code-refactoring\/\">kod<\/a> Stylizacja lub testy jednostkowe nie s\u0105 najwy\u017cszym priorytetem. Inwestorzy zazwyczaj chc\u0105 mie\u0107 dobry <a href=\"https:\/\/thecodest.co\/pl\/dictionary\/how-to-make-product\/\">produkt<\/a> I daj spok\u00f3j - je\u015bli dzia\u0142a, to nie potrzebuje test\u00f3w, prawda?<\/p>\n\n\n\n<p>W\u0142a\u015bciwie mam pewne do\u015bwiadczenie w <strong><a href=\"https:\/\/thecodest.co\/contact\">Tworzenie aplikacji od podstaw<\/a><\/strong>nawet bez stosowania najlepszych praktyk. Pewne okoliczno\u015bci biznesowe zmusi\u0142y mnie do szukania kompromisu mi\u0119dzy planami bud\u017cetowymi inwestora a list\u0105 \"nice-to-have\" dewelopera. Na szcz\u0119\u015bcie, je\u015bli korzystasz z GitHub, wi\u0119kszo\u015b\u0107 typowych problem\u00f3w zwi\u0105zanych z jako\u015bci\u0105 kodu mo\u017cna rozwi\u0105za\u0107 w kilka minut.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>W tym artykule poka\u017c\u0119, jak korzysta\u0107 z przep\u0142yw\u00f3w pracy GitHub w \u015brodowisku Node.js w celu standaryzacji bazy kodu.<\/strong><\/h2>\n\n\n\n<p>Kilka za\u0142o\u017ce\u0144 zanim zaczniemy:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jeste\u015b zaznajomiony z NPM i konsol\u0105 Linux.<\/li>\n\n\n\n<li>Masz pewne do\u015bwiadczenie z preprocesorami styl\u00f3w, modu\u0142ami \u0142aduj\u0105cymi, bundlerami itp.<\/li>\n\n\n\n<li>Wiesz, do czego s\u0142u\u017c\u0105 lintery i naprawd\u0119 chcesz wykorzysta\u0107 je w swoich projektach.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Typowa struktura projektu JavaScript<\/strong><\/h2>\n\n\n\n<p>Je\u015bli kiedykolwiek u\u017cywa\u0142e\u015b <a href=\"https:\/\/thecodest.co\/pl\/blog\/javascript-tools-in-action\/\">JS<\/a> frameworki takie jak <a href=\"https:\/\/thecodest.co\/pl\/blog\/hire-vue-js-developers\/\">Vue<\/a> lub <a href=\"https:\/\/thecodest.co\/pl\/blog\/conditional-component-visibility-in-react\/\">React<\/a>Mo\u017cna jednak \u0142atwo zauwa\u017cy\u0107 pewne wsp\u00f3lne cechy mi\u0119dzy nimi, np:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/src<\/em> z ca\u0142\u0105 logik\u0105 JS i komponentami,<\/li>\n\n\n\n<li><em>\/test<\/em> dla test\u00f3w jednostkowych i e2e,<\/li>\n\n\n\n<li><em>\/aktywa<\/em> dla styl\u00f3w, obraz\u00f3w itp.<\/li>\n<\/ul>\n\n\n\n<p>Nawet je\u015bli m\u00f3wimy o <a href=\"https:\/\/thecodest.co\/pl\/blog\/hire-javascript-developer\/\">JavaScript<\/a> projekt, pracujemy w <a href=\"https:\/\/thecodest.co\/pl\/dictionary\/what-is-node-js-used-for\/\">W\u0119ze\u0142<\/a> \u015brodowisko, wi\u0119c oczywi\u015bcie powinno by\u0107 r\u00f3wnie\u017c kilka rzeczy Node, takich jak <em>package.json<\/em>, <em>package-lock.json<\/em> i <em>\/node_modules<\/em> w naszym katalogu g\u0142\u00f3wnym.<\/p>\n\n\n\n<p>Wszystkie te rzeczy s\u0105 na swoim miejscu - to w\u0142a\u015bnie nazywamy <strong>konwencja<\/strong>. Frameworki s\u0105 wymy\u015blane, aby zapewni\u0107 pewne rozs\u0105dne konwencje, wi\u0119c zazwyczaj nie musimy nawet dba\u0107 o pocz\u0105tkowy wzorzec projektowy. Poniewa\u017c w tym przyk\u0142adzie chc\u0119 wyja\u015bni\u0107 kilka podej\u015b\u0107, nie zastosuj\u0119 \u017cadnych gotowych rozwi\u0105za\u0144, takich jak Vue CLI.<\/p>\n\n\n\n<p><strong>Czas zrozumie\u0107, co kryje si\u0119 pod tymi wszystkimi magicznymi skryptami!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Rozszerzenie typowego projektu Node<\/strong><\/h2>\n\n\n\n<p>Aby zapewni\u0107 wysokiej jako\u015bci rozwi\u0105zania, lintery s\u0105 pierwsz\u0105 rzecz\u0105, od kt\u00f3rej powinni\u015bmy zacz\u0105\u0107 podczas tworzenia nowego projektu. Skupmy si\u0119 na dw\u00f3ch linterach - Stylelint dla styl\u00f3w (<em>*.scss<\/em>) i ESLint dla plik\u00f3w \u017ar\u00f3d\u0142owych (<em>*.js<\/em>). Oba te lintery s\u0105 dost\u0119pne w NPM i do\u015b\u0107 \u0142atwe w konfiguracji. Korzystanie z linter\u00f3w wymaga przej\u015bcia przez proces instalacji, dodania plik\u00f3w konfiguracyjnych i zdefiniowania skrypt\u00f3w projektu. Zr\u00f3bmy to krok po kroku.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Dodawanie Stylelint<\/strong><\/h2>\n\n\n\n<p>Instalacja Stylelint w \u015brodowisku Node jest naprawd\u0119 prosta. Zgodnie z <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">oficjalne dokumenty<\/a>musisz po prostu ucieka\u0107:<\/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>i poczeka\u0107, a\u017c si\u0119 sko\u0144czy.<\/p>\n\n\n\n<p><em>stylelint-config-standard<\/em> zapewnia domy\u015blny zestaw regu\u0142 lintingu i mo\u017ce by\u0107 zast\u0105piony dowolnym pakietem, kt\u00f3ry lepiej odpowiada Twoim potrzebom (np. <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Styl Airbnb<\/a>). Nast\u0119pnie utw\u00f3rz nowy ukryty plik <em>.stylelintrc.json<\/em>kt\u00f3ry jest plikiem konfiguracyjnym Stylelint, odpowiedzialnym za \u0142adowanie naszych predefiniowanych regu\u0142:<\/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>W tej chwili jedyn\u0105 brakuj\u0105c\u0105 rzecz\u0105 jest jaki\u015b skrypt (lub skrypty) NPM zadeklarowany w pliku package.json, aby rozpocz\u0105\u0107 linting naszych plik\u00f3w SCSS. Oto moja propozycja:<\/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>Jak wida\u0107, zadeklarowa\u0142em skrypt zawieraj\u0105cy <strong>-fix<\/strong> opcja - tej opcji nale\u017cy u\u017cy\u0107 przed wypchni\u0119ciem zmian do repozytorium.<\/p>\n\n\n\n<p><strong>Nale\u017cy pami\u0119ta\u0107, \u017ce korzystanie z niego jest z\u0142\u0105 praktyk\u0105. <em>-fix<\/em> w przep\u0142ywie CI, poniewa\u017c wtedy kod przekazywany do produkcji nie jest poprawnie stylizowany w repozytorium.<\/strong> Dlatego potrzebujemy obu skrypt\u00f3w.<\/p>\n\n\n\n<p>Przetestujmy nasz linter, tworz\u0105c plik <em>\/assets\/scss\/styles.scss<\/em> z pewn\u0105 zawarto\u015bci\u0105, np:<\/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>W konsoli powinno pojawi\u0107 si\u0119 co\u015b takiego:<\/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 Oczekiwane wci\u0119cie 2 spacje wci\u0119cie\n\nSprawdzono 1 \u017ar\u00f3d\u0142o\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\nZnaleziono 1 problem\n\npoziom wa\u017cno\u015bci \"b\u0142\u0105d\": 1\n\nwci\u0119cie: 1\n\nnpm ERR! code ELIFECYCLE\n\nnpm ERR! errno 2\n\nnpm ERR! github-workflow-demo@1.0.0 lint:scss: `stylelint '**\/*.scss' --syntax scss -f verbose --color`\n\nnpm ERR! Status wyj\u015bcia 2<\/code><\/pre>\n\n\n\n<p>Oznacza to, \u017ce nasz linter dzia\u0142a!<\/p>\n\n\n\n<p>Wynik pokazuje dok\u0142adnie, kt\u00f3ra linia powoduje b\u0142\u0105d i opisuje problem do rozwi\u0105zania. Niekt\u00f3rych b\u0142\u0119d\u00f3w nie da si\u0119 naprawi\u0107 automatycznie, poniewa\u017c wymagaj\u0105 one decyzji dewelopera, ale w wi\u0119kszo\u015bci przypadk\u00f3w wystarczy uruchomi\u0107 to samo polecenie z rozszerzeniem <strong>-fix<\/strong> wi\u0119c uruchommy j\u0105.<\/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>Teraz powiniene\u015b zobaczy\u0107 zielone wyj\u015bcie bez znalezionych b\u0142\u0119d\u00f3w:<\/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 sprawdzone \u017ar\u00f3d\u0142o\n\n\/Users\/wojciechbak\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\nZnaleziono 0 problem\u00f3w<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Dodawanie ESLint<\/strong><\/h2>\n\n\n\n<p>Ten krok jest prawie taki sam jak poprzedni. Zainstalujemy ESLint, zdefiniujemy domy\u015blny zestaw regu\u0142 i zadeklarujemy dwa wywo\u0142ywalne skrypty NPM - jeden dla CI, drugi dla pre-push. Przejd\u017amy przez to!<\/p>\n\n\n\n<p>Je\u015bli u\u017cywasz NPM w swojej codziennej pracy, by\u0107 mo\u017ce chcia\u0142by\u015b zainstalowa\u0107 ESLint globalnie. Je\u015bli nie, zapoznaj si\u0119 z instrukcjami instalacji na stronie <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">oficjalne dokumenty<\/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>Gdy polecenie eslint jest dost\u0119pne na komputerze, wystarczy uruchomi\u0107 je w projekcie:<\/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>Post\u0119puj\u0105c zgodnie z dalszymi instrukcjami wy\u015bwietlanymi w terminalu, wystarczy podj\u0105\u0107 kilka decyzji dotycz\u0105cych projektu, takich jak<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript lub <a href=\"https:\/\/thecodest.co\/pl\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>Styl Airbnb lub styl Google<\/li>\n\n\n\n<li>typ konfiguracji (plik JSON, plik JS lub inline w <em>package.json<\/em>)<\/li>\n\n\n\n<li>Modu\u0142y ES (<em>import\/eksport<\/em>) lub <em>wymaga\u0107<\/em> sk\u0142adnia<\/li>\n<\/ul>\n\n\n\n<p>W tym miejscu warto napisa\u0107 kilka s\u0142\u00f3w o formatatorze kodu o nazwie Prettier. Jest on w pe\u0142ni ustandaryzowany i kompatybilny z wi\u0119kszo\u015bci\u0105 edytor\u00f3w kodu (np. VS Code). Prettier zapewnia wiele zestaw\u00f3w predefiniowanych regu\u0142 stylizacji kodu, wsp\u00f3\u0142pracuje z linterami i mo\u017ce by\u0107 \u015bwietnym wsparciem w d\u0105\u017ceniu do najwy\u017cszej jako\u015bci kodu. Aby zrozumie\u0107, czym dok\u0142adnie jest Prettier, odwied\u017a t\u0119 stron\u0119 <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">por\u00f3wnanie<\/a> z oficjalnych dokument\u00f3w.<\/p>\n\n\n\n<p>Je\u015bli tak si\u0119 stanie, plik konfiguracyjny ESlint (np. <em>.eslintrc.json<\/em>, w zale\u017cno\u015bci od tego, co wybra\u0142e\u015b wcze\u015bniej) powinien pojawi\u0107 si\u0119 w katalogu g\u0142\u00f3wnym, gdzie\u015b obok <em>.stylelintrc.json<\/em> stworzony wcze\u015bniej.<\/p>\n\n\n\n<p>Teraz musimy zdefiniowa\u0107 skrypty w <em>package.json<\/em> tak samo jak w przypadku plik\u00f3w SCSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"scripts\": {\n    \"lint:js\": \"eslint '**\/*.js' --ignore-pattern node_modules\/\",\n    \"lint:js:fix\": \"eslint '**\/*.js' --ignore-pattern node_modules\/ --fix\".\n}<\/code><\/pre>\n\n\n\n<p>Gratulacje! ESLint jest ju\u017c gotowy do u\u017cycia. Sprawd\u017amy, czy dzia\u0142a poprawnie. Utw\u00f3rz <em>\/src\/index.js<\/em> z pewn\u0105 zawarto\u015bci\u0105:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(\"co\u015b\");<\/code><\/pre>\n\n\n\n<p>Uruchom linter:<\/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>Wynik powinien wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/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 ostrze\u017cenie Nieoczekiwana instrukcja konsoli no-console\n\n1 problem (0 b\u0142\u0119d\u00f3w, 1 ostrze\u017cenie)<\/code><\/pre>\n\n\n\n<p>To ostrze\u017cenie nie zniknie po u\u017cyciu <em>-fix<\/em> opcja, poniewa\u017c <strong>linters nie wp\u0142ywa na potencjalnie znacz\u0105cy kod. S\u0142u\u017c\u0105 one tylko do stylizacji kodu<\/strong>, w tym bia\u0142e spacje, nowe linie, \u015bredniki, cudzys\u0142owy itp.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. Definiowanie przep\u0142yw\u00f3w pracy GitHub<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">Przep\u0142ywy pracy GitHub<\/a> s\u0105 do\u015b\u0107 dobrze udokumentowane. Zapraszam do zag\u0142\u0119bienia si\u0119 w ten temat, ale na razie zaimplementuj\u0119 prosty workflow do lintowania naszego kodu po wypchni\u0119ciu do zdalnego repozytorium (oczywi\u015bcie hostowanego na GitHubie).<\/p>\n\n\n\n<p>Utw\u00f3rz <em>\/.github\/workflows<\/em> katalog i nowy <em>code-quality-workflow.yml<\/em> poniewa\u017c przep\u0142ywy pracy GitHub musz\u0105 by\u0107 definiowane za pomoc\u0105 plik\u00f3w YAML.<\/p>\n\n\n\n<p>Aby uruchomi\u0107 prawid\u0142owy workflow, musimy odpowiedzie\u0107 na kilka pyta\u0144:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kiedy chcemy uruchomi\u0107 nasz przep\u0142yw pracy (przy wypychaniu, przy \u017c\u0105daniu \u015bci\u0105gni\u0119cia, przy scalaniu itp.)<\/li>\n\n\n\n<li>Czy chcemy wykluczy\u0107 niekt\u00f3re sytuacje (takie jak push do ga\u0142\u0119zi master)?<\/li>\n\n\n\n<li>Jakie \u015brodowisko musimy skonfigurowa\u0107, aby poprawnie uruchamia\u0107 nasze polecenia (w tym przyk\u0142adzie - Node)?<\/li>\n\n\n\n<li>Czy musimy instalowa\u0107 zale\u017cno\u015bci? Je\u015bli tak, to w jaki spos\u00f3b powinni\u015bmy je buforowa\u0107?<\/li>\n\n\n\n<li>Jakie kroki musimy wykona\u0107, aby uko\u0144czy\u0107 kontrol\u0119?<\/li>\n<\/ul>\n\n\n\n<p>Po kilku przemy\u015bleniach i kilku godzinach pracy z przyk\u0142adowymi dokumentami <em>.yml<\/em> plik mo\u017ce wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">Nazwa: Jako\u015b\u0107 kodu\n\non: 'push'\n\njobs:\n  code-quality:\n    name: Lint source code\n    runs-on: ubuntu-latest\n    kroki:\n    - uses: actions\/checkout@v1\n\n    - nazwa: Setup Node\n      uses: actions\/setup-node@v1\n      with:\n        node-version: '12.1'\n\n    - name: Zale\u017cno\u015bci pami\u0119ci podr\u0119cznej\n      uses: actions\/cache@v1\n      with:\n        path: .\/node_modules\n        key: $(( runner.OS ))-dependencies-$(( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        restore-keys: |\n          $(( runner.OS ))-dependencies-$(( env.cache-name ))-\n          $(( runner.OS ))-dependencies-\n          $(( runner.OS ))-zale\u017cno\u015bci-\n\n    - name: Zainstaluj zale\u017cno\u015bci\n      run: |\n        npm install\n\n    - name: Lint files\n      run: |\n        npm run lint<\/code><\/pre>\n\n\n\n<p>GitHub zapewnia wszystkie rzeczy \u015brodowiskowe, kt\u00f3rych potrzebujemy. W ostatniej linii uruchamiamy polecenie <strong><em>npm run lint<\/em><\/strong> kt\u00f3ra nie by\u0142a wcze\u015bniej zdefiniowana:<\/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>Zauwa\u017c, \u017ce w naszym przep\u0142ywie pracy nie u\u017cywam <strong>:fix<\/strong> polecenia.<\/p>\n\n\n\n<p>Po wykonaniu wszystkich tych krok\u00f3w mo\u017cesz cieszy\u0107 si\u0119 pi\u0119knym wynikiem z GitHub przed scaleniem 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>Jako\u015b\u0107 kodu jest kluczow\u0105 cz\u0119\u015bci\u0105 procesu rozwoju, zw\u0142aszcza je\u015bli chcesz pracowa\u0107 wydajnie w spos\u00f3b d\u0142ugoterminowy. Istnieje wiele podej\u015b\u0107 i najlepszych praktyk, w tym ca\u0142e metodologie zwinne, ale wi\u0119kszo\u015b\u0107 z nich odnosi si\u0119 do du\u017cego, korporacyjnego projektu prowadzonego przez co najmniej 6 os\u00f3b.<\/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\/pl\/blog\/pierwsze-5-prostych-krokow-do-lintowania-kodu-za-pomoca-przeplywow-pracy-github-w-projekcie-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\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\/pl\/blog\/pierwsze-5-prostych-krokow-do-lintowania-kodu-za-pomoca-przeplywow-pracy-github-w-projekcie-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-14T08:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:32:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minut\" \/>\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\":\"pl-PL\",\"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\":\"pl-PL\",\"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\":\"pl-PL\",\"@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\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@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\":\"pl-PL\",\"@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\\\/pl\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Jako\u015b\u0107 przede wszystkim! 5 prostych krok\u00f3w do lintowania kodu za pomoc\u0105 przep\u0142yw\u00f3w pracy GitHub w projekcie JavaScript - The Codest","description":"Jako\u015b\u0107 kodu jest kluczow\u0105 cz\u0119\u015bci\u0105 procesu rozwoju, zw\u0142aszcza je\u015bli chcesz pracowa\u0107 wydajnie w spos\u00f3b d\u0142ugoterminowy. Istnieje wiele podej\u015b\u0107 i najlepszych praktyk, w tym ca\u0142e metodologie zwinne, ale wi\u0119kszo\u015b\u0107 z nich odnosi si\u0119 do du\u017cego, korporacyjnego projektu prowadzonego przez co najmniej 6 os\u00f3b.","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\/pl\/blog\/pierwsze-5-prostych-krokow-do-lintowania-kodu-za-pomoca-przeplywow-pracy-github-w-projekcie-javascript\/","og_locale":"pl_PL","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\/pl\/blog\/pierwsze-5-prostych-krokow-do-lintowania-kodu-za-pomoca-przeplywow-pracy-github-w-projekcie-javascript\/","og_site_name":"The Codest","article_published_time":"2019-04-14T08:51:00+00:00","article_modified_time":"2026-04-24T11:32:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","type":"image\/jpeg"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"6 minut"},"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":"pl-PL","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":"Jako\u015b\u0107 przede wszystkim! 5 prostych krok\u00f3w do lintowania kodu za pomoc\u0105 przep\u0142yw\u00f3w pracy GitHub w projekcie JavaScript - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","description":"Jako\u015b\u0107 kodu jest kluczow\u0105 cz\u0119\u015bci\u0105 procesu rozwoju, zw\u0142aszcza je\u015bli chcesz pracowa\u0107 wydajnie w spos\u00f3b d\u0142ugoterminowy. Istnieje wiele podej\u015b\u0107 i najlepszych praktyk, w tym ca\u0142e metodologie zwinne, ale wi\u0119kszo\u015b\u0107 z nich odnosi si\u0119 do du\u017cego, korporacyjnego projektu prowadzonego przez co najmniej 6 os\u00f3b.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb"},"inLanguage":"pl-PL","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":"pl-PL","@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":"pl-PL"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@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":"pl-PL","@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\/pl\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/pl\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}