8. sij. 2026. - 12 min

Roko Ponjarac

Software Engineer

Čist kod je važan. Vaš tim čita kod puno više nego što piše novi. Skriveni bugovi i nekonzistentno formatiranje usporavaju sve. ESLint pronalazi greške prije nego što odu u produkciju. Prettier automatski formatira vaš kod. Zajedno pretvaraju kaotične kodne baze u projekte koje je lako održavati.

Ovaj vodič pokazuje kako postaviti oba alata u projektima koji koriste React i Next.js. Naučit ćete najbolje prakse za timski rad, kako postaviti sustave i kako ih integrirati.

Zašto su alati za kvalitetu koda važni za moderni razvoj

Svaki developer ima svoj način rada. Neki preferiraju jednostruke navodnike. Neki koriste dvostruke. Neki stavljaju točku-zarez svugdje. Neki ih uopće ne koriste. Pull requestovi se pretvaraju u rasprave o formatiranju umjesto code reviewa kada nema zajedničkih standarda.

ESLint provjerava vaš JavaScript i TypeScript kod za potencijalne probleme. Alat pronalazi nekorištene varijable, nedostižan kod i uzorke koji vjerojatno uzrokuju bugove. Prettier se brine za formatiranje. Alat mijenja stil koda koji predajete tako da uvijek bude isti.

Korištenje oba alata istovremeno ima dvije prednosti. ESLint pronalazi logičke greške i osigurava da se slijede coding patterni. Prettier eliminira rasprave o stilu formatirajući sve na isti način.

Ovi alati pomažu profesionalnim razvojnim timovima održavati visoku kvalitetu koda na velikim projektima. Vrijeme utrošeno na postavljanje isplati se kroz brže code reviewe i manje bugova u produkciji.

Preduvjeti

Provjerite da vaše razvojno okruženje zadovoljava ove kriterije prije nego počnete:

Node.js verzija 18 ili novija
npm ili yarn instaliran
React ili Next.js projekt već postavljen

Ako nemate projekt, napravite novi s naredbom:

npx create-next-app@latest my-project --typescript

Instalacija potrebnih paketa

Potrebno je nekoliko paketa koji rade zajedno. Instalirajte sve jednom naredbom da uštedite vrijeme. Svaki paket ima određenu svrhu:

@typescript-eslint paketi – omogućuju rad s TypeScriptom
eslint-config-airbnb – sadrži set pravila koji koriste mnoge tvrtke
eslint-config-prettier – sprječava sukob između ESLinta i Prettiera

Korištenjem npm-a:

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @trivago/prettier-plugin-sort-imports

Korištenjem yarna:

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @trivago/prettier-plugin-sort-imports

Postavljanje ESLinta

U korijenu vašeg projekta napravite datoteku .eslintrc. Ova datoteka govori ESLintu koja pravila treba slijediti. extends niz učitava pravila iz drugih konfiguracija. Redoslijed je ovdje važan. Prettier config mora doći nakon ostalih da bi isključio pravila formatiranja koja su u konfliktu.

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react", "react-hooks", "jsx-a11y", "prettier"],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never",
        "js": "never",
        "jsx": "never"
      }
    ],
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["../"]
      }
    ],
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "return" },
      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
      { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] }
    ],
    "@typescript-eslint/no-unused-vars": "error",
    "prettier/prettier": "error"
  }
}

Razumijevanje najvažnijih ESLint pravila

Pravilo react/react-in-jsx-scope je isključeno jer ne morate importati React u svaku datoteku od React 17. Pravilo react/prop-types je isključeno jer TypeScript bolje provjerava tipove od PropTypesa.

Pravilo no-restricted-imports zabranjuje korištenje relativnih importa poput ../. To olakšava korištenje path aliasa za čišće import naredbe. Pravilo padding-line-between-statements zahtijeva prazne linije prije return naredbi. To čini kod čitljivijim odvajajući return od ostatka logike.

Postavljanje Prettiera

Napravite datoteku .prettierrc u korijenu vašeg projekta. Svaka opcija mijenja način formatiranja na određeni način.

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^react", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

printWidth – govori Prettieru koliko linija može biti duga prije nego prelomi kod
singleQuote – čini da sav kod koristi jednostruke navodnike umjesto dvostrukih
trailingComma – stavlja zareze nakon zadnje stavke u nizovima i objektima (čini git diffove čišćim kada dodajete nove stavke)

Automatsko sortiranje importa

Trivago plugin se sam brine za organizaciju importa. Redoslijed sortiranja određuje importOrder niz:

React importi dolaze prvi
Third-party paketi dolaze sljedeći
Interni @/ alias importi slijede
Relativni importi dolaze zadnji

Opcija importOrderSeparation stavlja prazne linije između svake grupe importa. Ovo vizualno odvajanje olakšava skeniranje importa.

Postavljanje path aliasa

Path aliasi olakšavaju importe i sprječavaju da relativne putanje postanu neuredne. Pišete @/components/Button umjesto ../../../components/Button.

Dodajte mapiranja putanja u vašu tsconfig.json datoteku:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Path aliasi su vrlo važni za timove koji rade na kompleksnim projektima kako bi održali čitljivost kodne baze dok projekt raste.

Dodavanje Stylelinta za SCSS i CSS

Lintanje JavaScripta provjerava vaše komponente. Također morate obratiti pažnju na vaše stilove. Stylelint pronalazi greške u CSS-u i osigurava da stilovi budu uvijek isti.

Instalirajte sljedeće pakete:

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss stylelint-scss

Napravite datoteku .stylelintrc.json u korijenu vašeg projekta:

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
  "plugins": ["stylelint-scss"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "selector-class-pattern": null
  }
}

Konfiguracija isključuje standardno at-rule-no-unknown pravilo jer SCSS ima vlastita @-pravila, kao što su @mixin i @include. SCSS verzija pravila ih ispravno obrađuje.

Postavljanje skripti u package.json

Dodajte skripte u vašu package.json datoteku da linteri mogu raditi:

{
  "scripts": {
    "lint": "prettier --check . && eslint . && stylelint '**/*.scss'",
    "lint:fix": "eslint . --fix && prettier --write . && stylelint '**/*.scss' --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

lint – provjerava sve ali ništa ne mijenja (koristite ovo u CI/CD pipelineima da zaustavite buildove koji imaju problema s formatiranjem)
lint:fix – automatski popravlja stvari koje alati pronađu

Postavljanje Git hookova s Huskyjem

Disciplina je potrebna za ručno pokretanje lintera. Developeri zaborave. Bugovi prolaze. Git hookovi olakšavaju proces pokretanjem provjera prije svakog commita.

Instalirajte Husky i lint-staged:

yarn add -D husky lint-staged
yarn dlx husky init

Stavite lint-staged postavke u vašu package.json datoteku:

{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{js,jsx}": ["eslint --fix", "prettier --write"],
    "*.scss": ["stylelint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

Napravite pre-commit hook u .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Commit workflow

Svaki put kada commitirate, workflow se automatski pokreće:

Developer napravi promjene i stagea ih
Developer pokrene git commit
Husky pokrene pre-commit hook
lint-staged pokrene lintere samo na stageiranim datotekama
Ako sve provjere prođu, commit uspije
Ako bilo koja provjera ne prođe, commit se zaustavi i prikaže poruke o greškama

Integracija s VS Codeom

Vaš editor bi trebao podcrtavati greške dok tipkate. Ne morate pokretati terminalne naredbe da dobijete povratne informacije u stvarnom vremenu od VS Code ekstenzija.

Instalirajte ove ekstenzije iz VS Code marketplacea:

ESLint
Prettier
Stylelint

U vašem projektu napravite datoteku .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "stylelint.validate": ["css", "scss"]
}

editor.formatOnSave – pokreće Prettier svaki put kada spremite datoteku
editor.codeActionsOnSave – automatski pokreće ESLint i Stylelint popravke

Razumijevanje pravila za razmak u kodu

Konzistentan razmak olakšava čitanje. Postoje pravila u ESLint konfiguraciji koja zahtijevaju prazne linije između logičkih sekcija koda. Kod koji nije pravilno razmaknut izgleda zgusnuto. Varijable, pozivi funkcija i kontrolne naredbe se miješaju.

Lakše je održavati projekte koji su pravilno formatirani. Kada koristite Material-UI komponente, konzistentno lintanje pronalazi česte greške u propsima i probleme s pristupačnošću prije nego odu u produkciju.

Kreiranje ignore datoteka

Ne trebaju sve datoteke biti lintane. Napravite ove ignore datoteke:

.eslintignore:

node_modules/
.next/
out/
build/
dist/
public/

.prettierignore:

node_modules/
.next/
out/
build/
dist/
public/
pnpm-lock.yaml
package-lock.json
yarn.lock

.stylelintignore:

node_modules/
.next/
out/
build/
dist/
public/

Ove ignore datoteke sprječavaju lintere da gube vrijeme na generirane datoteke, dependencije i build outpute.

Česte greške i kako ih popraviti

Ne mogu pronaći putanju do modula

Ova greška se događa kada ESLint ne može shvatiti što napraviti s @/ importima. Da ispravite problem, trebate instalirati i postaviti TypeScript resolver:

npm install --save-dev eslint-import-resolver-typescript

Osigurajte da vaša tsconfig.json datoteka ima mapiranje putanja i da vaše ESLint postavke imaju konfiguraciju import resolvera:

{
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  }
}

Prettier i ESLint konfliktna pravila

Ako oba alata označe istu liniju ali nude različite prijedloge, pogledajte vaš extends niz. Da override pravila iz drugih konfiga koja su u konfliktu, prettier config mora doći zadnji.

Husky hookovi ne rade

Ako commitovi prolaze bez pokretanja lintera, reinstalirajte Husky i provjerite da pre-commit datoteka postoji i ima ispravan sadržaj skripte.

Popravljanje vaše konfiguracije

Ako vaša pravila ne rade kako očekujete, pokrenite:

npx eslint --print-config src/components/Button.tsx

Ovo pokazuje kako spojena konfiguracija radi na određenoj datoteci. Output pokazuje koja pravila su aktivna i odakle dolaze.

Poboljšanje performansi

Lintanje traje duže na velikim projektima s tisućama datoteka. Da preskočite datoteke koje se nisu promijenile, dodajte cachiranje u vašu lint skriptu:

{
  "scripts": {
    "lint": "eslint . --cache --cache-location node_modules/.cache/eslint"
  }
}

Alat lint-staged radi samo na stageiranim datotekama. Ova metoda je brža od provjere cijele kodne baze na svakom commitu.

Dijeljenje postavki između projekata

Ako vaša agencija radi na više projekata, dijeljenje ESLint i Prettier postavki može uštedjeti vrijeme kod postavljanja. Napravite dijeljeni konfiguracijski paket koji sadrži vaša pravila. Uključite dijeljeni config u svaki projekt i koristite ga u vašem extends nizu.

Ova metoda osigurava uniformno lintanje kroz sve vaše projekte i centralizira ažuriranja pravila. Ako poboljšate pravilo u dijeljenom paketu, automatski se ažurira u svim projektima koji ga koriste.

Kada timovi grade aplikacije koje podržavaju internacionalizaciju, imaju koristi od istih pravila lintanja za datoteke prijevoda i kod komponenti.

Sažetak

ESLint i Prettier pretvaraju kaotične kodne baze u projekte na kojima je lako raditi. ESLint pronalazi bugove i osigurava da se patterni slijede. Prettier se sam brine za formatiranje. Vaš tim može održavati istu razinu kvalitete bez dodatnog posla sa Stylelintom za CSS i Huskyjem za Git hookove.

Konfiguracija iz ovog vodiča dat će vam setup spreman za produkciju:

Path aliasi olakšavaju import
Automatsko sortiranje importa održava datoteke organiziranima
Git hookovi sprječavaju loše formatiran kod da uđe u vaš repozitorij
VS Code integracija daje povratne informacije odmah dok tipkate

Počnite korištenjem priloženih konfiguracijskih datoteka. Promijenite pravila da odgovaraju željama vašeg tima. Cilj je imati kod koji je lako čitati i razumjeti kroz cijelu vašu kodnu bazu.