Visual Studio Code’s plug-ins are important in improving programming efficiency and speed up work. Here are 30 of the most popular VSCode plugins that will make you a more effective master of the game. These plug-ins are primarily intended for front-end developers, but there are some general-purpose plug-ins that can be used in any development environment. Here are the VSCode plug-ins I will introduce:
- Settings Sync
- Live Server
- Remote SSH
- Prettier
- Bracket Pair Colorizer
- Auto Rename Tag
- GitLens
- Git History
- CSS Peek
- Javascript Code Snippets
- Peacock
- Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
- Code Spell Checker
- Chrome debugger
- Material Icon Theme
- Turbo Console Log
- TODO highlight
- VSCode Icons
- Chrmarti Regex
- Bookmarks
- Tabnine
- Import Cost
- Quokka
- ESLint
- Visual Studio IntelliCode
- SQLTools — Database tools
- Better Comments
- Vue 3 Support – All In One
- HTML/CSS/JavaScript Snippets
- Search/Translate Hero – Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine
Settings Sync
Settings Sync saves you a lot of time installing plug-ins across devices
It’s good to know that Settings Sync exists before you start installing plug-ins left and right. It allows you to sync almost everything you customize on VSCode to Github, from Settings to keyboard shortcuts to other VSCode plug-ins.
This way, you can access your favorite IDE from any device you want, without having to program from a normal VSCode environment on a new device, and without having to manually set everything up again.
Live Server
View code changes reflected in your browser immediately
This is one of my favorite plug-ins. Live Server launches the local development Server and provides real-time reload capabilities for both static and dynamic pages.
Every time you save the code, you will immediately see the changes reflected in the browser. You’ll find bugs faster, and it’ll be easier to do some quick experiments with your code.
Tabnine
Tabnine is a popular VSCode ai assistant that works with all major programming languages, so there’s no doubt you’ll find it useful regardless of your skills.
By studying publicly shared code bases, Tabnine uses deep learning algorithms to predict your needs and offers one-click code completion capabilities that allow you to complete projects quickly and efficiently. This makes learning a breeze for new coders because it gives you space to play with your ideas without having to memorize coding syntax or search StackOverflow.
Also, if you’re an experienced developer, you’ll find that Tabnine saves you a lot of time by providing you with the building blocks you need to run.
Remote SSH
Using any remote machine with an SSH server, this SSH plugin lets you use any remote machine with an SSH server as your development environment. This makes development and/or troubleshooting easier in a variety of scenarios.
You also don’t need any source code on the local machine, because the plug-in runs commands and other plug-ins directly on the remote machine.
Prettier
Spend less time formatting code
Prettier is a self-righteous code formatter that is especially effective if you have more than one person working on a project because the plug-in enforces a consistent style.
You can set it up to format your code every time you save it, significantly reducing the time you spend formatting your code.
Bracket Pair Colorizer
Everyone likes to color code, and Bracket Pair Colorizer provides brackets that match colors to make it easier to know which Bracket belongs to whom.
You can also configure custom parenthesis characters, and you can also add background colors for active ranges.
Auto Rename Tag
Automatically renames labels. While VSCode inherently highlights matching labels and adds end labels as soon as you type a start label, the auto-renaming label plug-in automatically renames the labels you change.
The plug-in works with HTML, XML, PHP, and JavaScript without having to change the tag name twice.
GitLens
Enhance your Git capabilities GitLens enhances Visual Studio Code’s Git capabilities. This is a powerful plug-in that lets you see who, why and how lines of code change over time, and many other features.
GitLens is a highly customizable plug-in. If you don’t like a particular setting, you can easily turn it off in Settings.
Git History
Get git logs and display beautiful visuals
Like GitLens, Git History is a VSCode plug-in that provides visualization of Git logs. You don’t need to check git logs in your terminal.
Plug-ins are also very comprehensive. It allows you to compare branches, commits, and files across commits. You can also look up the Github avatar, which is pretty neat.
Vue 3 Support – All In One
Vue 2 – Vue 3 Vue 2 – Vue 3 Vue 2 – Vue 3 Vue 2 – Vue 3 Vue 2 – Vue 3 Vue 2 – Vue 3 You can turn on the Auto Format Vue switch in the bottom right corner of the VSCode editor, which may help you to automatically Format Vue files while saving the code. The default state is off.
If you do not want to Format the vUE file automatically, you can also right-click the Vue file and select the Format Document menu item from the menu bar. The file will be formatted once.
CSS Peek
Plugin your HTML file to view your CSS code
This plug-in is invaluable to front-end developers. Inspired by similar features in IDE Brackets, CSS Peek allows you to plug-in HTML and EJS files to display CSS/SCSS/LESS code in source code.
It also allows you to quickly jump to the corresponding CSS code if you know the class or ID name.
Javascript Code Snippets
Provides a lot of JS block hints, and while VSCode includes the built-in JS IntelliSense, the JS snippet plug-in enhances the experience by adding lots of imports, export triggers, class helpers, and method triggers.
The plugin supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, snippets of other styles, such as Angular, are also easily available.
HTML/CSS/JavaScript Snippets
Simply enter the prefix name and the complete code snippet is completed automatically.
Search/Translate Hero – Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine
A VSCode plug-in that allows you to search or translate code. You can select the corresponding keyword in the code in the editor, then click the right mouse button, select the Search Online menu item in the menu panel that appears, the plug-in will automatically open the default browser for you, and Search for the corresponding keyword and display the Search results.
You can also select the corresponding keyword, use the shortcut keys to open the browser to search.
Peacock
Change the color of VSCode instances, very useful. Peacock allows you to change the color of your Visual Studio Code environment so you can quickly identify the instance you just switched to.
Colorize
To view the colors you use in the style guide, use Colorize to immediately add CSS/SASS/Less/… CSS color visualization in files. This makes it easy to see at a glance what colors you are using and where.
Code Spell Checker
Make your code no longer typos, although typos are not fatal, I prefer my code to be typos free. The code spell checker plug-in underscores words that are not recognized in its dictionary files.
The plugin is available in many different languages and supports jargon such as medical terms.
Debugger For Chrome
Debug your JS code in VSCode. Debugger for Chrome by Microsoft allows you to debug your JS code in VSCode. In contrast to the debugger found in other ides, it is very smooth.
You can set breakpoints, step through code, debug dynamically added scripts, and so on.
Icon Fonts
Provides a variety of ICONS for your use! Icon Fonts provides snippets of various Icon Fonts, including the popular Font Awesome V5 Icon pack.
For those who don’t use VSCode, this package is also available for Atom and Sublime Text.
Turbo Console Log
To automatically create meaningful log messages, the console shows the process by which log \ plug-ins automatically create a meaningful log message. It makes debugging easier, because you’ll have some useful console output to figure out where the problem is.
Todo Highlight
Find ToDos in your code immediately. Many programmers have a habit of writing ToDos in their code and then completely forgetting about them. Todo Highlight makes them stand out.
You can toggle highlighting, or you can list all highlighted comments and display them from the appropriate file.
VSCode Icons
Wait, doesn’t everyone like ICONS? You wouldn’t think ICONS are much different, but they do at least to me. VSCode Icons add a touch of colour and cute little Icons to your IDE and I have fallen in love with them.
Regex Previewer
Create a preview of regular expressions. Regular expressions can be a difficult problem. The Regex Previewer provides you with auxiliary documents that match your regular expression.
The plug-in provides multiple examples to match, making it easier to write regular expressions quickly and accurately for a variety of use cases.
Bookmarks
Bookmarks Bookmarks allows you to bookmark your code, even though VSCode has line numbers, to help you navigate quickly and jump back and forth easily.
Import Cost
Import Cost is a VSCode extension that shows the size of the imported package inline, so you can know exactly how much it will Cost to Import the package during development. As such, it will help you better optimize your apps and websites, especially for mobile users who generally suffer more from bloat.
Quokka
This is a simple, lightweight extension perfect for experienced developers and novices. It’s also free for the community to use, but if you’re a JavaScript/TypeScript expert, you can also purchase a Pro license that lets you modify runtime values without changing code.
ESLint
If you need formatters and spec code, this plugin is for you. It automatically formats your code and finds errors in your code.
In addition, it allows you to select code areas between bookmark codes, which is useful for log file analysis and so on.
Visual Studio IntelliCode
It is designed to help developers and programmers advise on intelligent code completion. It supports Python, TypeScript/JavaScript, React, and Java by default.
SQLTools — Database tools
Tools for managing databases through VSCode. It supports many drivers, and you can use it to do many things, such as connecting to resource managers, querying running programs, intellisense, bookmarking, querying history.
Better Comments
The Better Comments extension will help you create more personalized Comments in your code. Each color can be used as a way to indicate the type of comment (note, to-do list, etc.).
The last
This is my personal introduction to 30 VSCode plug-ins that can improve your programming efficiency without compromising quality. , if the article and notes can take you a bit of help or inspiration, please don’t be too generous with your likes and collections, the article continues to update, the previous article is also included in github.com/Wscats/CV welcome your attention and communication, you are sure to be my biggest motivation 😁