Konfiguracja lintingu w projekcie to kluczowy⁣ krok,​ który pomaga utrzymać ⁣jakość i spójność kodu. Poniżej przedstawiamy⁢ krok po ⁢kroku, jak to zrobić.

Wybór narzędzia​ lintingowego

Na ‌rynku‍ dostępnych jest wiele narzędzi do lintowania,jednak najpopularniejsze ⁤to:

  • ESLint -‍ idealny do ​projektów ‍JavaScript i TypeScript.
  • prettier – skupia się ‍na formatowaniu⁤ kodu.
  • Stylelint ‍ – przeznaczony do ‍CSS i preprocesorów takich⁢ jak⁣ SASS.

Instalacja​ i konfiguracja

Po⁢ wyborze narzędzia, należy‌ je zainstalować. ‌W przypadku ESLint możemy⁢ użyć następującego polecenia:

npm install eslint --save-dev

W⁢ następnej⁤ kolejności, inicjalizujemy konfigurację:

npx eslint --init

Podczas procesu konfiguracji, będziemy⁣ pytani o różne opcje,⁣ takie ‍jak ⁣rodzaj‍ projektu oraz⁢ preferencje stylowe. Możemy wybrać pomiędzy zalecanymi ustawieniami lub dostosować ⁣je‍ do własnych potrzeb.

Ustawienia reguł

W pliku konfiguracyjnym (np. ⁤.eslintrc.js) możemy dostosować reguły lintingu w zależności od naszych potrzeb.Przykładowa ‌konfiguracja może wyglądać tak:

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: 'eslint:recommended',
    parserOptions: {
        ecmaVersion: 12,
    },
    rules: {
        'no-console': 'warn',
        'indent': ['error', 4],
        'quotes': ['error', 'single'],
    },
};

Integracja⁤ z edytorem kodu

Aby ⁢zwiększyć ⁣efektywność⁢ pracy, warto zintegrować⁣ linting‍ z edytorem kodu. W przypadku Visual Studio Code, wystarczy zainstalować odpowiednie rozszerzenie ESLint. ‍Po jego zainstalowaniu, ⁢edytor automatycznie‌ zacznie wyświetlać błędy lintingu⁤ w czasie rzeczywistym.

Uruchamianie‌ lintingu w‍ projekcie

Możemy‍ uruchomić linting manualnie, wykonując polecenie:

npx eslint .

Jednak dla większej wygody, ‍warto dodać skrypt do pliku package.json:

"scripts": {
    "lint": "eslint ."
}

Dzięki temu, ‍linting można uruchomić poleceniem:

npm run lint

Automatyzacja ​lintowania

Aby jeszcze bardziej‍ zoptymalizować ⁢pracę, ⁤można skonfigurować‌ automatyczne lintowanie podczas commitowania ⁣kodu. Można ‍to ⁣zrobić ​z użyciem narzędzi takich jak ⁤ husky ‌oraz⁤ lint-staged.

KomponentOpis
HuskyUmożliwia⁢ tworzenie hooków Gita, ⁤takich jak‌ pre-commit.
Lint-stageduruchamia ⁣linting tylko na zmienionych plikach.