Cấu hình Vite với ESLint và Prettier cho các dự án React

Việc thiết lập một dự án React hiện đại không chỉ đơn thuần là tạo một boilerplate; nó đòi hỏi một nền tảng vững chắc, có thể thực thi để đảm bảo chất lượng và tính nhất quán của mã. Vite đã khẳng định vị thế là công cụ build hàng đầu cho các ứng dụng web hiện đại, mang lại tốc độ phát triển vượt trội và hệ thống cấu hình trực quan. Tuy nhiên, việc tích hợp nó với bối cảnh công cụ chất lượng mã đang phát triển – đặc biệt là hệ thống Flat Config mới của ESLint và biên dịch TypeScript nghiêm ngặt – có thể gây ra thách thức ngay cả đối với các nhà phát triển dày dặn kinh nghiệm.

Trong hướng dẫn toàn diện này, chúng ta sẽ xây dựng một quy trình linting và định dạng hiện đại, cực kỳ nghiêm ngặt bằng cách sử dụng Vite, ESLint Flat Config (eslint.config.js), Prettier và TypeScript. Cách tiếp cận này từ bỏ các định dạng .eslintrc cũ để ủng hộ Flat Config thống nhất và mô-đun, đảm bảo cấu hình của bạn có khả năng chống chịu trong tương lai và hiệu suất cao.

Sự thay đổi mô hình: ESLint Flat Config

Trước đây, cấu hình ESLint dựa vào hệ thống phân giải xếp tầng sử dụng các tệp .eslintrc, điều này thường dẫn đến sự nhầm lẫn khi nhiều tệp cấu hình áp dụng cho cùng một thư mục. Hệ thống Flat Config đã đại tu hoàn toàn điều này bằng cách sử dụng một tệp eslint.config.js duy nhất (hoặc .mjs/.cjs) ở thư mục gốc của dự án. Hệ thống này đánh giá một mảng các đối tượng cấu hình theo trình tự, cung cấp một cách tiếp cận xác định và có lập trình để định nghĩa các quy tắc.

Hệ thống Flat Config loại bỏ sự phức tạp của việc phân giải extends và plugins, thay thế chúng bằng các import JavaScript tiêu chuẩn. Sự thay đổi mô hình này có nghĩa là chúng ta xây dựng các quy tắc linting của mình dưới dạng các đối tượng JavaScript tiêu chuẩn, cung cấp tính an toàn kiểu và nguồn gốc rõ ràng hơn của các định nghĩa quy tắc.

Khởi tạo dự án

Đầu tiên, hãy khởi tạo một dự án Vite mới với template React và TypeScript.

npm create vite@latest modern-react-app -- --template react-ts
cd modern-react-app
npm install

Với nền tảng đã được đặt, chúng ta phải cài đặt các dependency cần thiết cho quy trình linting và định dạng của mình. Bởi vì chúng ta đang nhắm mục tiêu đến Flat Config hiện đại, chúng ta cần các phiên bản ESLint mới nhất và các plugin TypeScript và React liên quan.

npm install -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh @eslint/js typescript-eslint globals

Xây dựng ESLint Flat Config

Tạo một tệp eslint.config.js ở thư mục gốc của dự án. Tệp này sẽ xuất một mảng các đối tượng cấu hình. Chúng ta sẽ tận dụng typescript-eslint để kết nối ESLint và AST của TypeScript, cho phép chúng ta thực thi các quy tắc linting nhận biết kiểu.

import js from '@eslint/js';
import globals from 'globals';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';
import reactRefreshPlugin from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';

export default tseslint.config(
  // Base Ignore Configuration
  { ignores: ['dist', 'node_modules', 'coverage', 'vite.config.ts'] },
  
  // Base JavaScript rules
  js.configs.recommended,
  
  // TypeScript Configuration (Strict + Type Checked)
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.app.json', './tsconfig.node.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  
  // React and Environment Configuration
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2023,
      sourceType: 'module',
      globals: {
        ...globals.browser,
        ...globals.es2021,
      },
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    plugins: {
      react: reactPlugin,
      'react-hooks': reactHooksPlugin,
      'react-refresh': reactRefreshPlugin,
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      ...reactPlugin.configs['jsx-runtime'].rules,
      ...reactHooksPlugin.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      // Strict React Rules
      'react/prop-types': 'off', // Rely on TypeScript instead
      'react/no-array-index-key': 'error', // Prevent subtle rendering bugs
      'react/jsx-pascal-case': 'error',
      'react/jsx-no-useless-fragment': 'warn',
    },
  },
  
  // Prettier Integration (Must be last to override formatting rules)
  prettierConfig
);

Phân tích cấu hình

1. Linting nhận biết kiểu: Bằng cách sử dụng tseslint.configs.strictTypeChecked, chúng ta kích hoạt các quy tắc sử dụng trình kiểm tra kiểu của TypeScript. Điều này yêu cầu chỉ định thuộc tính project trong parserOptions, trỏ đến cấu hình TypeScript của chúng ta. Thiết lập này phát hiện các lỗi kiến trúc sâu, chẳng hạn như các kiểu any không an toàn, các promise nổi và cách sử dụng template literal không chính xác.
2. React 17+ JSX Transform: Việc bao gồm reactPlugin.configs['jsx-runtime'].rules đảm bảo ESLint hiểu được JSX transform hiện đại, ngăn chặn các lỗi dương tính giả cho các import React bị thiếu.
3. React Refresh: Cơ chế Fast Refresh của Vite dựa vào các export component có thể dự đoán được. Quy tắc react-refresh/only-export-components đảm bảo rằng các module chứa component chỉ export component, đảm bảo Fast Refresh hoạt động đáng tin cậy.
4. Tích hợp Prettier: Plugin eslint-config-prettier được thêm vào cuối mảng. Hệ thống Flat Config đánh giá các đối tượng theo trình tự, có nghĩa là đối tượng cuối cùng sẽ được ưu tiên. Điều này vô hiệu hóa hiệu quả bất kỳ quy tắc ESLint nào có thể xung đột với các quy tắc định dạng của Prettier.

Cấu hình Prettier

Prettier yêu cầu cấu hình tối thiểu, nhưng việc chuẩn hóa nó đảm bảo tính nhất quán trên các môi trường phát triển. Tạo một tệp .prettierrc trong thư mục gốc:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 90,
  "tabWidth": 2,
  "endOfLine": "lf",
  "jsxSingleQuote": false,
  "arrowParens": "always"
}

Ngoài ra, hãy định nghĩa một tệp .prettierignore để loại trừ các tài sản được tạo và các tệp cấu hình:

dist
coverage
node_modules
*.html
vite.config.ts

Thực thi TypeScript nghiêm ngặt

Để tối đa hóa lợi ích của linting nhận biết kiểu, cấu hình TypeScript của bạn phải nghiêm ngặt tương đương. Sửa đổi tsconfig.app.json của bạn (theo tiêu chuẩn của các template Vite gần đây) để thực thi kiểm tra kiểu nghiêm ngặt:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Strict Type-Checking Options */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUncheckedIndexedAccess": true, // Highly recommended for array access safety
    "exactOptionalPropertyTypes": true
  },
  "include": ["src"]
}

Việc bổ sung noUncheckedIndexedAccess là rất quan trọng. Nó buộc các nhà phát triển phải xử lý các trường hợp không xác định khi truy cập các phần tử mảng hoặc bản ghi theo chỉ mục, thu hẹp khoảng cách phổ biến giữa phân tích tĩnh của TypeScript và thực tế thời gian chạy.

Tích hợp với Vite

Trong khi tích hợp IDE xử lý linting nội tuyến, việc tích hợp ESLint trực tiếp vào quy trình build của Vite đảm bảo rằng các pipeline CI/CD và các bản build sản xuất sẽ thất bại nếu lỗi linting vẫn còn.

Để đạt được điều này, chúng ta có thể sử dụng vite-plugin-eslint. Tuy nhiên, với việc chuyển sang Flat Config, bạn phải đảm bảo plugin hoặc một plugin rollup tùy chỉnh hỗ trợ ESLint 9+ và API Flat Config. Ngoài ra, việc thực thi linting như một bước tiền build là một cách tiếp cận rất mạnh mẽ.

Cập nhật các script package.json của bạn:

{
  "scripts": {
    "dev": "vite",
    "build": "npm run typecheck && npm run lint && vite build",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"",
    "typecheck": "tsc --noEmit -p tsconfig.app.json && tsc --noEmit -p tsconfig.node.json",
    "preview": "vite preview"
  }
}

Trình tự này đảm bảo rằng npm run build sẽ thực hiện kiểm tra kiểu và linting trước khi cố gắng đóng gói ứng dụng. Nếu bất kỳ quy tắc kiểu nghiêm ngặt hoặc chính sách linting nào bị vi phạm, bản build sẽ bị hủy bỏ.

Kết luận

Việc chuyển sang Flat Config của ESLint cùng với Vite và Prettier thiết lập một tiêu chuẩn dứt khoát cho phát triển React hiện đại. Bằng cách tập trung mạnh vào linting nhận biết kiểu thông qua typescript-eslint và thực thi các tùy chọn trình biên dịch TypeScript nghiêm ngặt, các nhóm có thể chủ động loại bỏ toàn bộ các loại lỗi thời gian chạy. Cấu hình này cung cấp một nền tảng xác định, hiệu suất cao và có khả năng chống chịu trong tương lai, cho phép các nhà phát triển tập trung vào sự phức tạp của kiến trúc thay vì tranh luận về kiểu mã hoặc theo đuổi các lỗi kiểu tinh vi.

Bạn cũng có thể thích

• So sánh quản lý trạng thái Zustand vs Jotai
• Bắt đầu với Katalon Studio + Tự động hóa Bootstrap Date Pickers
• Tương lai của thiết kế hệ thống với micro-frontends
• Bảng màu tôi thực sự sử dụng thay vì mặc định của Tailwind