MEMEPh. ideas that are worth sharing...

The VS Code plugin that makes development efficiency

Foreword


VSCode, is a free, open source, cross-platform editor, and one of my favorite editors.

This article recommends some of my favorite vscode plugins to everyone. If nothing else, these plugins will help you improve your work efficiency!

 

GitLens

The Git experience in VS Code strikes a good balance between ease of use and completeness, allowing most users to get work done without being intimidated by too many features. But many hardcore Git users will definitely feel that the features are not enough. including but not limited to:

However, the appearance of the GitLens plug-in makes up for the above shortcomings.

Similar Extensions:

 

Quokka.js

Quokka.js is a live code platform for JavaScript and TypeScript. This means it will run your code as soon as you type it and display various execution results in your code editor. I suggest you try it yourself.

From the dynamic graph above, we know that Quokka is a debugging tool that provides real-time feedback on the code you're writing. It can preview the function of the variable and the result of calculating the value.

 

Visual Studio Intellicode

With over 3.5 million downloads, Visual Studio Intellicode is the most downloaded plugin for Visual Studio. And, in my opinion, it will be one of the most useful plugins you will ever use.

This plugin helps developers generate smart code completion hints, and it has built-in support for many programming languages.

Visual Studio Intellicode uses machine learning techniques to find some coding patterns by studying the code of a large number of GitHub projects, and then give code hints as you code.

 

Debugger for Chrome

If you want to debug JavaScript programs, you don't have to leave the VSCode development environment .

The Debugger for Chrome plug-in can do this. It is released by Microsoft and allows you to directly debug the source files of web pages in VSCode. The plug-in mainly uses the interface opened by Chrome to debug the rendered pages.

 

Auto Rename Tag

Whichever framework you choose, if you want to change an H2 tag to an H3 tag when there are more than 50 lines of code between the opening and closing tags, or you want to change a div tag to a span tag, whatever you do, You're wasting time looking for closing tags, this is the time to use this plugin -- Auto Rename Tag

This plugin will automatically match the end tag to the corresponding end tag when you modify a tag, and vice versa.

 

SCSS IntelliSense

Creating variables in SCSS is a great experience. But after creation, do you remember them? Most probably don't remember.

With this plugin, you can quickly get those SCSS variable names you invent anywhere in your application. No more remembering those names or doing file searches.

 

ESLint

The ESLint plugin integrates ESLint into Visual Studio Code. If you don't know this plugin yet, let me briefly say that this plugin will statically analyze your code and quickly find problems in the code.

Most problems found by ESLint can be fixed automatically by it. ESLint will automatically fix based on the syntax used by the current file, so there will be no syntax errors like traditional "find-and-replace" algorithms.

Best of all, ESLint is highly customizable .

 

Prettier

Prettier is a useful plugin for developers who want to strictly adhere to a set of coding rules.

And, it's a robust, stereotyped code formatter that can beautify your JavaScript/TypeScript/CSS code with one click.

 

Winter

Vetur is a must-have Vue development tool . Supports a variety of features, such as syntax highlighting, error detection, Emmet and Snippet, and more.

 

Code Runner

To date, Code Runner has more than 3 million downloads, runs the code with one click, and supports more than 40 languages.

After installing Code Runner, open the file you want to run, there are several ways to quickly run your code:

In the editing area, right-click and select Run Code
Keyboard shortcut Ctrl+Alt+N
Shortcut F1 to bring up the command panel, then enter Run Code
In the file manager on the left, right-click and select Run Code
The small run triangle button in the upper right corner

 

Path Intellisense

Path Intellisense can quickly improve your development efficiency. If you're working on multiple projects at the same time, and using a lot of different technologies, you definitely want a handy tool that can help you remember file paths.

This plugin can save you a lot of time in this area and help you save time finding the correct file path.

 

Color Picker

When writing HTML and CSS, you may often need to change the color of elements. VS Code provides a graphical interface for modifying colors, which includes color-related properties.

When you open a piece of HTML or CSS code, you can see that VS Code draws a square (ie Color Decorator) in front of the color to display the final effect corresponding to this color attribute. Then when you move the mouse over this code, a color picker window is displayed, adjust the colors according to your needs.