12 phần mở rộng mã Visual Studio tốt nhất cho nhà phát triển web

Visual Studio Code là một trong những trình soạn thảo mã nguồn phổ biến nhất cho các nhà phát triển web. Nó được Microsoft phát hành vào năm 2015 và cung cấp nhiều tính năng tuyệt vời mà bạn có thể sử dụng trong quy trình làm việc hàng ngày của mình. Chỉ cần nêu một vài tên, nó đã hỗ trợ Git tích hợp, một công cụ hoàn thành tự động thông minh có tên IntelliSense, trình gỡ lỗi nâng cao và công cụ tìm kiếm mạnh mẽ. Bên cạnh đó, bạn cũng có thể tùy chỉnh hoàn toàn Visual Studio Code và mở rộng chức năng của nó theo nhu cầu của bạn.

Bạn có thể tìm thấy hàng ngàn tiện ích mở rộng Visual Studio Code trong Visual Studio Marketplace , nơi bạn có thể thêm các chức năng khác nhau vào trình chỉnh sửa. Bạn có thể dễ dàng cài đặt chúng ngay từ Visual Studio Code, bằng cách nhấp vào View > Extensionsmenu ở thanh trên cùng.

1. Phông chữ mã tuyệt vời cho HTML

Nếu bạn thường xuyên sử dụng các biểu tượng Font Awesome trong thiết kế thì tiện ích mở rộng này sẽ là một ơn trời cho bạn. Font Awesome thực sự tuyệt vời, vì bạn chỉ phải sử dụng lớp CSS dựng sẵn để thêm phông chữ biểu tượng vào bất kỳ thành phần HTML nào. Hiện tại, Font Awesome có gần 1.000 biểu tượng sẽ đáp ứng hầu hết các nhu cầu của bạn. Tuy nhiên, vì có rất nhiều biểu tượng, thật không dễ để nhớ chính xác tên của từng lớp Font Awesome bạn có thể muốn sử dụng. Chắc chắn, bạn có thể tra cứu nó trong các tài liệu, nhưng tại sao bạn sẽ làm như vậy nếu bạn có quyền truy cập vào tiện ích mở rộng tiện dụng này?

Phần mở rộng hoạt động ra khỏi hộp. Sau khi cài đặt, bạn chỉ cần bắt đầu nhập tên lớp (mỗi lớp Font Awesome bắt đầu bằng fa-tiền tố). Sau đó, một danh sách thả xuống xuất hiện trên màn hình mà bạn có thể dễ dàng lựa chọn.

2. CSS Peek

Với tiện ích mở rộng CSS Peek, bạn có thể thêm trình chỉnh sửa CSS nội tuyến vào Visual Studio Code. Tính năng này được lấy cảm hứng từ khả năng tương tự của trình soạn thảo mã Brackets của Adobe . CSS Peek cho phép bạn tải một tệp CSS nội tuyến trong khi chỉnh sửa tệp HTML.

Khi bạn nhìn trộm vào một lớp, ID hoặc thẻ HTML, CSS Peek hiển thị tất cả các quy tắc CSS có liên quan trong trình chỉnh sửa nội tuyến. Bằng cách này, bạn có thể chỉnh sửa biểu định kiểu của mình ngay từ tệp HTML của mình và bạn không phải thông qua toàn bộ CSS để tìm tất cả các quy tắc liên quan.

3. Bộ chọn màu VS

Nếu bạn làm việc nhiều với màu sắc, bạn sẽ thích phần mở rộng VS Color Picker. Nó thêm một công cụ chọn màu dễ sử dụng vào trình chỉnh sửa Visual Studio Code của bạn. Khi bạn bắt đầu nhập giá trị hex vào tệp CSS của mình bằng cách nhấn #phím, tiện ích mở rộng sẽ hiển thị một công cụ chọn màu nhỏ trên màn hình. Bạn có thể dễ dàng chọn một màu từ bánh xe màu. Hơn nữa, bạn cũng có thể chọn một màu từ màn hình của mình (ví dụ từ ảnh) bằng cách di chuyển một công cụ qua màu bạn muốn sử dụng trong CSS.

4. Tôi có thể sử dụng mã VS

Visual Studio Code có một tiện ích mở rộng tuyệt vời tích hợp ứng dụng web Tôi có thể sử dụng phổ biến với trình chỉnh sửa mã. Tôi có thể sử dụng là trình kiểm tra tương thích trình duyệt cho nhiều nhà phát triển web. Nó cho phép bạn kiểm tra hỗ trợ trình duyệt cho các yếu tố HTML, CSS, SVG và JavaScript, thuộc tính, chức năng và các cú pháp khác.

Với tiện ích mở rộng tiện dụng này, bạn có thể đánh dấu bất kỳ chuỗi văn bản nào trong mã của mình và nhấn phím tắt Alt+ i. Dữ liệu tương thích xuất hiện ở dưới cùng của màn hình, trên thanh trạng thái. Tiện ích mở rộng hiển thị dữ liệu hỗ trợ cho năm trình duyệt được sử dụng rộng rãi nhất: Chrome, Edge, Firefox, Internet Explorer và Safari.

5. Trình xác thực CSSTree

Tiện ích mở rộng Trình xác thực CSSTree giúp bạn viết mã CSS hợp lệ trong Visual Studio Code. Nó xác nhận mã của bạn dựa trên thông số kỹ thuật của W3C và việc triển khai trình duyệt. Phần mở rộng làm nổi bật tên thuộc tính sai, giá trị sai, dấu chấm phẩy bị thiếu và các lỗi khác.

Trình xác nhận chạy trong nền trong khi bạn đang làm việc, vì vậy bạn có thể thấy các vấn đề trong thời gian thực. Nó cũng cung cấp cho bạn các đề xuất về cách bạn có thể sửa lỗi. Nếu bạn thêm tiện ích mở rộng này vào trình chỉnh sửa Visual Studio Code, bạn có thể tiết kiệm rất nhiều thời gian bằng cách loại bỏ các sự cố ngay khi đang di chuyển.

6. Trình biên dịch Sass trực tiếp

Bạn có thể biên dịch các tệp Sass và SCSS của mình thành CSS trong thời gian thực với sự trợ giúp của tiện ích mở rộng Trình biên dịch Sass trực tiếp. Nó không chỉ thực hiện việc biên dịch mà còn tải lại CSS trong trình duyệt bất cứ khi nào bạn lưu tệp của mình. Hơn nữa, nó cũng cho phép bạn biên dịch Sass hoặc SCSS thành CSS rút gọn.

Live Sass Compiler cũng có các điều khiển thanh trạng thái dễ sử dụng. Chẳng hạn, bạn có thể bật và tắt tính năng Sass trộm của Watch Watch để bạn có thể biên dịch các tệp Sass mà không cần sử dụng chế độ Watch. Bạn cũng có thể tự động thêm tiền tố của nhà cung cấp cho các thuộc tính CSS không được hỗ trợ với Trình biên dịch Sass trực tiếp.

7. Công cụ khai thác ES5 / ES6 và CSS

Việc giảm thiểu CSS và JavaScript sẽ trở nên dễ dàng với sự trợ giúp của tiện ích mở rộng này. Sau khi bạn thêm nó vào Visual Studio Code, một nút Minify nhỏ xuất hiện trong thanh trạng thái, ở dưới cùng của trình chỉnh sửa. Khi bạn nhấp vào nút, tiện ích mở rộng sẽ tạo một phiên bản rút gọn của tệp trong thư mục làm việc của bạn. Nút Giảm thiểu tối đa chỉ xuất hiện khi bạn mở tệp .csshoặc .jsmở trong trình chỉnh sửa. Phần mở rộng cũng có thể thu nhỏ cú pháp ES6 mới hơn.

Ngoài ra, bạn có thể kết hợp nó với trình tối ưu hóa Clean CSS và trình nén và làm đẹp JavaScript Uglify-ES . Phần mở rộng tự động tìm kiếm các tập tin liên quan .cleancssrcvà .uglifyrccấu hình. Nếu nó tìm thấy bất kỳ trong số chúng, nó sẽ sử dụng các cấu hình trong khi thu nhỏ các tệp CSS và JavaScript.

8. Đoạn mã JavaScript

Nếu bạn đã sử dụng Atom trước đây và đã ghi nhớ các tiền tố thuộc về đoạn mã JavaScript, bạn sẽ thấy tiện ích mở rộng này rất hữu ích. Nó cung cấp cho bạn các đoạn mã JavaScript của Atom , ngay trong Visual Studio Code. Ngay cả khi bạn không biết đoạn trích Atom, tiện ích mở rộng này vẫn có thể cải thiện đáng kể quy trình làm việc của bạn và giúp bạn tiết kiệm rất nhiều thời gian.

Nó có các tiền tố dễ nhớ cho một loạt cú pháp và logic JavaScript. Chỉ cần một vài tên, bạn sẽ có các phím tắt cho cặp khóa-giá trị, if-elsebáo cáo, for, for of, và for invòng, chức năng mang tính chất chức năng mũi tên, Promises, và nhiều hơn nữa.

9. Tiếng Anh

Sử dụng tiện ích mở rộng này, bạn có thể tích hợp trình giả lập JavaScript và JavaScript phổ biến của ESLint với Visual Studio Code. ESLint cho phép bạn khám phá các lỗi JavaScript và sự không nhất quán trước khi bạn thực thi mã. Do đó, tiện ích mở rộng này có thể giúp bạn tiết kiệm rất nhiều thời gian gỡ lỗi.

Theo mặc định, tiện ích mở rộng ESLint kiểm tra lỗi trong các tệp JavaScript của bạn trong khi bạn nhập. Tuy nhiên, bạn cũng có thể định cấu hình nó để lint toàn bộ thư mục hoặc không gian làm việc của bạn cùng một lúc. Bạn cũng có thể tạo các quy tắc nhuộm khác nhau cho bất kỳ thư mục nào bằng cách thêm .eslintrctệp cấu hình vào mỗi thư mục .

10. Trình tăng cường JavaScript

Nếu bạn muốn cải thiện chất lượng mã JavaScript thì bạn sẽ thấy tiện ích mở rộng JavaScript Booster rất hữu ích. Nó thêm các gợi ý và đề xuất vào các tệp JavaScript của bạn về cách bạn có thể tinh chỉnh mã của mình. Bạn có thể truy cập các gợi ý bằng cách nhấp vào biểu tượng bóng đèn mà nó thêm vào đầu mỗi dòng.

JavaScript Booster có nhiều đề xuất thông minh mà bạn không nhất thiết phải suy nghĩ trong khi mã hóa. Chẳng hạn, nó khuyến nghị các tốc ký, loại bỏ các phần thừa, tách hoặc hợp nhất các khai báo, thay thế các chuỗi bằng các chuỗi mẫu và hơn thế nữa. Nó không chỉ hoạt động với JavaScript đơn giản mà còn với JSX, vì vậy các nhà phát triển React cũng sẽ thấy nó hữu ích.

11. Đoạn trích WordPress

Visual Studio Marketplace cũng có một số tiện ích mở rộng thú vị dành cho các nhà phát triển WordPress có thể hỗ trợ rất nhiều cho công việc hàng ngày của họ. Chẳng hạn, tiện ích mở rộng WordPress Snippet thêm hàng ngàn đoạn trích WordPress vào trình chỉnh sửa Visual Studio Code của bạn. Phần mở rộng phù hợp với tài liệu chính thức của WordPress. Nó không chỉ có đoạn mã cho tên hàm mà còn cho các hằng, lớp, móc và các cấu trúc WordPress khác.

Về cơ bản, nó tích hợp toàn bộ API WordPress với Visual Studio Code. Nó cũng có một tính năng tự động hoàn thành thú vị, vì vậy các đoạn mã xuất hiện theo thời gian thực trong khi bạn đang nhập vào trình chỉnh sửa. WordPress Snippet chắc chắn sẽ tiết kiệm rất nhiều thời gian cho tất cả những người thường xuyên viết mã WordPress.

12. Đoạn mã WooC Commerce & Autocomplete

Nếu bạn không chỉ là nhà phát triển WordPress mà còn xây dựng các cửa hàng WooC Commerce thì tiện ích mở rộng này sẽ là một điều may mắn cho bạn. Nó hoạt động tương tự như tiện ích mở rộng WordPress Snippets đã nói ở trên, tuy nhiên, nó bổ sung hỗ trợ cho API WooC Commerce.

Các đoạn được hiển thị trên màn hình khi bạn bắt đầu nhập vào trình chỉnh sửa. Tiện ích mở rộng này không chỉ giúp bạn với chức năng, lớp và tên hook mà còn thêm các trình giữ chỗ có thể chỉnh sửa cho các tham số bạn cần sử dụng.

Kết Luận

Visual Studio Code là trình chỉnh sửa mã nguồn nâng cao cung cấp cho bạn một số tiện ích mở rộng để bạn có thể tùy chỉnh nó theo nhu cầu của mình. Khi các tiện ích mở rộng bắt buộc bạn sử dụng các thực tiễn tốt nhất trong khi mã hóa, chất lượng mã của bạn sẽ cải thiện đáng kể và bạn cũng sẽ tiết kiệm được nhiều thời gian khắc phục sự cố. Một trình soạn thảo mã được cấu hình tốt có thể làm cho bạn trở thành một lập trình viên tốt hơn, chắc chắn.

Tuy nhiên, tìm kiếm các công cụ tốt nhất chỉ là bước đầu tiên để trở thành một nhà phát triển tuyệt vời. Nếu bạn muốn tìm hiểu thêm về cách bạn có thể đưa các kỹ năng của mình lên cấp độ tiếp theo, hãy xem các bài viết của chúng tôi về cách bạn có thể giữ mã của mình sạch sẽ và thực hiện gỡ lỗi và khắc phục sự cố .

Để luôn cập nhật những tin tức, mẹo và đánh giá phát triển web mới nhất, đừng quên theo dõi chúng tôi trên Twitter và Facebook .

Nguồn: onextrapixel.com