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:
Tran Thuy Vy
Mình sẽ không chết vì những điều mình không biết, nhưng sẽ chết vì những điều mình tưởng rằng mình biết
follow me :
Bài viết liên quan
Remix là gì? Framework Full-Stack cho Web Developer
Oct 03, 2024 • 7 min read
Full bộ source code: Simple Task Microservices
Oct 02, 2024 • 1 min read
Microservices là gì? So sánh Microservices và Monolithic
Sep 30, 2024 • 10 min read
Fluentd là gì? So sánh Fluentd và Logstash
Sep 29, 2024 • 11 min read
Expressjs là gì? Framework phổ biến nhất cho Node.js
Sep 28, 2024 • 9 min read
Nginx là gì? Web Server đa năng cho các Hệ thống lớn
Sep 27, 2024 • 11 min read