The sea is wide by diving, and the sky is high for birds to fly. Hey how are you! I’m Ed Chin. 😄

Ordinary work fish, even thinking about how to get paid to shit? No, no, no, today we’re going to talk about some useful plug-ins in vscode that increase productivity.

In the previous to share to present “old paddlers” 10 improve the happiness index of VScode “fish magic” after the release of this article, but also harvest a lot of friends of the thumbs up, we can not all day long fish, still have to do something serious. Hereby, I have sorted out some useful VScode plug-ins, if you feel good, welcome one key three, your thumbs up, is the biggest motivation for me to continue to write 🙈🙈🙈

This article from the basic necessary, code specification, development artifact three aspects to recommend, all aspects are involved, with these artifact let us together happy code!

😏😏😏 High energy ahead, multiple picture warning 😏😏 30000

Basic universal plug-in

Chinese

vscodeEditor Chinese package, after installation, inlocale.jsonadd"locale": "zh-cn"To load the Chinese (simplified) language pack.

Auto Rename Tag

Automatically renames pairsHTMLTag, modify the start tag, and the end tag will be modified synchronously

HTML Snippets

HTML snippets. This plugin gives you code hints for HTML tags without typing Angle brackets

Bracket Pair Colorizer

The plugin lets you color pairs of parentheses and provides a cable to connect them. So we can review the structure of the code.Modify the configuration file so that the structure line is highlighted and eaten better

"workbench.colorCustomizations": {
  "editorIndentGuide.activeBackground": "#00ffea"
},
Copy the code

CSS Peek

CSS style viewer, can quickly view our CSS style, very convenient and quick

Npm Intellisense

Can automatically complete the NPM module in the import statement

open in browser

Quickly open thehtmlPreview file to browser

vscode-icons

Provides a very beautiful directory tree icon theme

Auto Close Tag

Automatic closingHTML/XMLThe label

Path Intellisense

Automatic prompt file path, support all kinds of fast import files

Image preview

Hover over the link to preview the image in time

Beautify

Right-click the code file and format it with one mouse buttonhtml,js,css

JavaScript (ES6) code snippets

ES6 grammar intelligent prompt, as well as fast input

Vetur

VScodeOfficial Vue plug-in,VueEssential for developers. Contains syntax highlighting, intelligent hints,emmet, error message, format, auto complete,debuggerAnd other practical functions

Code style specification class plug-ins

ESlint

Specification JS code writing rules, if feel too rigorous, can be customized rules

TSLint

Ts writing specification, this plug-in is a series that also providesTSLint (deprecated).TSLint Vue.TSLint Vue-TSX

Code Spell Checker

It’s a spell checker that checks for unusual words and gives a warning if a word is misspelled

koroFileHeader

invscodePlugins: support all mainstream languages, powerful, flexible and convenient, complete documentation, easy to eat!

Not only that, it also generates some really interesting comments, like this fire-breathing dragon…

Better Align

Clean, neat code is often a measure of a programmer’s quality, this plugin can make your code more elegant layout

Select the code and key combination[Ctrl+Shift+p], the inputAlignCan be,

change-case

In general, we can name a variable with a hump, all caps, or an underscore. This plugin can solve the problem of variable naming conventions

Select the variable and key combination[Ctrl+Shift+p], enter the corresponding format

Extension.changeCase.com mands: list all "to change the case," if only select a word, the extension is a preview. ChangeCase. Camel: change case 'camel' : Is converted into a string, and the next letter said separators. The extension changeCase. Constant: change case "constants" : converted to uppercase letters, underscore separator string extension. ChangeCase. Dot: change case "dot" : String converted to lowercase, splitting the extension. ChangeCase. Kebab: change case "kebab" : converted to lowercase letters, with a dash delimited string parameter name (alias) extension. ChangeCase. The lower: Change case as a "small" : converted to lowercase string extension. ChangeCase. LowerFirst: change case "lowerFirst" : transformation, led by letters lowercase string extension. ChangeCase. No: Transformation without any case string (lowercase letters, space-delimited) extension. ChangeCase. Param: change case for the 'param' : converted to lowercase letters, with a dash delimited string extension. ChangeCase. PASCAL: Change case "PASCAL" : convert expressed in the same way as the camelCase strings, but also first letters capitalized extension. ChangeCase. Path: change case "path" : Converted to lowercase, with slashes delimited string. The extension changeCase. Sentence: "sentence" change case: converted to lowercase space-delimited string extension. ChangeCase. Snake: change case "snake" : Converted to lowercase letters, underscores delimited string extension. ChangeCase. Swap: change case "swap" : the conversion for each case instead of string extension. ChangeCase. Title: change case "title" : Convert to space-delimited string, the first character of each word is capitalized extension. ChangeCase. Upper: change case for capital: converted to uppercase string extension. ChangeCase. UpperFirst: Change the case to "upperFirst" : Converts the first letter to uppercaseCopy the code

Better Comments

This plug-in can enrich the annotation color and keep the annotation alive. If you want to customize the style, you need to write configuration code

[{"tag": "*", "color": "#98C379", "strikethrough": false, "backgroundColor": "Transparent"}] Use // * green highlight commentCopy the code

TODO Tree

We often use TODO in our code to mark up our code and improve readability. The TODO Tree plugin provides a visual window to view and manage our TODO Tree

GitLens

GitLensCan help you understand the code better. A quick look at an object that changes lines or blocks of code, powerful, rich, and highly customizable to meet your needs

GitHistory

GitHistoryCan view and search git logs, graphics and detailed information, but also support branch comparison, branch management and other operations, very convenient

Other plugins (Artifacts)

Partial Diff

File comparison is a very common scenario, and it can be tiring and error-prone if you look at it with the naked eye. Partial Diff solves this problem

Markdown All in One

This artifact allows us to happily write Markdown in vscode, which is very powerful. Provides rich shortcut keys, can write while watching, easily converted to HTML or PDF files, very easy to use, highly recommended

vscode-drawio

This artifact allows us to happily draw flow charts in vscode. Create a.drawio file and drag it to vscode to get 👇

Polacode-2020

This artifact can turn our code into a full image when writing articles or sharing code. A picture like this is much more respectable than a random screenshot

REST Client

This tool allows us to debug interfaces in vscode, providing a rich API configuration, so that we can call the interface debugging at any time without leaving the editor

Create a.HTTP file, write down the basic test code, click Send Request and you can view the interface return results in the right window, very nice, highly recommended

For more information about usage configurations, see the official documentationportal

Browser Preview

This artifact allows us to open the browser in VSCode, while coding while viewing, occasionally can also be used to fish, very human, highly recommended

JavaScript Booster

This artifact can be written in our code is not standard or need to adjust the place, after the cursor focus, will have a small light bulb. Will prompt the corresponding unreasonable reasons and improvement plan. Greatly improves the elegance of our code and is highly recommended

Make your life easier by using code actions to perform repetitive tasks for you! They can help a lot, just follow the light bulb 💡!

This VS Code extension provides a variety of Code manipulation (quick fixes) when editing Code in JavaScript (or TypeScript/Flow). Just look at the light bulb on the left and click on it to see how to switch codes under the cursor.

Settings Sync

This gadget can synchronize our VSCode configuration to the cloud. When we change computers or install VSCode again, we only need to log in to synchronize the configuration, instead of starting from scratch again. It’s not too good. It’s highly recommended

Live Share

This artifact enables you to collaborate on editing and debugging with others in real time, no matter what programming language you use or the type of application you’re building. What does that mean? It means that multiple people can edit a piece of code at the same time, almost like code sharing. I have to say, this is amazing, and I strongly recommend it,

Copy the description on the website

Visual Studio Live Share enables you to collaborate on editing and debugging with others in real time, regardless of which programming language you use or the type of application you’re building. It enables you to instantly (safely) share the current project, and then share debug sessions, terminal instances, localhost Web applications, voice calls, and more as needed! Developers who join your session get all the editor context from your environment (e.g., language services, debugging), ensuring that they can start collaborating efficiently immediately without cloning any repositories or installing any SDKS.

In addition, unlike traditional pair programming, Visual Studio Live Share allows developers to work together while retaining their personal editor preferences (such as themes, key bindings) and their own cursor. This way, you can transition seamlessly between each other and explore ideas/tasks on your own. In practice, this ability to work together and independently provide a collaborative experience is likely to have more natural common use cases.

Ok, this is what I recommend for you 33 vscode plug-ins, hope you like it. In addition, the epidemic has become serious again recently. I hope you are healthy and put on your masks. Let’s go through this difficult 2020 smoothly. Come on!

Spread flowers, spread flowers 🌸🌸🌸🌸🌸 30000 30000

Click 👍 to see, has become a habit! This series will continue to be updated, and your three keys are the biggest motivation for me to continue writing. If you have any comments and suggestions on this blog, please leave a message! Welcome to the disturbance! 😜 😝

I am Qin Ed, a programmer who survives in the cracks of the Internet!