Trong quá trình phát triển dự án, ngoài việc code hoạt động tốt thì một trong những thách thức là làm thế nào để giữ cho mã nguồn được format đúng chuẩn và đồng bộ trong suốt thời gian build dự án. Đây cũng chính là lý mà Prettier ra đời, hãy cùng mình tìm hiểu qua bài viết này nhé.

1. Prettier là gì?

Prettier là một là một thư viện định dạng code mã nguồn mở, tự động sắp xếp và định dạng code theo chuẩn thống nhất, giúp đảm bảo mọi developer trong nhóm đều tuân thủ một quy tắc định dạng chung, tăng tính nhất quán và chất lượng cho mã nguồn.

2. Tại sao cần sử dụng Prettier?

Khi bạn tham gia phát triển dự án, đặc biệt là dự án lớn với nhiều dev, việc định dạng code thường sẽ có các vấn đề như:

• Mâu thuẫn về quy tắc định dạng: mỗi dev sẽ có sở thích định dạng khác nhau, dẫn đến sự không nhất quán trong code.
• Khó khăn trong việc review: code không đồng nhất làm cho việc review code trở nên khó khăn, tốn thời gian hơn.
• Tốn thời gian cho việc định dạng thủ công: thử tưởng tượng bạn ngồi nguyên ngày chỉ để tab từng dòng code cho hợp lý, rất nhàm chán và mất tập trung vào công việc.

Prettier ra đời giúp bạn giải quyết tất cả những vấn đề này:

• Tự động định dạng: đảm bảo code luôn theo chuẩn một cách tự động.
• Giảm mâu thuẫn trong team: tất cả dev đều phải tuân theo quy tắc định dạng duy nhất.
• Tăng tốc độ code review: khi code đã được định dạng, việc review code sẽ trở nên nhanh chóng.

3. Ưu, nhược điểm khi sử dụng Prettier

3.1 Ưu điểm sử dụng Prettier

Sử dụng Prettier mang lại nhiều lợi ích:

• Tiết kiệm thời gian: không cần phải định dạng code thủ công, tập trung hơn vào việc giải quyết vấn đề chính.
• Tăng tính nhất quán: giúp code luôn có định dạng nhất quán, dễ đọc và dễ bảo trì.
• Lead team review dễ dàng: giảm thiểu các vấn đề liên quan đến định dạng code, giúp quá trình review nhanh chóng.
• Tăng năng suất: dev có thể làm việc hiệu quả hơn, tránh lãng phí thời gian cho những chi tiết nhỏ nhặt.

3.2 Nhược điểm sử dụng Prettier

Mặc dù Prettier mang lại nhiều lợi ích, nhưng không phải là không có nhược điểm:

• Hạn chế tùy chỉnh: do Prettier là một "opinionated formatter", nghĩa là nó có một bộ quy tắc định dạng cứng, không phù hợp với mọi dự án hoặc sở thích của mỗi dev.
• Đôi khi làm chậm quá trình làm việc: khi áp dụng Prettier trên các dự án lớn hoặc với các file có dung lượng lớn, quá trình định dạng có thể mất chút ít thời gian.
• Có thể gây xung đột với các quy tắc khác: Khi kết hợp với ESLint hoặc Stylelint, bạn cần phải cẩn thận cấu hình để tránh xung đột giữa các quy tắc.

4. Hướng dẫn cấu hình Prettier trong dự án Typescript

4.1 Khởi tạo dự án

npm init -y
npm install typescript --save-dev
npx tsc --init

Đây là cấu hình file tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

4.2 Cài đặt Prettier

npm install --save-dev prettier

Prettier hỗ trợ nhiều loại file cấu hình như .prettierrc, .prettierrc.json, .prettierrc.js, .prettierrc.yaml, hoặc prettier.config.js.

Ở ví dụ này, mình sẽ tạo file .prettierrc trong thư mục gốc của dự án và thêm các tùy chọn định dạng. Đây là ví dụ về file .prettierrc phổ biến cho một dự án TypeScript:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

• "semi": true: thêm dấu phẩy ở cuối các câu lệnh
• "trailingComma": "all": thêm dấu phẩy ở các phần tử cuối.
• "singleQuote": true: sử dụng dấu nháy đơn ' thay vì dấu nháy kép "
• "printWidth": 80: giới hạn độ dài một dòng
• "tabWidth": 2: độ rộng của một tab, mình thấy thường thì là 2 hoặc 4, các dự án mình thường để 2.
• "useTabs": false: sử dụng khoảng trắng thay vì tab

Bạn cũng có thể tạo file .prettierignore để chỉ định các file hoặc thư mục mà bạn muốn Prettier bỏ qua. Ví dụ này, mình sẽ bỏ qua không cần định dạng các folder: node_modules, dist, build

Cuối cùng, mình sẽ mở file package.json và thêm script chạy Prettier, để định dạng toàn bộ code của dự án bằng một câu lệnh duy nhất.

{
  "scripts": {
    "format": "prettier --write ."
  }
}

Chạy npm run format để trải nghiệm thôi nào.

5. Tích hợp Prettier với VSCode

Ngoài việc bạn có thể cấu hình vào trong dự án, thì bạn cũng có thể cài extension vào VSCode để sử dụng nhé. Nhưng mình có một chút lưu ý, nếu bạn sử dụng thì nên tuỳ chỉnh lại extension cho phù hợp với trong dự án để tránh việc thay đổi format không cần thiết.

B1: Cài đặt extension "Prettier - Code formatter" từ Marketplace.

B2: Mở Settings và tìm kiếm "Format On Save". Bạn bật tùy chọn này để Prettier tự động định dạng code mỗi khi bạn lưu file.

6. Kết luận

Prettier sẽ giúp bạn đảm bảo code trong dự án luôn theo một chuẩn, nhất quán, dễ đọc, và dễ bảo trì. Hy vọng qua bài viết này, bạn đã hiểu hơn về Prettier cũng như cấu hình nó trong dự án Typescript.

Một số bài viết bạn có thể quan tâm tại 200Lab:

• Jest là gì? Hướng dẫn cấu hình Jest với Typescript
• ESLint là gì? Hướng dẫn cấu hình ESLint cho dự án Typescript
• Hướng dẫn Upload Images lên S3 sử dụng Typescript
• Lập trình REST API TODO List với Typescript Express
• Hướng dẫn Typescript Syntax cơ bản cho Người mới - Phần 1