Sử dụng Prettier kết hợp với ESlint

Để sử dụng Prettier kết hợp với ESLint, bạn cần cài đặt cả hai và cấu hình chúng để làm việc cùng nhau. Dưới đây là các bước cơ bản:

1. Cài đặt Prettier và ESLint:

npm install --save-dev prettier eslint

2. Cài đặt plugin ESLint cho Prettier:

npm install --save-dev eslint-plugin-prettier

3. Cài đặt config Prettier cho ESLint:

npm install --save-dev eslint-config-prettier

4. Trong file .eslintrc.json của bạn, thêm prettier vào phần extends và plugins:

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

5. Tạo một file .prettierrc để cấu hình Prettier. Ví dụ:

{
  "singleQuote": true,
  "semi": false
}

6. Đảm bảo rằng bạn đã cài đặt các extension ESLint và Prettier trong Visual Studio Code.
7. Trong cài đặt của Visual Studio Code, bật editor.formatOnSave để tự động format code khi bạn lưu file.

{
  "editor.formatOnSave": true
}

Bây giờ, khi bạn lưu file, ESLint sẽ chạy Prettier để format code của bạn.

Enjoy it!