Hướng dẫn cách format code Visual Studio Code với Prettier

Việc định dạng mã sao cho thống nhất là một thử thách khó khăn đối với đa phần lập trình viên. Prettier chính là công cụ format code Visual Studio Code giúp bạn duy trì sự nhất quán trong toàn bộ cơ sở mã của nhóm. Cùng tìm hiểu cách dùng Prettier để format code trong VS Code qua bài viết dưới đây. 

Hướng dẫn cách format code Visual Studio Code với Prettier
Hướng dẫn cách format code Visual Studio Code với Prettier

Vì sao nên sử dụng Prettier để format code trong Visual Studio Code?

Khi định dạng code, bạn sẽ bắt gặp một số vấn đề khiến code của bạn trông không được đẹp mắt như: 

  • Sự lẫn lộn giữa dấu ngoặc đơn và dấu ngoặc kép
  • Thuộc tính đầu tiên của đối tượng person đáng lẽ phải nằm ở dòng riêng của nó.
  • Lệnh console trong hàm phải được thụt vào
  • Dấu ngoặc tùy chọn bên ngoài tham số của hàm mũi tên có thể không cần thiết.

Prettier là một công cụ để format code tự động. Nó cho phép bạn thống nhất phong cách code chung của cả nhóm để có thể cho ra những đoạn code đẹp, ngay hàng thẳng lối và dễ đọc hơn. 

Cách dùng Prettier để format code Visual Studio Code

Nếu bạn đang sử dụng VS Code thì Prettier chính là một extension lý tưởng để việc định dạng mã trở nên đơn giản hơn. Trước tiên, bạn hãy cài đặt công cụ này trong mục Extensions bằng cách nhấn chọn Install. 

Cài đặt công cụ Prettier trong VS Code
Cài đặt công cụ Prettier trong VS Code

Bước 1: Dùng lệnh định dạng tài liệu

Sau khi đã cài đặt Prettier xong, hãy bắt đầu trải nghiệm nó với lệnh định dạng tài liệu. Lệnh này giúp code của bạn nhất quán hơn thông qua việc điều chỉnh lại khoảng cách, dấu ngoặc bao {} và chuyển dấu ngoặc kép thành dấu ngoặc đơn. 

Bạn nhấn tổ hợp phím Ctrl + Shift + P (nếu dùng Windows) hoặc Command + Shift + P (nếu dùng macOS). Sau đó trong bảng command, bạn tìm format và lựa chọn Format Document.

Tìm và lựa chọn format trong Format Document
Tìm và lựa chọn format trong Format Document

Khi hệ thống hỏi bạn muốn chọn formatter nào, bạn hãy nhấn vào nút Configure…, sau đó chọn Prettier – Code formatter. 

Lưu ý: nếu bạn không nhìn thấy lời nhắc về chọn format mặc định, bạn có thể thay đổi định dạng này ở mục Settings. 

Kết quả bạn nhận được sẽ như thế này:

Kết quả sau khi code của bạn đã được định dạng
Kết quả sau khi code của bạn đã được định dạng

Bước 2: Chạy format code tự động

Thay vì dùng command để format code thủ công, bạn có thể chọn một cài đặt trong Visual Studio Code để định dạng tự động khi lưu. 

Bạn nhấn tổ hợp Ctrl + (nếu dùng Windows) hoặc Command + (nếu dùng macOS) để mở menu Settings. Sau đó bạn tìm kiếm tùy chọn Editor: Format On Save và đảm bảo nó đã được kiểm tra. 

Lúc này, bạn có thể viết code như bình thường và tùy chọn đó sẽ thay bạn định dạng khi lưu tệp. 

Bước 3: Thay đổi cài đặt cấu hình Prettier

Nếu bạn không thích các cài đặt mặc định, bạn hoàn toàn có thể điều chỉnh lại theo ý mình. Bạn mở menu Settings, tìm kiếm Prettier để xem tất cả các cài đặt mà bạn được phép thay đổi như: 

  • Dấu ngoặc kép : bạn có thể chọn giữa ngoặc đơn và ngoặc kép
  • Dấu chấm phẩy: bạn có thể chọn đặt dấu chấm phẩy vào cuối dòng hoặc không
  • Chiều rộng tab: bạn có thể chọn số khoảng trắng mà bạn muốn tab chèn vào
Thay đổi cài đặt cấu hình Prettier
Thay đổi cài đặt cấu hình Prettier

Lưu ý: việc thay đổi tùy chọn này có thể gây ra sự không nhất quán giữa các thành viên khác trong nhóm phát triển của bạn. 

Bước 4: Tạo tệp cấu hình Prettier

Nếu bạn thay đổi cài đặt trong VS Code thì người khác cũng có thể lựa chọn cấu hình cho riêng họ. Vì thế, để tạo sự nhất quán trong cùng một nhóm, bạn cần phải tạo tệp cấu hình Prettier. 

Bạn tạo một file mới và đặt tên là .prettierrc.extension với một trong những extension như yml, yaml, json, js hoặc toml. Sau đó, để kiểm tra lại chi tiết về tệp vừa tạo, bạn vào Prettier Docs. Lúc này, mọi thành viên trong nhóm của bạn có thể dùng dung một format code. 

Ví dụ với tệp cấu hình đơn giản dùng JSON
Ví dụ với tệp cấu hình đơn giản dùng JSON

Tạo ra những dòng code đẹp trong VS Code không hề khó chút nào phải không? Tin chắc rằng, với cách format code Visual Studio Code trên đây, bạn sẽ có được kết quả hoàn hảo đúng như mong muốn. 

Nguồn tham khảo: https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 03, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
4 quyển sách Python tiếng Việt cho người mới bắt đầu

4 quyển sách Python tiếng Việt cho người mới bắt đầu

Bạn muốn tìm hiểu về Python nhưng tìm đâu cũng chỉ thấy sách tiếng Anh? Đừng lo, Got It sẽ dành tặng bạn 4 quyển sách Python tiếng Việt cực kỳ hữu ích ngay trong bài viết này! Cùng khám phá nhé! Mục lụcPython cơ bản… Rất là cơ bản – Võ Tuấn DuyTớ Học […]
5 phương pháp Agile phổ biến trong phát triển phần mềm

5 phương pháp Agile phổ biến trong phát triển phần mềm

Phương pháp Agile đã dần trở thành một xu hướng mới trong việc phát triển phần mềm trên thế giới. Bài viết này sẽ giới thiệu cho các bạn 5 phương pháp Agile hiện phổ biến nhất hiện nay.   Mục lục1. Scrum2. Kaban3. Extreme Programming4. Lean Development5. Crystal 1. Scrum Trong số các framework […]
Tài liệu lập trình Python tiếng Việt tốt nhất hiện nay

Tài liệu lập trình Python tiếng Việt tốt nhất hiện nay

Nếu bạn đang tìm tài liệu lập trình Python tiếng Việt thì hãy tham khảo ngay ebook “Python cơ bản… Rất là cơ bản” của tác giả Võ Duy Tuấn. Đây là tài liệu cung cấp đầy đủ kiến thức Python cơ bản dành cho người Việt. Hãy cùng Got It khám phá tài liệu […]
Lộ trình học lập trình web dành cho người mới bắt đầu

Lộ trình học lập trình web dành cho người mới bắt đầu

Nhiều bạn muốn học lập trình web nhưng chưa biết bắt đầu từ đâu? Lộ trình học lập trình web như thế nào thì hiệu quả? Nếu bạn đang băn khoăn về đề này, hãy tham khảo lộ trình học lập trình web cho người mới bắt đầu dưới đây nhé! Mục lục1. Xác định […]
Clean code là gì? 5 lý do cần code “sạch”

Clean code là gì? 5 lý do cần code “sạch”

Mỗi ngành nghề đều có những cách thực hiện công việc được xem là chuẩn mực. Với lập trình viên, clean code là một trong số đó. Vậy clean code là gì? Hãy cùng Got It đi sâu vào clean code cũng như lý do cần áp dụng clean code nhé! Mục lục1. Clean code […]
6 tip tự học ngôn ngữ lập trình Python hiệu quả

6 tip tự học ngôn ngữ lập trình Python hiệu quả

Tự học ngôn ngữ lập trình Python không phải quá khó, nhưng cũng không hề dễ dàng. Đôi khi, bạn rất dễ nản, chểnh mảng học tập do không có người đốc thúc. Vậy thế nào để học ngôn ngữ này thật hiệu quả? Hãy cùng Got It tìm hiểu 6 tip tự học Python […]