扩展使我们能够修改和增加开发经验，同时提高生产力。
VS Code is one of the most popular IDEs among the developer community, and the marketplace extensions help to keep it that way.
VS Code Extensions are add-on features and tools that allow you to customize and enhance the experience, but installing the right set of extensions and successfully using them can bring a marked increase to your overall productivity.
So, let’s have a look at the important extensions that I use with VS Code.
1. Auto Rename Tag
Tired of manually changing the opening and closing tags when working on HTML/JSX? Auto Rename Tag is here to help.
Just install it and let it handle replacing the opening/closing tags anytime you adjust any of them; every time you rename an opening or closing tag, this extension will update the other one.
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
2. Color Highlight
Simple yet powerful extension for highlighting colors with the actual color border or background in real-time for all files, so you don’t have to waste time finding out the color for a specific value the next time.
Color Highlight - Visual Studio Marketplace
This extension styles CSS/web colors found in your document. In VS Code press Ctrl+Shift+P (Cmd+Shift+P on Mac) then type…
3. Code Spell Checker
Ensuring code is free of typos is a pain for developers and reviewers both since we frequently leave out little spelling mistakes here and there in the code, whether in code, content, or comments, but this extension highlights these typos in real-time and also supports camelCase and snake case.
It also supports adding a list of custom-defined words you might declare false positives.
Code Spell Checker - Visual Studio Marketplace
Extension for Visual Studio Code - Spelling checker for source code
4. CodeSnap
How about snapping a lovely snapshot of your code directly from VS Code
Simply install this extension, hit Ctrl + Shift + P, search for CodeSnap, choose the code you want to capture, and your snapshot is ready to share!
You can copy/download the file from that location.
CodeSnap - Visual Studio Marketplace
📸 Take beautiful screenshots of your code in VS Code! Quickly save screenshots of your code Copy screenshots to your…
5. Error Lens
One of my personal favorites on the list, I can’t express how much this extension helps in debugging code by showing errors and warnings (with color codes) on the editor itself, reducing the need to hover over the red line at all times.
Error Lens - Visual Studio Marketplace
Overview Version History Rating & Review ErrorLens turbo-charges language diagnostic features by making diagnostics…
6. Git Lens
Git Lens gives a fast look into who changed a line or code block and why.
It has file markings (blame and changes) and sidebar views, among other features.
GitLens - Git supercharged - Visual Studio Marketplace
Extension for Visual Studio Code - Supercharge Git within VS Code - Visualize code authorship at a glance via Git blame…
7. Live Server
This was the first extension I used with VS Code, and I enjoyed it for the flexibility it gives for local work especially.
It allows you to start a local development server with hot-reloading for static and dynamic pages.
Live Server - Visual Studio Marketplace
Live Server loves 💘 your multi-root workspace Live Server for server-side pages like PHP. Check Here Launch a local…
8. SVG Preview
This extension adds support for a live preview of SVGs as well as live editing of SVGs from within VS Code.
SVG Preview - Visual Studio Marketplace
Live editing of SVG files and SVG's inside files Panning and zooming of the preview (up to 32767%) Command Keybinding…
9. Turbo Console Log
This is a must-have for JavaScript and TypeScript developers since it lets for the addition of useful log messages by just picking the variable and using a keyboard shortcut (Ctrl + Alt + L).
It also supports commenting/uncommenting all log messages added by the extension in the current document.
Say goodbye to manually inputting log messages.
Turbo Console Log - Visual Studio Marketplace
This extension makes debugging much easier by automating the operation of writing the meaningful log message. I) Insert…
10. TypeScript Error Translator
TypeScript errors may be rather confusing and frustrating at times, but this extension turns the error into a human-readable form direct from the IDE.
Total TypeScript - Visual Studio Marketplace
Learn TypeScript from within your IDE. Get helpful hints on syntax, and get translations of TypeScript's most cryptic…
11. Indent Rainbow
By changing various colors on each step, this extension makes the multi-step indentation easier to read.
This is especially useful for indentation-dependent languages like Python and Yaml, but it also works for non-dependent ones.
indent-rainbow - Visual Studio Marketplace
If you use this plugin a lot, please consider a donation: This extension colorizes the indentation in front of your…
Thank you for taking the time to read this.
If you found this article interesting, please follow me so that I can stay motivated.
Also, leave a comment with your favourite VS Code extensions.
- 登录 发表评论