Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu những extension mở rộng trong Visual Studio Code giúp bạn cải thiện hiệu suất cũng như thời gian làm việc. Nào chúng ta hãy cùng nhau đi vào tìm hiểu 30 visual studio code extension for web developer được sử dụng phổ biến trong lập trình và thiết kế web năm 2022 nhé!
Trước khi đi vào yếu tố chính thì mình sẽ lý giải sơ qua về Visual Studio Code tí nhé !Visual Studio Code là một mã nguồn mở và được tăng trưởng bởi Microsoft nên các bạn cứ yên tâm sử dụng vì nó trọn vẹn không lấy phí và luôn được update những phiên bản mới nhất. Không chỉ vậy nó còn rất thích hợp cho việc tăng trưởng các dự án Bất Động Sản lớn, phức tạp ngoài những còn tương hỗ việc tích hợp Git. Công cụ này còn cung ứng các phần lan rộng ra ( extension ) giúp tất cả chúng ta hoàn toàn có thể code một cách nhanh hơn, quản trị file hiệu suất cao …
Nếu bạn muốn tìm hiểu thêm hay tải về thì có thể xem ở đây nhé.
Tóm Tắt
Debugger for Chrome
Debugger for Chrome giúp bạn có thể debug lỗi mã chương trình ngay trong VS Code mà không cần mở Google Chrome để sử dụng developer tool. Nó có nhiều tính năng hữu ích như là thiết lập breakpoints, hiển thị console…
JavaScript (ES6) code snippets
JavaScript (ES6) code snippets giúp bạn có thể gọi cấu trúc của một hàm hay thuộc tính… một cách nhanh chóng thông qua những cú pháp được cung cấp sẵn. Ví dụ khi bạn gõ là clg thì nó sẽ tự động biên dịch thành console.log(object). Cái này bạn có thể tham khảo thêm bảng chú thích trong trang cài đặt của nó nhé. Ngoài ra nó cũng hỗ trợ nhiều ngôn ngữ trong file extension như là TypeScript, JavaScript React, TypeScript React, Html và Vue.
Live Server
Live Server giúp khởi chạy local server một cách nhanh chóng với tính năng tự động tải lại trực tiếp cho các trang web tĩnh và động. Ví dụ khi bạn thay đổi một thông tin trên trang HTML thì nó sẽ tự động cập nhật mà không cần chúng ta phải nhấn reload trên trình duyệt. Nó cũng có nhiều lựa chọn cho việc thiết lập sử dụng như là tùy chỉnh số port, thiết lập trình duyệt mặc định, hỗ trợ SVG, https, proxy…
Auto Close Tag
Auto Close Tag được xây dựng để giúp bạn tự động đóng thẻ khi bạn mở thẻ. Ví dụ như là khi bạn gõ thì nó sẽ tự động thêm
. Ngoài ra nó cũng hỗ trợ cho nhiều ngôn ngữ khác như là XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX… nó cũng có một số thiết lập giúp bạn dễ dàng tinh chỉnh như là đặt danh sách thẻ không tự động đóng, sử dụng phím tắt để thêm thẻ đóng thủ công…
Prettier – Code formatter
Prettier – Code formatter giúp bạn định dạng lại code một cách tự động và tạo ra một phong cách code chung cho team lập trình thông qua quy tắc riêng được quy định bởi extension. Nó cũng hỗ trợ cho đa dạng loại ngôn ngữ như là JavaScript, TypeScript, Flow, JSX, JSON, HTML, Vue, Angular…
TODO Highlight
TODO Highlight giúp bạn làm nổi bật các comment quan trọng trong code để những người lập trình sau hay chính bản thân chúng ta có thể nắm được những điều cần lưu ý hay những việc cần phải làm trước khi sử dụng và lập trình code. Ngoài ra nó còn có một số theme được thiết kế đẹp mắt, hỗ trợ trên nhiều ngôn ngữ như javascript, html, css, php…
Auto Rename Tag
Auto Rename Tag giúp tự động đổi tên cả cặp thẻ trong HTML, XML. Ví dụ khi bạn thay đổi tên thẻ mở thì thẻ đóng tương ứng cũng sẽ được tự động thay đổi theo. Bạn có thể xem ví dụ chi tiết trong phần Usages nhé.
Better Comments
Better Comments hiển thị comment theo từng loại riêng biệt giúp dễ dàng phân loại và hình dung hơn ví dụ như là các thông báo quan trọng cần làm nổi bật, các cảnh báo, những việc phải làm… Ngoài ra bạn cũng có thể tùy chỉnh để phù hợp với mục đích và sở thích của mình như thiết lập các cú pháp comment, chỉnh sửa màu sắc màu nền cho comment.
ESLint
ESLint là một công cụ phân tích đoạn mã trong chương trình để đưa ra các lỗi cũng như những đoạn mã cần phải cải thiện. Ngoài ra nó cũng cung cấp cho bạn những giải pháp để tối ưu hay sửa lỗi một cách nhanh hơn. Bạn cũng có thể tùy chỉnh trình phân tích cú pháp của ESLint để phù hợp với mục đích hay dự án của mình.
Beautify
Beautify là một tiện ích giúp bạn có thể định dạng lại cách hiển thị code một cách đẹp mắt hơn. Nó hỗ trợ cho các ngôn ngữ phổ biến hiện nay như là Javascript, JSON, CSS, Sass và HTML.
Bracket Pair Colorizer
Bracket Pair Colorizer là tiện ích mở rộng giúp làm nổi bật những dấu ngoặc tương ứng trong đoạn mã với nhau bằng cách sử dụng màu sắc. Nó giúp bạn có thể dễ dàng phát hiện những dấu ngoặc còn thiếu hay có cái nhìn trực quan khi có quá nhiều ngoặc lồng vào nhau trong đoạn code.
Path Intellisense
Path Intellisense là tiện ích mở rộng giúp bạn tự động thực hiện tên cho file (autocompletes filenames) thông qua cách gợi ý các đường dẫn mỗi khi bạn gõ đường dẫn đến nơi lưu trữ file.
Import Cost
Import Cost giúp bạn có thể kiểm tra kích thước của các file import một cách dễ dàng thông qua thông tin được hiển thị trực tiếp bên đoạn mã khi ta thực hiện import.
Code Time
Code Time giúp bạn có thể tính toán thời gian mình làm việc trên visual studio code. Ngoài ra nó cũng tổng hợp thời gian bạn dành cho mỗi dự án, mức độ làm việc với code thông qua biểu đồ của các ngày trong tuần, hiển thị giá trị thời gian trung bình bạn làm việc trong một tháng…
CSS Peek
CSS Peek tiện ích mở rộng giúp tìm các id hoặc class của các thẻ HTML trong những file CSS mà chứa những class hay thuộc tính đó. Ngoài ra nó cũng cho phép bạn đi đến các file CSS đó ngay lập tức.
Project Manager
Project Manager tiện ích mở rộng giúp bạn dễ dàng chuyển đổi giữa các dự án trong VS Code. Nó cung cấp một menu phụ giúp bạn có thể lưu trữ các dự cần làm việc và chuyển đổi qua lại một cách nhanh chóng.
Browser Preview
Browser Preview hiển thị trình duyệt ngay trên Visual Studio Code giúp bạn có thể xem kết quả cũng như debug cho chương trình một cách dễ dàng hơn.
GitLens — Git supercharged
GitLens — Git supercharged là tiện ích cung cấp nhiều tính năng hữu ích giúp bạn làm việc với Git một cách tốt hơn như là hiển thị chú thích cho từng dòng code về lập trình viên commit, hiển thị thông tin chi tiết các lần sửa đổi đoạn mã trong File…
Polacode
Polacode là tiện ích giúp bạn chụp hình đoạn code của mình và lưu lại ngay trên máy tính một cách dễ dàng. Ngoài ra bạn cũng có thể chọn những bộ theme được thiết kế sẵn giúp đoạn mã được nổi bật và đẹp hơn trong quá trình chụp.
vscode-icons
vscode-icons là tiện ích chúng ta có thể thiết lập nhiều icon đẹp mắt cho Visual Studio Code.
Settings Sync
Settings Sync giúp bạn có thể lưu lại các thiết lập cho Visual Studio Code trên máy tính của mình lên trên Github và sử dụng cho các máy khác một cách dễ dàng ví dụ như là các thông tin về extension, hay các cài đặt mà mình đã thiết lập… Lúc này bạn dễ dàng thiết lập cho nhiều máy khác nhau mà không cần phải nhớ lại các extension, các thiết lập mà mình đã cài đặt cho VS Code.
Quokka
Quokka giúp bạn có thể test từng đoạn code nhỏ Javascript, TypeScript và hiển thị trực tiếp trên VS Code mà không cần sử dụng console.log() để hiển thị trong trình duyệt.
EditorConfig
EditorConfig là một tiện ích mở rộng giúp duy trì sự thống nhất style code cho nhiều lập trình viên khi làm cùng một dự án. Và mỗi lập trình viên có thể làm việc trên nhiều trình soạn thảo mã khác nhau như VSCode, Atom, Notepad++… thì nó đều hỗ trợ các plugin trên mọi nền tảng giúp lập trình viên có thể đọc và chỉnh sửa style code một cách dễ dàng.
Material Icon Theme
Material Icon Theme là một tiện ích thiết lập icon Material Design cho Visual Studio Code.
Color Highlight
Color Highlight là một tiện ích giúp bạn hiển thị màu cho các đối tượng được tìm thấy trong trang. Ví dụ nhiều mã màu mà VS Code không hiển thị được thì tiện ích này là một lựa chọn tuyệt vời cho bạn.
REST Client
REST Client cho phép bạn gửi các yêu cầu HTTP và có thể xem kết quả trực tiếp trên Visual Studio Code.
Live Share
Live Share giúp những lập trình viên trong team có thể chia sẻ đoạn mã trong chương trình theo thời gian thực để dễ dàng trong việc chỉnh sửa cũng như debug cho chương trình như là chia sẻ debugging sessions, terminal instances, localhost web apps, voice calls…
Code Spell Checker
Code Spell Checker giúp bạn kiểm tra lỗi chính tả của đoạn mã trong chương trình. Tuy nhiên nó chỉ hỗ trợ các ngôn ngữ như tiếng Anh, Thụy Điển, Pháp, Đức… và chưa có tiếng Việt Nam nha.
Vetur
Vetur là tiện ích mở rộng cung cấp các công cụ hữu ích cho VueJS như là debug, kiểm tra lỗi, Syntax-highlighting, snippet…
ES7 React/Redux/GraphQL/React-Native snippets
ES7 React/Redux/GraphQL/React-Native snippets là tiện ích mở rộng cung cấp các snippet cho React, Redux và Graphql trong JS/TS với cú pháp ES7. Bạn có thể tham khảo bảng cú pháp trong trang chính của nó nhé!
Bài viết tương quan :
Tổng kết:
Qua đây mình mong bài viết sẽ cung ứng thêm cho bạn những extension visual studio code hữu dụng dành cho việc tăng trưởng, phong cách thiết kế web và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !
Source: https://final-blade.com
Category: Kiến thức Internet
