Linting i code quality 2024

Co to jest ESLint i jak skonfigurować go w projekcie TypeScript?

ESLint: najstarszy i najpopularniejszy linter JavaScript/TypeScript (Nicholas C. Zakas, 2013). Statyczna analiza kodu — wykrywa błędy i problemy zanim uruchomisz. Reguły: możesz włączyć/wyłączyć/konfigurować każdą regułę. ESLint Flat Config (v9+, 2024): nowy format konfiguracji. eslint.config.js (lub .mjs, .cjs) zamiast .eslintrc.*. Tablicowy format zamiast hierarchicznego. TypeScript ESLint: typescript-eslint (oficjalny). Reguły type-aware (potrzebują TypeScript compiler). @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-return-type. tsconfig.json wymagany dla type-aware rules. Popularne konfiguracje: eslint:recommended, typescript-eslint/recommended, typescript-eslint/strict. Pluginy React: eslint-plugin-react, eslint-plugin-react-hooks (najważniejszy). eslint-plugin-jsx-a11y — dostępność w JSX. eslint-plugin-import — porządek importów. eslint-plugin-unicorn — opinionated rules (dobre praktyki). Inne popularne: eslint-plugin-sonarjs (code smells). eslint-plugin-security (bezpieczeństwo). eslint-plugin-n (Node.js). Performance: ESLint może być wolny na dużych projektach. --cache flag — cache wyników. lint-staged — lintuj tylko staged files. Prettier integracja: eslint-config-prettier — wyłącz reguły formatowania z ESLint. Niech Prettier formatuje, ESLint sprawdza logikę.

Biome — co to jest i czy zastępuje ESLint i Prettier?

Biome (dawniej Rome, 2023): linter + formatter napisany w Rust. Bardzo szybki (25x szybszy niż ESLint+Prettier). Jeden tool zamiast kilku. Zero konfiguracji dla podstawowego użycia. Biome linter: 200+ reguł (ESLint + typescript-eslint subset). Kategorie: correctness, suspicious, style, complexity, performance, security, a11y. Biome formatter: opinionated (jak Prettier). Identyczne wyniki niezależnie od konfiguracji. Obsługuje: JS, TS, JSX, TSX, JSON, JSONC. Konfiguracja (biome.json): minimalna config. overrides per plik. rules włącz/wyłącz. Biome vs ESLint+Prettier: Biome — jeden tool, Rust speed, zero-config start, mniej reguł. ESLint — dojrzały, ogromny ekosystem pluginów, type-aware rules. Prettier — de facto standard formatowania, szerszy support (CSS, Markdown, PHP). 2024 status: Biome nie zastępuje ESLint (brak pełnego type-aware). Dobre do projektu z minimalnymi wymaganiami linting. Ale rośnie szybko. Oxlint (oxc-project): linter w Rust (Boshen). 50-100x szybszy od ESLint. Kompatybilność z ESLint (reguły). Nie formatter. Używaj jako szybki pre-pass obok ESLint. lint-staged: npm install --save-dev lint-staged. .lintstagedrc: {'*.{ts,tsx}': ['eslint --fix', 'prettier --write']}. Działa z Husky pre-commit hook.

Prettier vs Biome formatter — formatowanie kodu w 2024?

Prettier: opinionated formatter (2017, Christopher Chedeau). Nie dyskutuj o stylu — Prettier decyduje. Obsługuje: JS, TS, JSX, CSS, SCSS, HTML, JSON, YAML, Markdown, GraphQL, MDX. Popularne opcje: printWidth: 80/100/120. tabWidth: 2. singleQuote: true. trailingComma: 'all'. semi: true/false. arrowParens: 'always'/'avoid'. Integracja: VSCode: Prettier - Code Formatter. Format on Save. eslint-config-prettier — eliminuje konflikty. .prettierrc lub prettier.config.js. .prettierignore — pliki wykluczone. Biome formatter: szybszy (Rust). Coraz lepsza kompatybilność z Prettier. Różnice: niektóre edge cases różne. Sprawdź compatibility na biome.sh. dprint: plugin-based formatter (Rust). Konfigurowalny (w przeciwieństwie do Prettier). Plugins: TypeScript, JSON, TOML, Markdown. Szybki (Rust). Standardowe podejście 2024: mały projekt -> Biome (formatter + linter). Duży projekt z TypeScript -> ESLint (type-aware) + Prettier + eslint-config-prettier. Monorepo -> tRPC project -> ESLint z shared config. Husky + lint-staged: Husky: Git hooks manager. npx husky init -> .husky/ directory. .husky/pre-commit: npx lint-staged. lint-staged: uruchamia tylko na staged files (szybko). Szybki feedback loop.

Git hooks, Husky i conventional commits — workflow quality?

Git hooks: skrypty uruchamiane przez Git przy określonych zdarzeniach. pre-commit — przed commitem (lint, format, test). commit-msg — walidacja wiadomości commita. pre-push — przed push (testy, build). post-merge — po merge (npm install). Husky: menedżer Git hooks dla Node.js. npx husky init. .husky/pre-commit: npm run lint. .husky/pre-push: npm test. Husky v9: modern, esm-ready. Commitlint: walidacja wiadomości commita. @commitlint/cli + @commitlint/config-conventional. .commitlintrc.js: module.exports = {extends: ['@commitlint/config-conventional']}. Conventional Commits: standard wiadomości commitów. format: type(scope): description. Typy: feat, fix, docs, style, refactor, perf, test, build, ci, chore. Breaking change: feat!: lub BREAKING CHANGE w footerze. Przykłady: feat(auth): add Google OAuth login. fix(api): handle null user in getProfile. docs(readme): update installation instructions. Semantic Release: automatyczne wersjonowanie i changelog. Analizuje conventional commits. Generuje CHANGELOG.md. Bumps wersję (semver). Publikuje do npm. GitHub Release. Changesets (Pnpm/Turborepo ecosystem): ręczne changelogi per PR. changeset add -> wersjonowanie. changeset version -> bump. changeset publish -> npm. Release Please (Google): GitHub Action. Conventional commits -> Release PR -> version bump.

EditorConfig, .nvmrc i standardowe narzędzia projektowe?

EditorConfig: standaryzacja ustawień edytora. .editorconfig w root projektu. Niezależne od IDE (VSCode, IntelliJ, Vim). root = true. [*]: indent_style = space. indent_size = 2. end_of_line = lf. charset = utf-8. trim_trailing_whitespace = true. insert_final_newline = true. .nvmrc: wersja Node.js dla projektu. echo '20.11.0' > .nvmrc. nvm use — automatyczne przełączenie. .nvmrc + Volta: Volta.sh pinuje Node.js per projekt. volta pin node@20. package.json -> volta field. engines field: package.json engines: {node: '>=20.0.0', npm: '>=10.0.0'}. VSCode workspace settings (.vscode/settings.json): editor.formatOnSave. editor.defaultFormatter. files.eol. typescript.preferences. extensions.json (recommended extensions). tsconfig.json organizacja: tsconfig.base.json — wspólne. tsconfig.json — project override. include, exclude, extends. strict mode: zawsze włączone w nowych projektach. strictNullChecks, noImplicitAny, strictFunctionTypes. paths aliasy: '@/*': ['./src/*']. Musi być skonfigurowane też w Vite (resolve.alias). Narzędzia CI code quality: SonarCloud — analiza statyczna, code coverage. CodeClimate — maintainability score. Codecov — coverage reports. GitHub Actions — linting check. Bundle size monitoring — bundlemon, size-limit.

Wyślij zapytanie