This article was to let you double development efficiency VSCode plug-in configuration (on) “sequel, including VSCode appearance enhancement, enhancements, coding efficiency of 10 plug-in, among them are part of the plugin is released after the previous article in the comments I learn the (this is probably the biggest advantage for writing technical articles, haha), After trying it out, I think it is good, and now I will list it (also thank the students who are willing to comment and exchange). I hope it will be helpful to the students who read this article.

Appearance enhancement

If good food needs to be complemented by beautiful utensils, elegant and beautiful code editors will greatly enhance engineers’ coding experience and happiness at work.

Guides indent references

Instead of built-in Indent Guides, Guides allow you to modify the color, style, background color of the Indent Rainbow, and even configure Guides that look like Indent Rainbow with configuration items. Here is how the guide configures when I’m using a Solarized Dark theme:

{
    "guides.normal.color.dark": "Rgba (91, 91, 91, 0.6)"."guides.normal.color.light": "Rgba (220, 220, 220, 0.7)"."guides.active.color.dark": "Rgba (210, 110, 210, 0.6)"."guides.active.color.light": "Rgba (200, 100, 100, 0.7)"."guides.active.style": "dashed"."guides.normal.style": "dashed"."guides.stack.style": "dashed",}Copy the code

The actual renderings are as follows:

TODO Highlight

TODO Highlight is a great way to Highlight these keywords as you scroll through the code. It’s like a loud reminder to get rid of them as soon as possible. Keywords that need to be highlighted to support custom configuration, where the actual comparison is that TODO, FIXME, and the like must be followed by a colon or they won’t be highlighted. The screenshot is as follows:

enhancements

Settings Sync

Settings Sync is based on Gist to back up and restore the VSCode user configuration, shortcut key configuration, and list of installed plug-ins. The configuration process is detailed and precise. The generated backup Gist is private by default, and if you want it to be shared, you can switch it with one click. You may think that the machine does not need to be backed up, in my actual experience, a lot of tragedy happened without backup, believe you smart you know what to do, haha!

Git Lens

Git Lens optimizes the use experience of VSCode combined with Git to the extreme, enabling us to know where the cursor is, when the code is modified, author information and so on without leaving the editor or executing any commands. The official introduction is also very good:

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Code Outline

Code Outline lists various symbols in source Code, such as variable names, class names, method names, and so on, in a separate window, and supports quick jumps. Similar to Ctags in Vim, Code Outline is useful when looking at old Code and open source project Code.

Coding efficiency

The ultimate in efficiency is to automate what can be automated. Here are four gadgets that can help eliminate the duplication of common editing needs:

Document This

Document This can annotates classes and functions in code with one key, supporting function declarations, function expressions, arrow functions, etc.

Embrace

Embrace quickly adds various quotes and parentheses around the selected code without moving the cursor back and forth, but is still not as strong as the Surrounding plug-in in Vim.

ECMAScript Quoets Transformer

ECMAScript Quotes Transformer allows you to convert back and forth between String Concat code and Template Literals without having to manually move the cursor, modify Quotes, etc.

Code Spell Checker

Code Spell Checker is highly recommended. For most non-native English programmers who don’t want to write variable names, it can be a challenge to remember the correct spelling of a word. Many bugs are caused by spelling mistakes.

Code Runner

Code Runner, a veritable Code running plug-in that supports dozens of languages, can directly execute Code and view the output through the command panel without leaving the Code editor. Here are the stolen images:

Other configuration: The space at the end of the line, the blank line at the end of the file, previously needed to use the plug-in, now directly modify VSCode built-in configuration to achieve:

{
    "files.trimTrailingWhitespace": true."files.insertFinalNewline": true."files.trimFinalNewlines": true
}
Copy the code

Write in the last

There is an old saying that “if you want to do a good job, you must first use The tool”. VSCode is a light and flexible tool among many code editors. Many of The tools are worth studying in their own right. Avoid the jokes about putting bicycle wheels on a Ferrari by reading the official documents and understanding the capabilities and limitations of your own tools. If you really want to install new wheels, it is recommended to read the instructions of the new wheels carefully.

Stay tuned for the next installment in this series, which is devoted to debugging tools.