Visual Studio Code(VSCode) là 1 text editor cross-flatform miễn phí, được cải cách và phát triển bởi Microsoft. VSCode nhanh lẹ trở thành một điều khoản ưa thích của khá nhiều lập trình viên nhờ hiệu suất tuyệt vời và không ít tính năng phong phú và đa dạng mà nó cung cấp. Tương tự như rất những IDE khác, VSCode cũng hỗ trợ các extension, tất cả hẳn 1 cửa hàng với hàng nghìn plugin nhằm developer rất có thể mua, download và sử dụng. Trong bài xích này tôi xin trình làng những plugin rất có lợi để các bạn sử dụng trong vượt trình thao tác với VSCode
Cách setup plugins
Đơn giản bạn chỉ việc gõ cmd + shift + x(trên thiết bị Mac) hoặc ctrl + shift + x ( trên đồ vật win) nó sẽ hiển thị khung extension cho bạn search đầy đủ gì đề xuất cài đặt. Sau khi seach rất nhiều gì cần cài đặt bạn chỉ cần ấn vào nut install là bạn đã sở hữu ngay plugin kia rùi.Bạn đang xem: Các extension hay cho visual studio code
1. CSS Peek
Cá nhân tôi thấy đó là một plugin tuyệt đối hoàn hảo mà đa số lập trình viên đề xuất có khi sử dụng VSCode. CSS Peek giúp họ di chuyển cấp tốc đến nơi định nghĩa các class và id của css. Khi các bạn bấm chuột phải vào một selector trong file html, lựa chọn “Go to lớn Definition” cùng Peek sẽ chuyển họ đến đúng file cùng vị trí nhưng mà class, id được định nghĩa.
2. Màu sắc Info
Color info là 1 trong những plugin nhỏ, cung ứng cho các bạn nhiều tin tức về màu sắc các bạn đã áp dụng trong CSS. Khi dịch rời con chuột vào một màu trong tệp tin css, các chúng ta có thể xem màu sắc thực của nó, thông tin mã màu trong các định dạng rgb, hex, hsl, cmyk
3. Open-In-Browser
VSCode ko cung cấp cách thức để mở tệp tin trực tiếp bởi browser, plugin này cung cấp thêm cho bọn họ tuỳ chọn “Open With default Browser” trong menu khi bạn nhấn vào phải vào file đề xuất mở. Xung quanh default browser chúng ta cũng rất có thể mở file với bất kỳ browser nào mình thích (IE, chrome, firefox,…)
4. Prettier
Prettier là một plugin giúp chúng ta format, bố trí lại code trong các dòng code. Khi chúng ta làm vấn đề theo nhóm, với nhóm của khách hàng mỗi người có một style code không giống nhau, thì plugin này vẫn trở cần rất hữu ích. Prettier có thể auto áp dụng định dạng cục bộ các tệp tin JS với CSS.
5.HTML Boilerplate
HTML Boilerplate hỗ trợ cho chúng ta một template mẫu mang đến file html. Chúng ta chỉ yêu cầu gõ chữ “html” vào trong 1 file trống và bấm nút Tab, HTML Boilerplate sẽ tự động tạo cho chúng ta một tệp tin html cơ bản với structure và những tag cơ bạn dạng của file như head, body, meta, title,…
6. Quokka
Quokka là một trong những công vắt debug giỏi vời, nó cung ứng khả năng bình luận ngay nhanh chóng với code mà họ đang viết. Quokka cho họ xem trước tác dụng của các hàm và quý giá được giám sát và đo lường của những variable. Hơn nữa, nó lại rất dễ thông số kỹ thuật và nó hoạt động tốt đối với tất cả các project về JSX với Type
Script
7. SVG Viewer
Plugin này hỗ trợ cho chúng ta khả năng hiển thị những file file SVG ngay trong VSCode, bạn có thể xem trực tiếp file SVG mà chưa phải mở tệp tin trong một dụng cụ xem SVG. Kế bên ra, SVG Viewer còn hỗ trợ tuỳ lựa chọn để biến hóa sang file PNG và tạo nên lược đồ dữ liệu URI
8. Faker
Faker là phương tiện giúp chúng ta điền những placeholder data, các bạn cũng có thể tạo random tên, address, ảnh, số điện thoại, … thậm chí là là cả văn bạn dạng “Lorem Ipsum” thần thánh. Faker có tương đối nhiều category, các category lại bao gồm nhiều subcategory khác, vày vậy các các bạn sẽ dễ dàng tạo tài liệu fake phù hợp nhất.
9. TODO Highlight
Plugin này highlight tất những các bình luận TODO vào code, giúp chúng ta dễ dàng tra cứu kiếm các phần code còn chưa hoàn thành (đó là vào trường hợp hầu hết chỗ code chưa hoàn thiện bạn nên thêm comment TODO nhé). Khoác định plugin này sẽ tìm kiếm các keyword TODO với FIXME, ngoài ra các bạn cũng có thể thêm bất kỳ keyword như thế nào mình muốn
10. Icon Fonts
Plugin này sẽ giúp đỡ bạn thêm các icon fonts vào dự án công trình của bạn. Plugin này còn có sẳn hẳn 20 bộ fonts icon mang lại bạn bao gồm Font Awesome, Ionicons, Glyphicons, & Material kiến thiết Icons.
11. Ngôn ngữ và Framework
VSCode cung ứng cho một số trong những lượng lớn những ngôn ngữ lập trình. Giả dụ vì vì sao nào đó, ngôn từ lập trình của công ty không tất cả ở vscode, bạn có thể tải xuống Plugin cho ngôn từ đó. Một số trong những framework web nhưreact nativevàvuecũng cung ứng các plugin
Kết luận
Nếu bạn thực hiện vscode từng ngày tại sao lại không làm cho nó đẹp nhất hơn, dễ áp dụng hơn. Có hàng tấn plugin tùy chỉnh biến hóa bảng màu sắc và các icons... Trong quần thể chợplugin VScode. Nếu khách hàng thấy cần thiết cho mình, dự án của chính mình hãy install nó.
Cảm ơn các bạn đã theo dõi bài viết, còn rất nhiều plugin hữu ích cho những dev thực hiện VScode. Nếu như khách hàng biết plugin hay mà bài viết mình chưa phân tách sẻ. Vui tươi comment bên dưới .
Trong nội dung bài viết hôm nay bọn họ sẽ đi vào khám phá những extension mở rộng trong Visual Studio Code góp bạn cải thiện hiệu suất cũng giống như thời gian làm việc. Nào bọn họ hãy cùng cả nhà đi vào tìm hiểu 30 visual studio code extension for web developer được sử dụng thông dụng trong xây dựng và xây cất web năm 2022 nhé!
Trước khi đi vào vấn đề chính thì bản thân sẽ lý giải sơ qua về Visual Studio Code tí nhé!
Visual Studio Code là một trong mã nguồn mở và được cách tân và phát triển bởi Microsoft nên chúng ta cứ yên ổn tâm sử dụng vì nó hoàn toàn miễn giá tiền và luôn được update những phiên bạn dạng mới nhất. Không chỉ có vậy nó còn rất tương thích cho việc cách tân và phát triển các dự án công trình lớn, phức tạp trong khi còn cung cấp việc tích hợp Git. Dụng cụ này còn cung ứng các phần mở rộng(extension) giúp bạn có thể code một phương pháp nhanh hơn, thống trị file hiệu quả...
Nếu bạn muốn tham khảo thêm hay download về thì hoàn toàn có thể xem tại đây nhé.
Debugger for Chrome giúp chúng ta có thể debug lỗi mã công tác ngay vào VS Code cơ mà không yêu cầu mở Google Chrome để thực hiện developer tool. Nó có rất nhiều tính năng hữu ích như là tùy chỉnh thiết lập breakpoints, hiển thị console...
Trang download Đặt Debugger for Chrome
Java
Script (ES6) code snippets giúp bạn có thể gọi kết cấu của một hàm hay thuộc tính... Một cách mau lẹ thông qua hầu hết cú pháp được cung ứng sẵn. Ví dụ khi chúng ta gõ là clg thì nó sẽ tự động hóa biên dịch thành console.log(object). Cái này các bạn có thể xem thêm bảng chú thích trong trang setup của nó nhé. Ngoài ra nó cũng hỗ trợ nhiều ngữ điệu trong file extension như là Type
Script, Java
Script React, Type
Script React, Html cùng Vue.
Script (ES6) code snippets
Trang thiết lập Đặt Java
Script (ES6) code snippets
Live Server giúp khởi chạy local server một cách gấp rút với tính năng tự động tải lại trực tiếp cho những trang website tĩnh với động. Ví dụ lúc bạn đổi khác 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 thừa nhận reload trên trình duyệt. Nó cũng có nhiều lựa chọn mang lại việc cấu hình thiết lập sử dụng như là thiết lập cấu hình số port, tùy chỉnh cấu hình trình để mắt tới mặc định, hỗ trợ SVG, https, proxy...
Trang download Đặt Live Server
Auto Close Tag được xây dựng sẽ giúp đỡ bạn tự động đóng thẻ khi bạn mở thẻ. Ví dụ như là khi bạn gõ thì nó sẽ auto thêm . Ngoài ra nó cũng cung cấp cho nhiều ngôn ngữ khác như thể XML, PHP, Vue, Java
Script, Type
Script, JSX, TSX... Nó cũng có thể có một số tùy chỉnh thiết lập giúp bạn tiện lợi tinh chỉnh như là đặt list thẻ không tự động đóng, sử dụng phím tắt nhằm thêm thẻ đóng thủ công...
Trang mua Đặt auto Close Tag
Prettier - Code formatter giúp đỡ bạn định dạng lại code một cách auto và tạo thành một phong cách code phổ biến cho team lập trình thông qua quy tắc riêng được phương tiện bởi extension. Nó cũng hỗ trợ cho phong phú loại ngôn từ như là Java
Script, Type
Script, Flow, JSX, JSON, HTML, Vue, Angular...
Trang download Đặt Prettier - Code formatter
TODO Highlight giúp đỡ bạn làm nổi bật các phản hồi quan trọng vào code để những người lập trình sau giỏi chính bản thân chúng ta có thể nắm được phần lớn điều cần để ý hay hồ hết việc cần được làm trước lúc sử dụng với lập trình code. Hình như nó còn tồn tại một số theme có phong cách thiết kế đẹp mắt, cung ứng trên nhiều ngữ điệu như javascript, html, css, php...
Trang cài đặt Đặt TODO Highlight
Auto Rename Tag giúp tự động đổi thương hiệu cả cặp thẻ trong HTML, XML. Ví dụ khi bạn biến hóa tên thẻ mở thì thẻ đóng tương ứng cũng trở nên được tự động hóa thay đổi theo. Chúng ta có thể xem ví dụ chi tiết trong phần Usages nhé.
Trang download Đặt tự động Rename Tag
Better Comments hiển thị bình luận theo từng loại riêng biệt giúp dễ dãi phân nhiều loại và tưởng tượng hơn ví như là những thông báo đặc biệt quan trọng cần làm nổi bật, những cảnh báo, những bài toán phải làm... Bên cạnh ra bạn có thể tùy chỉnh để tương xứng với mục tiêu và sở thích của chính bản thân mình như tùy chỉnh thiết lập các cú pháp comment, chỉnh sửa color màu nền cho comment.
Trang thiết lập Đặt Better Comments
ESLint là một công vắt phân tích đoạn mã vào chương trình để lấy ra những lỗi cũng như những đoạn mã rất cần được cải thiện. Trong khi nó cũng cung cấp cho mình những phương án để tối ưu giỏi sửa lỗi một giải pháp nhanh hơn. Chúng ta cũng có thể tùy chỉnh trình so với cú pháp của ESLint để phù hợp với mục đích hay dự án công trình của mình.
Trang sở hữu Đặt ESLint
Beautify là một tiện ích giúp bạn có thể định dạng lại biện pháp hiển thị code một cách ưa nhìn hơn. Nó cung ứng cho những ngôn ngữ phổ biến bây giờ như là Javascript, JSON, CSS, Sass và HTML.
Trang cài đặt Đặt Beautify
Bracket Pair Colorizer là một thể í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 phương pháp sử dụng color sắc. Nó giúp bạn cũng có thể dễ dàng phân phát hiện phần đông dấu ngoặc còn thiếu hay bao gồm cái chú ý trực quan khi có vô số ngoặc lồng vào nhau trong đoạn code.
Trang sở hữu Đặt Bracket Pair Colorizer
Path Intellisense là tiện thể ích không ngừng mở rộng giúp bạn auto thực hiện tên cho file (autocompletes filenames) trải qua cách gợi ý các băng thông mỗi khi bạn gõ băng thông đến nơi lưu trữ file.
Trang mua Đặt Path Intellisense
Import Cost giúp chúng ta cũng có thể kiểm tra kích cỡ của những file import một cách dễ ợt thông qua thông tin được hiển thị trực tiếp mặt đoạn mã lúc ta tiến hành import.
Trang mua Đặt Import Cost
Code Time giúp chúng ta có thể tính toán thời hạn mình thao tác trên visual studio code. Hình như nó cũng tổng hợp thời hạn bạn dành cho mỗi dự án, nút độ làm việc với code trải qua biểu đồ của những ngày vào tuần, hiển thị giá bán trị thời hạn trung bình bạn thao tác làm việc trong một tháng...
Trang thiết lập Đặt Code Time
CSS Peek luôn tiện ích không ngừng mở rộng giúp tìm các id hoặc class của những thẻ HTML trong số những file CSS mà chứa các class hay thuộc tính đó. Dường như nó cũng chất nhận được bạn đi đến các file CSS đó ngay lập tức.
Trang cài đặt Đặt CSS Peek
Project Manager phầm mềm mở rộng giúp cho bạn dễ dàng chuyển đổi giữa các dự án vào VS Code. Nó cung cấp một thực đơn phụ giúp chúng ta cũng có thể lưu trữ các dự cần thao tác và biến hóa qua lại một giải pháp nhanh chóng.
Trang cài Đặt Project Manager
Browser Preview hiển thị trình chú ý ngay trên Visual Studio Code giúp bạn cũng có thể xem công dụng cũng như debug mang lại chương trình một cách dễ dãi hơn.
Trang mua Đặt Browser Preview
Git
Lens — Git supercharged là nhân tiện ích cung ứng nhiều tài năng hữu ích giúp đỡ bạn làm vấn đề với Git một cách giỏi hơn như là hiển thị chú thích đến từng dòng code về lập trình sẵn viên commit, hiển thị thông tin chi tiết các lần sửa thay đổi đoạn mã trong File...
Lens — Git supercharged
Trang cài đặt Đặt Git
Lens — Git supercharged
Polacode là luôn tiện ích giúp đỡ bạn chụp hình đoạn code của bản thân và gìn giữ ngay trên máy tính một biện pháp dễ dàng. Kế bên ra chúng ta cũng có thể chọn những bộ theme có thiết kế sẵn giúp đoạn mã được trông rất nổi bật và trông đẹp hẳn trong quá trình chụp.
Trang sở hữu Đặt Polacode
vscode-icons là nhân tiện ích chúng ta có thể thiết lập những icon đẹp mắt cho Visual Studio Code.
Trang cài Đặt vscode-icons
Settings Sync giúp bạn có thể lưu lại các tùy chỉnh thiết lập cho Visual Studio Code trên thứ tính của bản thân mình lên bên trên Github và sử dụng cho những máy không giống một cách dễ dãi ví dụ như là những thông tin về extension, tuyệt các thiết lập mà tôi đã thiết lập... Bây giờ bạn dễ dàng dàng tùy chỉnh thiết lập cho những máy khác biệt mà không nhất thiết phải nhớ lại các extension, các tùy chỉnh cấu hình mà mình đã cài đặt cho VS Code.
Trang tải Đặt Settings Sync
Quokka giúp bạn cũng có thể test từng đoạn code nhỏ dại Javascript, Type
Script và hiển thị trực tiếp trên VS Code nhưng không cần áp dụng console.log() nhằm hiển thị trong trình duyệt.
Trang sở hữu Đặt Quokka
Editor
Config là 1 tiện ích mở rộng giúp gia hạn sự thống độc nhất vô nhị style code cho các lập trình viên khi làm cùng một dự án. Với mỗi lập trình viên hoàn toàn có thể làm bài toán trên những trình soạn thảo mã không giống nhau như VSCode, Atom, Notepad++... Thì nó đều cung ứng các plugin trên mọi nền tảng giúp thiết kế viên rất có thể đọc và sửa đổi style code một giải pháp dễ dàng.
Config
Trang download Đặt Editor
Config
Material Icon Theme là một trong những tiện ích tùy chỉnh cấu hình icon Material Design mang lại Visual Studio Code.
Trang tải Đặt Material Icon Theme
Color Highlight là một trong những tiện ích giúp bạn hiển thị màu đến các đối tượng người dùng được kiếm tìm thấy vào trang. Ví dụ những mã màu cơ mà VS Code không hiển thị được thì tiện ích này là một lựa chọn tuyệt đối cho bạn.
Trang cài Đặt color Highlight
REST Client cho phép bạn gửi những yêu ước HTTP và hoàn toàn có thể xem tác dụng trực tiếp trên Visual Studio Code.
Trang cài Đặt REST Client
Live Share giúp các lập trình viên vào team gồm thể share đoạn mã trong công tác theo thời hạn thực để dễ dàng trong bài toán chỉnh sửa cũng như debug mang đến chương trình như là share debugging sessions, terminal instances, localhost web apps, voice calls...
Trang thiết lập Đặt Live Share
Code Spell Checker giúp đỡ bạn kiểm tra lỗi bao gồm tả của đoạn mã vào chương trình. Tuy vậy nó chỉ hỗ trợ các ngữ điệu như giờ đồng hồ Anh, Thụy Điển, Pháp, Đức... Và chưa tồn tại tiếng vn nha.
Xem thêm:
Trang cài đặt Đặt Code Spell Checker
Vetur là app mở rộng cung cấp các chế độ hữu ích mang đến Vue
JS như là debug, bình chọn lỗi, Syntax-highlighting, snippet...
Trang tải Đặt Vetur
ES7 React/Redux/Graph
QL/React-Native snippets là ứng dụng mở rộng cung cấp các snippet cho React, Redux cùng Graphql vào JS/TS cùng với cú pháp ES7. Chúng ta có thể tham khảo bảng cú pháp vào trang thiết yếu của nó nhé!
QL/React-Native snippets
Trang cài đặt Đặt ES7 React/Redux/Graph
QL/React-Native snippets
Tổng kết:
Qua đây mình mong nội dung bài viết sẽ cung cấp thêm cho mình những extension visual studio code hữu ích dành cho việc phạt triển, xây đắp web với nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi nhanh nhất có thể có thể. Rất mong mỏi bạn liên tiếp ủng hộ trang web để mình hoàn toàn có thể viết nhiều bài xích hay không dừng lại ở đó nhé. Chúc chúng ta có một ngày vui vẻ!
Góc trả lời
Nếu các bạn có gì vướng mắc thì liên hệ mình qua phần đông mạng làng hội sau đây nhé!