Prettier là gì? Công cụ Định dạng mã nguồn tự động cho Lập trình viên

Trong lĩnh vực phát triển phần mềm, việc đảm bảo mã nguồn không chỉ hoạt động hiệu quả mà còn được định dạng một cách nhất quán là điều cần thiết. Điều này đặc biệt quan trọng đối với các dự án lớn với đội ngũ phát triển đông đảo. Chính vì vậy, Prettier đã ra đời như một giải pháp tối ưu giúp tự động hóa quy trình định dạng mã nguồn, từ đó nâng cao hiệu quả làm việc của cả nhóm. Hãy cùng tìm hiểu chi tiết về Prettier và cách nó có thể biến đổi quy trình phát triển của bạn.

1. Prettier là gì?

Table of Contents

Prettier là một thư viện định dạng mã nguồn mở, có nhiệm vụ tự động sắp xếp và định dạng mã theo quy chuẩn thống nhất. Điều này đảm bảo rằng tất cả các lập trình viên trong đội đều tuân theo một quy tắc định dạng chung, từ đó nâng cao tính nhất quán và chất lượng mã nguồn.

Khái niệm Prettier

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

Khi tham gia vào các dự án phát triển phần mềm, đặc biệt là những dự án quy mô lớn, các lập trình viên thường gặp phải một số thách thức sau:

Mâu thuẫn giữa các quy tắc định dạng: Mỗi lập trình viên có thể có sở thích định dạng riêng, dẫn đến tình trạng mã nguồn không đồng nhất.
Khó khăn trong việc xem xét mã: Việc duyệt mã nguồn trở nên tốn thời gian nếu mã không đồng nhất.
Tốn thời gian cho định dạng thủ công: Việc dành hàng giờ chỉ để chỉnh sửa định dạng có thể khiến lập trình viên mất tập trung vào các nhiệm vụ quan trọng hơn.

Prettier giúp giải quyết các vấn đề này thông qua:

Tự động định dạng mã: Mã luôn được định dạng theo chuẩn một cách tự động.
Giảm thiểu mâu thuẫn trong nhóm: Tất cả lập trình viên đều phải tuân thủ cùng một quy tắc định dạng.
Tăng tốc độ kiểm tra mã: Việc rà soát mã dễ dàng hơn khi mã đã được định dạng một cách thống nhất.

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

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

Việc sử dụng Prettier giúp mang lại nhiều lợi ích như:

Tiết kiệm thời gian: Bạn không cần tốn công sức để định dạng mã thủ công, có thể tập trung vào giải quyết vấn đề chính.
Tăng tính nhất quán: Đảm bảo rằng mã luôn có định dạng dễ đọc và dễ bảo trì.
Dễ dàng kiểm tra mã: Giảm thiểu các vấn đề liên quan đến định dạng, làm cho quá trình duyệt mã nhanh hơn.
Tăng năng suất: Lập trình viên có thể làm việc hiệu quả hơn, tránh lãng phí thời gian vào những chi tiết nhỏ nhặt.

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

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

Mặc dù Prettier sở hữu nhiều ưu điểm, nhưng cũng tồn tại một số nhược điểm:

Hạn chế khả năng tùy chỉnh: Prettier là một “opinionated formatter”, tức có một bộ quy tắc định dạng cứng, có thể không phù hợp với tất cả dự án hoặc sở thích của từng lập trình viên.
Có thể làm chậm quá trình làm việc: Đối với các dự án lớn hoặc file mã có dung lượng lớn, quá trình định dạng có thể mất thêm thời gian.
Xung đột với các quy tắc khác: Khi kết hợp với các công cụ như ESLint hoặc Stylelint, cần cẩn thận trong việc cấu hình để tránh mâu thuẫn giữa các quy tắc.

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

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

4.1 Khởi tạo dự án

Đầu tiên, bạn cần khởi tạo dự án TypeScript bằng cách sử dụng các lệnh sau:

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

Dưới đây là cấu hình cho file tsconfig.json:

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

4.2 Cài đặt Prettier

Để cài đặt Prettier, thực hiện lệnh:

npm install --save-dev prettier

Prettier hỗ trợ nhiều loại file cấu hình khác nhau như .prettierrc, .prettierrc.json, .prettierrc.js, .prettierrc.yaml, hoặc prettier.config.js. Bạn có thể 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 như sau:

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

"semi": true: thêm dấu chấm phẩy ở cuối câu lệnh.
"trailingComma": "all": thêm dấu phẩy ở cuối các phần tử.
"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, thường được đặt là 2 hoặc 4.
"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.

Cuối cùng, mở file package.json và thêm script để chạy Prettier, bạn có thể định dạng toàn bộ mã chỉ bằng một lệnh:

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

Chạy lệnh npm run format để trải nghiệm.

npm run format with prettier

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

Ngoài việc cấu hình trong dự án, bạn cũng có thể cài đặt extension Prettier vào VSCode để sử dụng. Tuy nhiên, nếu cài đặt, hãy lưu ý điều chỉnh các thiết lập của extension phù hợp với dự án của bạn.

Cài đặt extension “Prettier – Code formatter” từ Marketplace.

Prettier Extension

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

Format khi save

6. Kết luận

Prettier là một công cụ mạnh mẽ giúp bạn đảm bảo mã trong dự án luôn được định dạng theo chuẩn thống nhất, dễ đọc và dễ bảo trì. Hy vọng bài viết này đã giúp bạn có cái nhìn rõ hơn về Prettier và quy trình cấu hình nó trong dự án TypeScript của bạn.

Nếu bạn quan tâm đến các chủ đề khác liên quan đến phát triển phần mềm, hãy ghé thăm website của chúng tôi tại comdy.vn để khám phá thêm nhiều bài viết hữu ích!

blog