Instrumente TypeScript: ESLint și Prettier

Unelte pentru TypeScript

Acest capitol este o trecere în revistă a uneltelor din jurul TypeScript: linting, formatare, unelte de build, configurarea editorului și testare.

Ecosistemul de dezvoltare TypeScript

Uneltele TypeScript sunt unul dintre cele mai mari atuuri ale limbajului. Există unelte solide pentru fiecare etapă a dezvoltării:

  • Calitatea codului: ESLint cu suport pentru TypeScript, verificarea tipurilor și linting, impunerea stilului de cod.
  • Dezvoltare: integrare cu VS Code, unelte de depanare, Hot Module Replacement (HMR).
  • Build & livrare: bundlere (Vite, Webpack, Parcel), împachetarea modulelor, optimizare pentru producție.

Linting cu ESLint

Instalare. Instalează ESLint împreună cu parserul și pluginul oficiale pentru TypeScript, ca ESLint să înțeleagă sintaxa și regulile TypeScript: npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin.

Configurare. În .eslintrc.json activează regulile TypeScript recomandate, indică-i lui ESLint fișierul tsconfig pentru un linting care ține cont de tipuri și ajustează câteva reguli uzuale:

  • "root": true
  • "parser": "@typescript-eslint/parser"
  • "plugins": ["@typescript-eslint"]
  • "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking"]
  • "parserOptions": { "project": "./tsconfig.json", "ecmaVersion": 2020, "sourceType": "module" }
  • "rules": { "@typescript-eslint/explicit-function-return-type": "warn", "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }] }

Scripturi NPM. Adaugă în package.json scripturi care rulează linterul și o verificare doar a tipurilor. Folosește lint:fix pentru a repara automat problemele simple.

  • "lint": "eslint . --ext .ts,.tsx"
  • "lint:fix": "eslint . --ext .ts,.tsx --fix"
  • "type-check": "tsc --noEmit"

Formatarea codului cu Prettier

Prettier păstrează același stil de cod în toată echipa.

Combină-l cu ESLint, ca problemele de formatare să nu apară drept erori de lint.

Instalare. Instalează Prettier și pachetele ESLint care dezactivează regulile conflictuale și raportează problemele de formatare prin ESLint: npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier.

Configurare. Pune-ți preferințele în .prettierrc, de exemplu:

  • "semi": true
  • "singleQuote": true
  • "tabWidth": 2
  • "printWidth": 100
  • "trailingComma": "es5"
  • "bracketSpacing": true
  • "arrowParens": "avoid"

Iar folderele generate se trec în .prettierignore, câte unul pe linie: node_modules, build, dist, .next, .vscode.

Integrarea cu ESLint. Extinde plugin:prettier/recommended, ca problemele de formatare să fie raportate ca probleme ESLint. În .eslintrc.json adaugă-l în tabloul "extends", după toate celelalte configurații: "extends": ["plugin:prettier/recommended"]. Trebuie să fie ultima intrare din tablou.

Unelte moderne de build

Vite este alegerea recomandată pentru un server de dezvoltare rapid și build-uri moderne.

Webpack este încă des folosit și foarte configurabil.

Vite (recomandat). Creează un proiect nou React + TypeScript cu Vite. Pornește un server de dezvoltare cu HMR, pentru feedback rapid:

  • npm create vite@latest my-app -- --template react-ts — creează proiectul
  • cd my-app — intră în folderul proiectului
  • npm install — instalează dependențele
  • npm run dev — pornește serverul de dezvoltare

Configurarea Webpack. Dacă alegi Webpack, această configurație minimă compilează TypeScript, se ocupă de CSS și servește aplicația cu webpack-dev-server.

Configurarea TypeScript. Un tsconfig.json strict pentru browsere moderne. Opționalele baseUrl și paths permit importuri absolute precum @/components/Button. Secțiunea sa compilerOptions:

  • "target": "es2020"
  • "module": "esnext"
  • "lib": ["dom", "dom.iterable", "esnext"]
  • "allowJs": true
  • "skipLibCheck": true
  • "esModuleInterop": true
  • "allowSyntheticDefaultImports": true
  • "strict": true
  • "forceConsistentCasingInFileNames": true
  • "moduleResolution": "node"
  • "resolveJsonModule": true
  • "isolatedModules": true
  • "noEmit": true
  • "jsx": "react-jsx"
  • "baseUrl": "."
  • "paths": { "@/*": ["src/*"] }

împreună cu "include": ["src"] și "exclude": ["node_modules"].

Configurație Webpack minimă

ts-loader se ocupă de fișierele .ts/.tsx, CSS-ul trece prin loaderele style și css, iar serverul de dezvoltare rulează pe portul 3000 cu reîncărcare la cald.

script.ts 
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot: true,
  },
};

Configurarea mediului de dezvoltare

Configurează-ți editorul astfel încât să afișeze erorile de lint, să formateze la salvare și să permită depanarea ușoară.

Extensii VS Code. Extensii recomandate:

  • TypeScript + Webpack Problem Matchers — raportare mai bună a erorilor
  • ESLint — rulează ESLint în VS Code
  • Prettier - Code formatter — formatare consecventă
  • Path IntelliSense — completează automat numele de fișiere
  • Error Lens — afișează erorile direct în cod

Setări VS Code. În .vscode/settings.json fă din Prettier formatorul implicit, repară problemele ESLint la salvare și preferă căile de import ne-relative:

  • "editor.defaultFormatter": "esbenp.prettier-vscode"
  • "editor.formatOnSave": true
  • "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true }
  • "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
  • "typescript.tsdk": "node_modules/typescript/lib"
  • "typescript.preferences.importModuleSpecifier": "non-relative"

Configurația de depanare. În .vscode/launch.json ("version": "0.2.0") adaugă două intrări în "configurations":

  • O pornire Chrome: "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMaps": true, și "sourceMapPathOverrides" care mapează webpack:///./~/* la ${workspaceFolder}/node_modules/* și webpack:///./* la ${workspaceFolder}/src/*.
  • Un depanator Node pentru teste: "type": "node", "request": "launch", "name": "Debug Tests", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest", "args": ["--runInBand", "--watchAll=false"], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "sourceMaps": true.

Configurarea testelor

Jest împreună cu Testing Library este o modalitate populară de a testa aplicații React + TypeScript.

Jest + Testing Library. Instalează Jest, suportul său pentru TypeScript și utilitarele React Testing Library pentru aserțiuni pe DOM și interacțiunea utilizatorului: npm install --save-dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom @testing-library/user-event.

Configurarea Jest. Configurează Jest să folosească ts-jest, să mapeze modulele CSS și să rezolve căile alias precum @/.

Test de exemplu. Un test simplu de componentă, care verifică randarea și comportamentul la clic cu Testing Library.

Configurarea Jest

Configurația folosește presetul ts-jest cu un mediu jsdom și mapează aliasul @/ și importurile de stiluri.

script.ts 
// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom'],
  moduleNameMapper: {
    '^@/(.*)$': '/src/$1',
    '\\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\\.tsx?$': 'ts-jest',
  },
  testMatch: ['**/__tests__/**/*.test.(ts|tsx)'],
};

Test de componentă cu Testing Library

Două teste: unul verifică faptul că textul butonului este randat, celălalt verifică faptul că handlerul de clic rulează o singură dată.

script.ts 
// src/__tests__/Button.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from '../components/Button';

describe('Button', () => {
  it('renders button with correct text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Bune practici

Fluxul de lucru în dezvoltare:

  • Folosește npm run dev pentru dezvoltare cu reîncărcare la cald
  • Rulează npm run type-check pentru a verifica tipurile TypeScript
  • Folosește npm run lint pentru a căuta erori de linting
  • Rulează npm run build pentru a crea un build de producție

Optimizarea performanței:

  • Folosește împărțirea codului (code splitting) cu importuri dinamice
  • Activează tree-shaking în build-urile de producție
  • Folosește React.memo și useMemo pentru calcule costisitoare
  • Încarcă leneș componentele necritice

Capcane frecvente

  • Configurarea TypeScript: asigură-te că modul strict este activat
  • Conflicte ESLint + Prettier: folosește eslint-config-prettier pentru a dezactiva regulile conflictuale
  • Build-uri lente: ia în calcul Vite sau esbuild pentru o dezvoltare mai rapidă
  • Definiții de tipuri lipsă: instalează pachetele @types pentru toate dependențele
  • Probleme de depanare: asigură-te că hărțile sursă (source maps) sunt configurate corect

Unelte recomandate

  • Bundlere: Vite, Webpack, Parcel
  • Testare: Jest, React Testing Library, Cypress
  • Linting/Formatare: ESLint, Prettier, Stylelint
  • Documentație: TypeDoc, Storybook
  • Performanță: Web Vitals, Lighthouse