跳转到主要内容

扩展使我们能够修改和增加开发经验,同时提高生产力。

VS Code Extensions

Photo by Godfrey Nyangechi on Unsplash

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

Extension that auto rename tag
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

marketplace.visualstudio.com

2. Color Highlight

Extension that highlight code into color
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…

marketplace.visualstudio.com

3. Code Spell Checker

Extension that checks spell
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

marketplace.visualstudio.com

4. CodeSnap

Extension that gives lovely snapshot of your code.
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…

marketplace.visualstudio.com

5. Error Lens

Extension that debugging code by showing errors and warnings
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…

marketplace.visualstudio.com

6. Git Lens

Extension that gives a fast look into who changed a line or code block and why.
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…

marketplace.visualstudio.com

7. Live Server

Extension that flexibility it gives for local work
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…

marketplace.visualstudio.com

8. SVG Preview

Extension that support for a live preview of SVGs
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…

marketplace.visualstudio.com

9. Turbo Console Log

Extension that gives useful log messages
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…

marketplace.visualstudio.com

10. TypeScript Error Translator

Extension that turns error into a human-readable form
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…

marketplace.visualstudio.com

11. Indent Rainbow

Changing Colors Extension
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…

marketplace.visualstudio.com

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.