Visual Studio Code, thường được gọi là VS Code, là một trong những trình soạn thảo mã được sử dụng rộng rãi nhất. VS Code có hỗ trợ tích hợp cho Node.js, JavaScript và TypeScript. Tuy nhiên, bạn có thể sử dụng nhiều tiện ích mở rộng khác nhau để làm cho nó có thể truy cập được bằng hầu hết các ngôn ngữ và thời gian chạy khác.
Microsoft là công ty đã phát triển trình soạn thảo mã nguồn mở và miễn phí này.
Những tính năng này làm cho VS Code trở nên phổ biến;
- Intellisense: VS Code cung cấp tính năng tự động hoàn thành mã và tô sáng cú pháp.
- Đa nền tảng: trình soạn thảo mã này có thể được sử dụng trên hệ điều hành Linux, Windows và macOS.
- Tính sẵn có của nhiều tiện ích mở rộng khác nhau: Tính sẵn có của nhiều tiện ích mở rộng khác nhau cũng có thể biến VS Code thành môi trường phát triển tích hợp (IDE).
- Hỗ trợ đa ngôn ngữ: Bạn có thể sử dụng công cụ này với hầu hết tất cả các ngôn ngữ lập trình nhờ tiện ích mở rộng VS Code.
- Thiết bị đầu cuối tích hợp: Thiết bị đầu cuối tích hợp trong VS Code cho phép các nhà phát triển thực thi các lệnh Git trực tiếp từ trình chỉnh sửa mã. Bằng cách này, bạn có thể cam kết, đẩy và kéo các thay đổi từ trình chỉnh sửa này.
Định dạng tự động trong Mã VS
Điều kiện tiên quyết
- Mã VS: Trình chỉnh sửa mã này được tải xuống miễn phí. Nếu bạn chưa cài đặt nó trên máy tính, hãy tải xuống từ trang web chính thức, tùy thuộc vào hệ điều hành của bạn.
- Chọn ngôn ngữ bạn muốn sử dụng: Bạn cần quyết định ngôn ngữ nào bạn muốn sử dụng vì có các trình định dạng khác nhau cho các ngôn ngữ khác nhau.
- Trình định dạng: VS Code sử dụng các phần mở rộng để định dạng mã. Đối với bài viết này, chúng tôi sẽ sử dụng Prettier. Tuy nhiên, bạn có thể sử dụng bất kỳ định dạng nào phù hợp với ngôn ngữ của bạn.
Tự động định dạng là tính năng tự động định dạng khối/dòng mã hoặc tệp trong trình chỉnh sửa mã dựa trên các quy tắc và nguyên tắc được chỉ định. Tính năng này dựa trên tệp cấu hình chỉ định các quy tắc định dạng cho thụt lề, ngắt dòng và giãn cách.
Khi bật định dạng tự động, tất cả các quy tắc này sẽ được áp dụng cho tất cả các tệp trong cơ sở mã khi bạn nhập.
Tuy nhiên, bạn cũng có thể tắt tính năng tự động định dạng cho một khối mã cụ thể nếu bạn muốn nó nổi bật so với phần còn lại. Để đạt được điều này, bạn có thể đặt đoạn mã vào khối nhận xét để chỉ định các quy tắc sẽ được áp dụng.
Lợi ích của việc định dạng mã tự động trong VS Code
- Tiết kiệm thời gian: Việc viết và định dạng mã có thể tốn thời gian. Định dạng tự động giúp bạn tiết kiệm thời gian để có thể tập trung hơn vào quá trình gõ và cú pháp.
- Tính nhất quán: Mặc dù mã nguồn không xuất hiện ở phía máy khách nhưng vẫn cần có sự nhất quán nhất định. Định dạng tự động rất hữu ích, đặc biệt đối với các dự án lớn có nhiều người đóng góp.
- Tuân theo các phương pháp hay nhất: Tính năng tự động định dạng rất hữu ích trong việc thực thi các quy ước thụt lề, khoảng cách và đặt tên nhất quán.
- Đọc mã dễ dàng: Mã được định dạng tốt sẽ dễ theo dõi khi xem lại mã. Các nhà phát triển mới gia nhập tổ chức của bạn sẽ dễ dàng hiểu được mã có định dạng phù hợp.
Cách bật định dạng tự động trong VS Code và tùy chỉnh nó
Hãy làm theo các bước sau để bật định dạng tự động:
Sau khi Prettier được cài đặt trên VS Code, bạn có thể bật tính năng tự động định dạng.
Chúng tôi sử dụng tệp HTML trang đăng nhập đơn giản để trình bày cách bật định dạng tự động.
Chúng tôi sẽ sử dụng mã này:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Mặc dù mã ở trên có chức năng nhưng rất khó đọc và làm theo vì nó không được thụt lề như mong đợi. Chúng ta sẽ sử dụng Prettier để tự động định dạng mã.
Thực hiện theo các bước sau.
3. Gõ Formatter vào thanh tìm kiếm và chọn Prettier trong tab Editor:Default Formatter.
4. Xác định vị trí Trình chỉnh sửa: Định dạng khi lưu và chọn hộp.
5. Lưu tệp HTML, chọn đầu vào trong tài liệu HTML, nhấp chuột phải và chọn Định dạng tài liệu.
6. Kiểm tra xem tài liệu đã được định dạng chưa. Tiện ích mở rộng này sẽ tự động định dạng tất cả các mã khác mà bạn viết trong Mã VS.
6. Tùy chỉnh cấu hình Prettier: Prettier được cấu hình để làm nhiều việc theo mặc định. Tuy nhiên, bạn vẫn có thể tùy chỉnh nó theo nhu cầu của mình. Đi tới Cài đặt trong Mã VS, tìm kiếm Đẹp hơn và điều chỉnh cài đặt theo ý thích của bạn.
7. Tạo tệp cấu hình đẹp hơn: Các cài đặt được định cấu hình trên máy tính của bạn có thể khác với các cài đặt khác nếu bạn làm việc theo nhóm. Tệp cấu hình Prettier sẽ cung cấp kiểu mã nhất quán cho dự án của bạn. Tạo tệp .prettierrc có phần mở rộng .json để định cấu hình cài đặt dự án. Chúng ta có thể thêm mã này vào tệp JSON nhằm mục đích trình diễn;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}Khối mã ở trên chỉ định bốn điều, dấu phẩy ở cuối, độ rộng tab, cách sử dụng dấu chấm phẩy và sử dụng dấu ngoặc đơn hay dấu ngoặc kép. Trong trường hợp này;
- Dấu phẩy ở cuối sẽ chỉ được thêm khi mã được chuyển sang es5.
- Độ rộng của tab, là số khoảng trắng cho mỗi tab, được đặt thành 4.
- Dấu chấm cho biết có nên thêm dấu chấm phẩy vào mã ở cuối câu lệnh hay không. Chúng tôi đặt thành sai, có nghĩa là dấu chấm phẩy sẽ không được thêm vào.
- Bạn có thể sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép trong mã của mình. Chúng tôi đã chỉ định rằng chúng tôi nên sử dụng dấu ngoặc đơn trong dự án này.
Bạn có thể kiểm tra tài liệu Prettier để hiểu cách tạo cài đặt cấu hình nhất quán.
Các phương pháp hay nhất để tự động định dạng trong Mã VS
Sử dụng đúng định dạng
Mặc dù chúng tôi sử dụng Prettier trong bài viết này nhằm mục đích minh họa nhưng điều đó không có nghĩa là nó áp dụng cho tất cả các ngôn ngữ. Có hàng trăm tiện ích mở rộng định dạng cho VS Code và bạn có thể quyết định xem tiện ích mở rộng nào phù hợp với nhu cầu của mình. Ví dụ: các trình định dạng như Prettier và Beautify phù hợp với HTML và CSS. Mặt khác, bạn có thể sử dụng tiện ích mở rộng Black hoặc Python để định dạng mã python của mình.
Sử dụng kiểu mã nhất quán
Như bạn đã thấy, bạn có thể điều chỉnh cài đặt bộ định dạng. Nếu bạn đang làm việc theo nhóm, hãy đảm bảo bạn có cùng cấu hình để tạo kiểu mã nhất quán. Cách tiếp cận tốt nhất là tạo tệp .prettierrc.extension để bao gồm tất cả các cấu hình dự án.
Sử dụng một kẻ nói dối
Linters có thể được sử dụng để kiểm tra các vi phạm về kiểu, lỗi cú pháp và lỗi lập trình trong mã của bạn. Việc kết hợp linters với định dạng tự động sẽ giúp bạn tiết kiệm rất nhiều thời gian và công sức về khả năng đọc và gỡ lỗi mã.
Sử dụng phím tắt
VS Code có hàng trăm phím tắt giúp tiết kiệm thời gian khi định dạng. Bạn thậm chí có thể tùy chỉnh các lệnh này thành một điều gì đó đáng nhớ.
Vui lòng kiểm tra mã của bạn trước khi cam kết
Mặc dù việc tìm lỗi mã nguồn và định dạng tự động có thể giải quyết một số vấn đề với mã của bạn; bạn vẫn cần xem lại mã của mình trước khi nhập lệnh cam kết.
Phím tắt định dạng mã
VS Code là trình soạn thảo mã đa nền tảng có thể được sử dụng trên các hệ thống Windows, Mac và Linux như Ubuntu. Bạn có thể sử dụng các phím tắt bên dưới để định dạng toàn bộ tài liệu hoặc các vùng mã được đánh dấu cụ thể;
các cửa sổ
- Shift + Alt + F định dạng toàn bộ tài liệu.
- Ctrl + K, Ctrl + F định dạng phần mã đã chọn. Ví dụ: div.
Hệ điều hành Mac
- Shift + Option + F định dạng toàn bộ tài liệu.
- Ctrl + K, Ctrl + F định dạng phần mã đã chọn. Ví dụ: div.
Ubuntu
- Ctrl + Shift + I định dạng toàn bộ tài liệu.
- Ctrl + K, Ctrl + F định dạng phần mã đã chọn. Ví dụ: div.
Nhưng hãy lưu ý rằng một số phím tắt này có thể không thành công nếu bạn tùy chỉnh VS Code bằng các phím tắt khác nhau.
Bạn có thể kiểm tra các phím tắt của VS Code bằng cách thực hiện như sau;
- Mở VS Code và nhấp vào mục File ở góc trên bên trái.
- Di chuyển đến Tùy chọn
- Nhấp vào Phím tắt để xem tất cả các phím tắt bạn có thể sử dụng.
Ứng dụng
Tính năng tự động định dạng có thể giúp bạn tiết kiệm rất nhiều thời gian khi được bật. Việc lựa chọn tiện ích mở rộng sẽ khác nhau tùy thuộc vào ngôn ngữ bạn đang sử dụng. Bạn có thể cài đặt nhiều trình định dạng mã tùy thuộc vào ngôn ngữ lập trình được sử dụng trong dự án của bạn.
Luôn kiểm tra tài liệu về trình định dạng bạn chọn cho mã của mình. Điều này sẽ giúp bạn hiểu về các ngôn ngữ mà nó hỗ trợ và cách tận dụng tối đa ngôn ngữ đó.
Hãy xem bài viết của chúng tôi về các tiện ích mở rộng VS Code tốt nhất mà các nhà phát triển nên sử dụng.
