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 của 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

Đọc trước:

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. 


Got It Vietnam – Tham khảo

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.

https://vn.got-it.ai/blog/wp-content/uploads/2021/04/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
May 02, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Hướng dẫn cách sử dụng Visual Studio Code căn bản

Hướng dẫn cách sử dụng Visual Studio Code căn bản

Nhanh, gọn nhẹ, đa năng và hoạt động mạnh mẽ trên đa nền tảng là những ưu điểm nổi trội của trình soạn thảo VS Code. Cách sử dụng Visual Studio Code cơ bản sẽ được hướng dẫn cụ thể trong bài viết dưới đây. Mục lụcVisual Studio Code là gì và dành cho ai?Phiên […]
Visual Studio Code là gì? Lợi thế từ việc sử dụng Visual Studio Code

Visual Studio Code là gì? Lợi thế từ việc sử dụng Visual Studio Code

Visual Studio Code là gì mà khiến cộng đồng IT Việt yêu thích đến vậy? Có rất nhiều lợi ích khi sử dụng công cụ này trong xây dựng ứng dụng web và cloud mà bạn không thể bỏ qua.  Mục lụcVisual Studio Code là gì?Phân biệt Visual Studio Code và Visual StudioLý do bạn […]
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

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 của 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 […]
Cách sử dụng phím tắt sắp xếp code trong Visual Studio Code

Cách sử dụng phím tắt sắp xếp code trong Visual Studio Code

Chỉ với một vài thao tác đơn giản với phím tắt sắp xếp code trong Visual Studio Code, bạn đã có thể tạo ra một đoạn mã đẹp mắt, ngay ngắn và dễ đọc. Cùng tìm hiểu về cách sử dụng phím tắt này và khám phá thêm một vài phím tắt hữu ích khách […]
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 […]