Hướng dẫn chi tiết cài đặt Prettier VS Code để tự động format code hiệu quả

Việc duy trì một codebase sạch sẽ, nhất quán là yếu tố then chốt trong phát triển phần mềm, đặc biệt khi làm việc nhóm. Code không được định dạng thống nhất có thể gây khó khăn trong việc đọc hiểu, review và bảo trì. May mắn thay, với sự trợ giúp của các công cụ như Prettier, việc này trở nên dễ dàng hơn bao giờ hết. Bài viết này sẽ hướng dẫn bạn chi tiết cách cài đặt Prettier VS Code, một trong những trình soạn thảo mã phổ biến nhất hiện nay, để tự động format code, giúp bạn tiết kiệm thời gian và nâng cao chất lượng code.

Nội dung chính

Prettier là gì và tại sao bạn nên sử dụng?

Prettier là một công cụ định dạng mã nguồn (code formatter) tự động, hỗ trợ nhiều ngôn ngữ lập trình phổ biến như JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown, và nhiều hơn nữa. Nó tự động áp dụng các quy tắc định dạng đã được định nghĩa trước, đảm bảo code của bạn luôn tuân theo một chuẩn thống nhất.

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

Đảm bảo tính nhất quán: Mọi người trong nhóm đều tuân theo cùng một kiểu định dạng code, loại bỏ các tranh cãi không cần thiết về style.
Tiết kiệm thời gian: Bạn không cần phải tốn thời gian tự tay căn chỉnh code. Prettier sẽ làm điều đó tự động.
Phát hiện lỗi sớm: Đôi khi lỗi cú pháp có thể được phát hiện trong quá trình format.
Cải thiện khả năng đọc code: Code được định dạng rõ ràng giúp dễ đọc và dễ hiểu hơn.
Tích hợp dễ dàng: Prettier có thể tích hợp vào quy trình làm việc hiện tại của bạn, bao gồm cả các trình soạn thảo mã và hệ thống CI/CD.

Việc cài đặt Prettier VS Code là bước đầu tiên để tận hưởng những lợi ích này.

Hướng dẫn cài đặt Prettier trong VS Code

Quá trình cài đặt extension Prettier trong Visual Studio Code rất đơn giản. Hãy làm theo các bước sau:

Mở Visual Studio Code.
Nhấn vào biểu tượng Extensions trên thanh sidebar bên trái (hoặc sử dụng phím tắt Ctrl+Shift+X).
Trong ô tìm kiếm, nhập “Prettier – Code formatter“.
Tìm extension có tên “Prettier – Code formatter” được phát triển bởi Prettier.
Nhấn nút “Install” để cài đặt extension.

[Gợi ý: Chèn ảnh/video hướng dẫn tìm và cài đặt extension Prettier – Code formatter trong VS Code tại đây]

Sau khi cài đặt thành công, bạn cần cấu hình để Prettier hoạt động theo ý muốn.

Cấu hình Prettier để tự động format code khi lưu

Mặc dù bạn có thể format code thủ công bằng cách mở Command Palette (Ctrl+Shift+P), tìm “Format Document” và chọn nó, nhưng cách hiệu quả nhất là để VS Code tự động format mỗi khi bạn lưu file. Đây là cách thiết lập:

Mở Settings của VS Code bằng cách nhấn Ctrl+, (dấu phẩy) hoặc vào File > Preferences > Settings.
Trong ô tìm kiếm Settings, nhập “Format On Save“.
Đánh dấu tick vào ô “Editor: Format On Save”. Thao tác này sẽ yêu cầu VS Code tự động định dạng lại toàn bộ file mỗi khi bạn lưu (Ctrl+S).
Tiếp theo, bạn cần đảm bảo VS Code sử dụng Prettier làm trình định dạng mặc định cho các ngôn ngữ được hỗ trợ. Trong ô tìm kiếm Settings, nhập “Default Formatter“.
Tìm cài đặt “Editor: Default Formatter” và chọn “Prettier – Code formatter” từ danh sách thả xuống. Nếu bạn không thấy tùy chọn này, hãy chắc chắn rằng bạn đã cài đặt thành công extension ở bước trước.

[Gợi ý: Chèn ảnh/video hướng dẫn cấu hình Format On Save và Default Formatter trong VS Code Settings tại đây]

Bây giờ, mỗi khi bạn lưu một file (ví dụ: file .js, .css, .html), Prettier sẽ tự động chạy và định dạng lại code của bạn theo các quy tắc mặc định của nó.

Tùy chỉnh quy tắc định dạng của Prettier (Nâng cao)

Prettier đi kèm với một bộ quy tắc định dạng mặc định khá tốt, nhưng bạn hoàn toàn có thể tùy chỉnh chúng cho phù hợp với sở thích hoặc yêu cầu của dự án. Cách phổ biến nhất để làm điều này là tạo một file cấu hình Prettier trong thư mục gốc của dự án.

Các tên file cấu hình được hỗ trợ bao gồm:

.prettierrc.json
.prettierrc.yaml
.prettierrc.js
.prettierrc.toml
prettier.config.js

Ví dụ, bạn có thể tạo file .prettierrc.json với nội dung sau để thay đổi một số quy tắc:

{
  "tabWidth": 2,         // Sử dụng 2 dấu cách thay vì tab (mặc định là 2)
  "useTabs": false,       // Không sử dụng tab để thụt lề
  "singleQuote": true,    // Sử dụng dấu nháy đơn thay vì nháy kép cho chuỗi
  "semi": true,           // Luôn thêm dấu chấm phẩy ở cuối câu lệnh
  "trailingComma": "es5", // Thêm dấu phẩy cuối cùng trong object, array,... theo chuẩn ES5
  "bracketSpacing": true // Thêm khoảng trắng bên trong dấu ngoặc nhọn: { foo: bar }
}

Prettier sẽ tự động phát hiện và sử dụng file cấu hình này cho dự án của bạn. Bạn có thể tham khảo danh sách đầy đủ các tùy chọn cấu hình trên tài liệu chính thức của Prettier.

Sử dụng Prettier hiệu quả trong dự án

Để tối ưu hóa việc sử dụng Prettier:

Tạo file .prettierignore: Tương tự như .gitignore, bạn có thể tạo file .prettierignore để liệt kê các file hoặc thư mục mà bạn không muốn Prettier format (ví dụ: các file thư viện bên ngoài, file build).
Kết hợp với ESLint: Prettier chỉ tập trung vào định dạng code, trong khi ESLint giúp phân tích và tìm lỗi logic, code style. Kết hợp cả hai công cụ này (ví dụ: dùng eslint-config-prettier để tắt các quy tắc xung đột) sẽ giúp codebase của bạn vừa sạch đẹp vừa chất lượng. Bạn có thể xem thêm về ESLint tại bài viết này.
Tích hợp vào CI/CD: Chạy Prettier kiểm tra (check) trong quy trình CI/CD để đảm bảo code được commit lên repository luôn tuân thủ định dạng chuẩn.

Kết luận

Việc cài đặt Prettier VS Code và cấu hình tự động format code là một bước đơn giản nhưng mang lại hiệu quả lớn cho quá trình phát triển phần mềm. Nó không chỉ giúp code của bạn trông chuyên nghiệp và nhất quán hơn mà còn tiết kiệm đáng kể thời gian và công sức, cho phép bạn tập trung vào việc giải quyết các vấn đề logic phức tạp hơn. Hãy dành vài phút để thiết lập Prettier ngay hôm nay và trải nghiệm sự khác biệt!