Bộ tạo ESLintrc

Cấu hình được tạo gồm những gì

Bộ tạo luôn bắt đầu từ eslint:recommended và thêm đúng những gì lựa chọn của bạn bao hàm:

• env với browser và/hoặc node, kèm es2022
• @typescript-eslint/parser và plugin:@typescript-eslint/recommended khi TypeScript được bật
• plugin:react/recommended khi React được bật
• no-console và no-unused-vars được đặt thành warn

Kết quả là một đối tượng JSON đơn giản theo dạng .eslintrc.json truyền thống, sẵn sàng để dán và mở rộng bằng các quy tắc của riêng bạn.

So sánh cấu hình phẳng và cấu hình truyền thống

ESLint 9 đã loại bỏ định dạng .eslintrc.* và chuyển sang sử dụng định dạng cấu hình phẳng (eslint.config.js). Các điểm khác biệt chính như sau:

Các dự án mới nên sử dụng cấu hình dạng phẳng. Các dự án hiện có có thể tiếp tục sử dụng phiên bản cũ trong suốt dòng sản phẩm 10.x, nhưng khuyến nghị thực hiện quá trình di chuyển.

Hệ sinh thái plugin

Các plugin điển hình cho dự án React/TS:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Đây là sáu gói cài đặt dành cho một hệ thống có quan điểm nhất định ở mức độ trung bình. Bộ tạo chỉ thêm những plugin bạn chọn, vì vậy bạn chỉ cài đặt những gì cấu hình tham chiếu.

Cùng tồn tại với Prettier

Prettier chịu trách nhiệm về định dạng; ESLint đảm bảo tính chính xác và phong cách không chỉ giới hạn ở việc định dạng. Để tránh xung đột:

1. Cài đặt eslint-config-prettier và thêm nó vào vị trí cuối cùng trong tệp extends/config của bạn.
2. Nó tắt tất cả các quy tắc của ESLint mà mâu thuẫn với kết quả đầu ra của Prettier.
3. Chạy Prettier riêng biệt (khi lưu trong trình soạn thảo, trong bước trước khi ghi nhận, hoặc trong quy trình CI).

Đừng sử dụng eslint-plugin-prettier trong các dự án mới; công cụ này làm chậm tốc độ hoạt động của ESLint do nó chạy Prettier bên trong ESLint. Hãy tách hai công cụ này ra khỏi nhau.

Những mẹo điều chỉnh quy tắc

• Bắt đầu ở mức lỏng, sau đó tăng độ chặt dần. Hãy bật cảnh báo trước khi lỗi xảy ra.
• Ghi đè cho các bài kiểm thử. Các tệp kiểm thử thường yêu cầu chế độ no-unused-expressions được nới lỏng và các biến toàn cục của Jest có sẵn.
• Ghi đè cho các script. Các script xây dựng có thể cần sử dụng các biến toàn cục của Node mà không cần thêm env: node vào toàn bộ hệ thống.
• Ghi chú các thay đổi. Mỗi lần thay đổi quy tắc đều cần có chú thích giải thích lý do.

Cấu hình phù hợp với trình soạn thảo của bạn

VS Code yêu cầu tiện ích mở rộng ESLint đã được cài đặt và cấu hình đúng cách. Hãy thêm các thiết lập này vào môi trường làm việc để tự động sửa lỗi khi lưu file.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}