8 phần mở rộng mã Visual Studio mạnh mẽ cho nhà phát triển Front-end

Mặc dù Microsoft đã phát hành phiên bản ổn định đầu tiên của Visual Studio Code, trình chỉnh sửa mã mạnh mẽ của nó chỉ một vài tháng trước, vào tháng 3 năm 2016, nó đã có nhiều tiện ích mở rộng có thể đưa trải nghiệm mã hóa lên cấp độ tiếp theo. Các phần mở rộng chính thức của Visual Studio Code được lưu trữ trong Thị trường mã Visual Studio, nhiều trong số đó có thể là một trợ giúp tuyệt vời cho các nhà phát triển web.

Đối với bài đăng này, tôi đã thử nghiệm một loạt các tiện ích mở rộng Mã VS liên quan đến phát triển giao diện người dùng và lập danh sách những tiện ích tôi tìm thấy nhiều nhất trực quan, dễ sử dụng và thuận tiện. Đây không phải là một danh sách cuối cùng. Dành thời gian để tự tìm kiếm thị trường và xem những gì nó có thể cung cấp cho bạn, đặc biệt là vì nhiều tiện ích mở rộng tuyệt vời vẫn chưa đến.

Cách cài đặt phần mở rộng mã VS

Cài đặt tiện ích mở rộng khá đơn giản trong Visual Studio Code, như bạn có thể làm điều đó trong trình soạn thảo mã. Trong Thị trường mã VS, mọi tiện ích đều có trang riêng và bạn có thể tìm thấy lệnh bạn có thể cài đặt tiện ích mở rộng đã cho ở trên cùng của trang này.

Lệnh luôn bắt đầu bằng cài đặt máy lẻ kỳ hạn. Để cài đặt tiện ích mở rộng, chỉ cần nhấn CTRL + P bên trong Mã VS để bắt đầu bảng Mở nhanh, sao chép-dán lệnh này vào nó, và cuối cùng khởi động lại trình chỉnh sửa mã để làm cho phần mở rộng mới hoạt động.

8 phần mở rộng mã Visual Studio mạnh mẽ

1. Đoạn mã HTML

   Nếu bạn muốn thường xuyên viết HTML bằng Visual Studio Code, tiện ích mở rộng HTML Snippets có thể trở thành một công cụ tiện dụng, vì nó thêm hỗ trợ công phu cho HTML. Mặc dù Mã VS có hỗ trợ cơ bản cho HTML, chẳng hạn như cú pháp tô màu, tiện ích mở rộng HTML Snippets biết nhiều hơn.

   

   Có lẽ tính năng hữu ích nhất của tiện ích mở rộng này là khi bạn bắt đầu nhập tên của thẻ HTML (không có khung góc bắt đầu), HTML Snippets nhanh chóng hiển thị một danh sách trong số các tùy chọn có sẵn với một thông tin ngắn về mỗi.

   

   Khi bạn nhấp vào yếu tố bạn cần, HTML Snippets sẽ thêm thẻ HTML5 đầy đủ với các thuộc tính phổ biến nhất. Ví dụ: nếu bạn muốn thêm một liên kết (thẻ neo) vào tài liệu của mình, chỉ cần nhập một một vào Mã VS, chọn tùy chọn phù hợp trong hộp bật lên và Đoạn mã HTML sẽ chèn cần thiết đoạn trích vào trình chỉnh sửa của bạn mà không gặp rắc rối.

   Tác giả của tiện ích mở rộng này cũng chú ý đến việc xóa các phần tử không dùng nữa, vì vậy nếu bạn muốn sử dụng thẻ HTML mà bạn không thể tìm thấy trong danh sách bật lên, bạn nên kiểm tra xem liệu nó có còn hiệu lực hay không.

2. Hoàn thành lớp CSS CSS

   Hoàn thành lớp CSS CSS có thể là một phần mở rộng hữu ích nếu bạn cần sử dụng nhiều Các lớp CSS trong dự án của bạn. Nó thường xảy ra với các nhà phát triển, rằng chúng tôi không hoàn toàn chắc chắn trong tên chính xác của một lớp, nhưng nó chỉ nằm ở phía sau tâm trí của chúng ta như là kiến ​​thức thụ động.

   Phần mở rộng thông minh này cung cấp một giải pháp cho vấn đề này, vì nó tìm nạp tên của tất cả các lớp CSS trong không gian làm việc hiện tại và hiển thị danh sách về chúng.

   

   Giả sử, bạn muốn tạo một trang web bằng Zurb Foundation và bạn muốn sử dụng lưới nhỏ. Bạn không nhớ các lớp được đặt tên chính xác như thế nào, nhưng bạn biết chúng có tên ngữ nghĩa.

   Với việc hoàn thành lớp CSS CSS, bạn chỉ cần bắt đầu nhập từ nhỏ bé, và các tùy chọn khả dụng xuất hiện trên màn hình của bạn cùng một lúc, vì vậy bạn có thể dễ dàng chọn tùy chọn mình cần.

   

3. Xem trong trình duyệt

   Xem trong Trình duyệt là một phần mở rộng đơn giản nhưng mạnh mẽ cho Visual Studio Code. Nó có thể tạo điều kiện cho sự phát triển front-end bằng cách cho phép bạn có một cái nhìn nhanh chóng về kết quả công việc của bạn trong trình duyệt trong khi mã hóa. Bạn có thể mở tệp HTML trong trình duyệt mặc định của mình trực tiếp từ Mã VS bằng cách nhấn nút CTRL + F1 phim tăt.

   Lưu ý rằng Xem trong Trình duyệt chỉ hỗ trợ HTML, vì vậy nếu bạn muốn xem trang web của mình, bạn cần mở tệp HTML. Bạn không thể truy cập trực tiếp vào trình duyệt từ tệp CSS hoặc JavaScript.

   

4. Trình gỡ lỗi cho Chrome

   Trình gỡ lỗi cho Chrome được xây dựng bởi chính Microsoft và hiện tại đây là phần mở rộng Visual Studio Code được tải xuống thường xuyên thứ 4.

   Trình gỡ lỗi cho Chrome làm cho nó có thể gỡ lỗi JavaScript trong Google Chrome mà không cần rời khỏi trình chỉnh sửa mã. Điều này có nghĩa là bạn không cần phải làm việc với JavaScript được mã hóa mà trình duyệt nhìn thấy, nhưng bạn có thể thực hiện gỡ lỗi ngay từ các tệp nguồn gốc. Xem bản demo này để xem nó hoạt động như thế nào.

   

   Tiện ích mở rộng có mọi tính năng mà trình gỡ lỗi khá cần, chẳng hạn như thiết lập điểm dừng, xem biến, bước, một bảng điều khiển gỡ lỗi tiện dụng, và nhiều thứ khác (xem danh sách tính năng của phiên bản đầu tiên).

   Để sử dụng tiện ích mở rộng này, bạn cần khởi động Chrome với bật gỡ lỗi từ xa, và thiết lập một cách thích hợp launch.json tập tin. Việc này có thể mất một lúc, nhưng bạn có thể tìm thấy hướng dẫn chi tiết trên GitHub về cách thực hiện đúng.

5. Mã não

   Tiện ích mở rộng JSHint của Visual Studio Code tích hợp trình giả lập JavaScript JSHint phổ biến ngay vào trình chỉnh sửa mã, vì vậy bạn có thể được thông báo về lỗi của bạn ngay khi bạn phạm phải. Theo mặc định, tiện ích mở rộng JSHint sử dụng các tùy chọn mặc định của kẻ nói dối mà bạn có thể tùy chỉnh với sự trợ giúp của tệp cấu hình.

   

   Việc sử dụng tiện ích mở rộng này khá đơn giản, vì JSHint đánh dấu các lỗi bằng màu đỏ và các thông báo có gạch dưới màu xanh lá cây. Nếu bạn muốn biết thêm thông tin về các vấn đề, chỉ cần di chuột qua các phần được gạch chân và JSHint sẽ nổi một nhãn với mô tả vấn đề cùng một lúc.

   

6. Đoạn mã jQuery

   Đoạn mã jQuery có thể tăng tốc đáng kể sự phát triển của giao diện người dùng trong Visual Studio Code, vì nó cho phép bạn viết nhanh jQuery mà không gặp lỗi cú pháp cơ bản. Đoạn mã jQuery hiện có xung quanh 130 đoạn có sẵn bạn có thể gọi bằng cách gõ đúng kích hoạt.

   

   Tất cả các đoạn mã jQuery nhưng một bắt đầu với jq tiếp đầu ngữ. Một ngoại lệ là func kích hoạt nó chèn một chức năng ẩn danh vào trình soạn thảo.

   Tiện ích mở rộng tiện dụng này là một trợ giúp thuận tiện khi bạn không hoàn toàn chắc chắn về cú pháp thích hợp và muốn dành thời gian để kiểm tra tài liệu. Nó cũng giúp bạn dễ dàng nhanh chóng cuộn qua các tùy chọn có sẵn.

   

7. Cung cấp

   Tiện ích mở rộng Bower VS Code có thể giúp công việc phát triển web của bạn trực quan hơn bằng cách tích hợp trình quản lý gói Bower vào Visual Studio Code.

   Nếu bạn đưa tiện ích mở rộng này vào sử dụng, bạn không phải chuyển đổi qua lại giữa thiết bị đầu cuối và trình chỉnh sửa, nhưng bạn có thể dễ dàng thực hiện các tác vụ quản lý gói của mình ngay trong Visual Studio Code.

   

   Tiện ích mở rộng Bower dẫn bạn thông qua việc tạo dự án của bạn bower.json và bạn cũng có thể cài đặt, gỡ cài đặt, tìm kiếm, cập nhật gói, quản lý bộ đệm và thực hiện nhiều tác vụ khác với nó (xem danh sách tính năng đầy đủ).

   Bạn có thể truy cập các lệnh liên quan đến Bower bằng cách khởi động Bảng màu Lệnh bằng cách nhấn F1, đánh máy “Cung cấp” vào thanh đầu vào, nhấp vào “Cung cấp” tùy chọn trong danh sách thả xuống xuất hiện và chọn lệnh Bower thích hợp.

   

8. Lịch sử Git

   Lịch sử Git làm cho nó có thể theo dõi những thay đổi của dự án Git bên trong Visual Studio Code. Tiện ích mở rộng này đặc biệt hữu ích khi bạn muốn đóng góp cho dự án Github lớn hơn và cần một cách để nhanh chóng kiểm tra các sửa đổi mà các nhà phát triển khác đã thực hiện.

   Với tiện ích mở rộng Lịch sử Git, bạn có thể xem lịch sử của toàn bộ tập tin hoặc dòng cụ thể bên trong nó Bạn cũng có thể so sánh các phiên bản trước của cùng một tập tin.

   

   Bạn có thể truy cập các lệnh liên quan đến Lịch sử Git nếu bạn nhập từ “Git” vào Bảng lệnh (F1), chọn “Git” trong danh sách thả xuống, và cuối cùng chọn lệnh bạn cần. Lưu ý rằng bạn cần mở tập tin trong đó bạn muốn xem lịch sử trước khi bạn có thể thực hiện bất kỳ hành động nào trên đó.