Vscode and its plug-ins

Time:2020-4-1

1. Introduction to visual studio code

Sharp tools make good work. Software developers not only need to improve their soft power, but also need to find the right tools. The protagonist to be introduced today is visual studio code, or vscode for short, from Microsoft.

Vscode is a code editor, and the core user group is the software developer. Of course, some people call vscode lightweight IDE, which seems to be no mistake. Well, let’s take a look at a classic screenshot. This screenshot is from Erich gamma’s keynote speech at spring one 2017.

Vscode and its plug-ins

πŸ“š Erich gamma introduces vscode positioning in favor of Editors

Erich gamma introduces the positioning of vscode, which means that the positioning of vscode is an editor, but mainly for programmers, so it should be able to understand the code and provide some debugging capabilities.

We all understand that ordinary editor ability is nothing more than daily editing function. The ability of code understanding needs to prompt the user according to the content currently edited by the user (such as function parameter prompt), help the user to complete code coding quickly (such as automatic completion), and even provide some functions of code static check and reconstruction. For this reason, vscode and typescript jointly developed LSP (Language Service Protocol). Based on LSP, any language can implement language services that conform to the protocol. Any editor can use these services through LSP to provide users with editing experience based on language understanding.

A good editor needs not only practical functions, elegant interface, comfortable operation experience, but also good ecology and active community support. I’ve seen a lot of editors that have been developed by people themselves are short-lived and soon disappear. If they have good ecological and community support, they will certainly develop better. There is a blog called “why can vs code be so good?”? 》It explains why vscode has developed so well from the perspective of product and technology. Interested friends can look for it.

Because vscode has good ecology and strong community support, there are many plug-ins that can enhance its editing ability. These plug-ins can be found at HTTPS: / / marketplace. Visualstu. If you don’t think this address is easy to remember, you can simply remember the homepage of vscode https://code.viusalstudio.com/. Enter it at the “extensions” above.

Here are some plug-ins that I carefully selected in my daily work, recommended to you. But first of all, the use of plug-ins has a lot to do with personal working environment. I mainly work in C ා,. Net and JavaScript related technologies. For larger. Net projects, visual studio is generally used. So vscode plays three main roles here:

  • Main tools for front-end development.
  • Other single code editing tools, such as single.cs、.java、.groovy、.json、.mdAnd so on. Because if the source files are organized by projects, professional ides are usually used, such as visual studio, eclipse, etc.
  • Git client.

Therefore, plug-ins are also related to these functions.Now let’s officially recommend plug-insβ€”β€”On the surface, we recommend the plug-in of vscode,It’s actually recommending some tools。

2. EditorConfig for VS Code

https://marketplace.visualstu…

In team development, you can use editorconfig (https://editorconfig.org/) to synchronize editor settings and unify development specifications. At present, many well-known editors and ides support editorconfig either natively or through plug-ins. Editorconfig lists the editors and ides that support this standard on the official website to see if the editors and ides you are used to are listed.

Used in projects.editorconfigTo configure editing options, please refer to the official document (https://editorconfig.org/ ා file format details) for specific configuration instructions. Here is a simple configuration example:

[*] (configure all files
Charset = UTF-8 ා use UTF-8 encoding
Indent? Style = space? Indent with spaces
End of line = lf use UNIX newline

[*.js]
Indent? Size = 4? JS file indented to 4 units (space configured in front)

[*.{json,xml}]
Indent? Size = 2? JSON and XML files indented to 2 units

Because editorconfig allows extension, there are even ide customized configuration items for the language, such as visual studio 2019:

[*.cs]
#Empty check related configuration
csharp_style_throw_expression = true:suggestion
csharp_style_conditional_delegate_call = true:suggestion

#You can even configure not to prompt some warnings in the editor
[*.cs]
# CS1591: Missing XML comment for publicly visible type or member
dotnet_diagnostic.CS1591.severity = silent

After using eidorconfig, team collaboration development will neverNever mindThe code format is not uniform. Because editorconfig has a cross editor standard like LSP, team members can use the same code format standard even if they prefer to use different editors or ides.

3. Bracket Pair Colorizer 2

https://marketplace.visualstu…

This plug-in can use color highlight matching brackets to enhance code reading. Let’s take a look at the whistling but practical bracket matching in the flowers:

Vscode and its plug-ins

πŸ“š Color matching of bracket pair colorizer 2

In addition, there can be some wiring to show the relationship between parentheses. Notice the difference between matching brackets and auxiliary lines when the cursor is in different positions in the figure below.

Vscode and its plug-ins

πŸ“š Use a line to indicate the bracket closest to the cursor

It’s a good habit to write code with good indentation and concise code. Although the plug-in will have some discount in good code style, it’s still very important to find the correct matching brackets when the functional code runs horizontally.

4. ESLint

https://marketplace.visualstu…

Eslint is a static checking tool for JavaScript and typescript code, which can check out the non-conforming parts of the code, as well as the possible logical errors identified from syntax. It is almost a necessary tool for front-end development. Vscode uses the eslint plug-in to check the code during editing, highlight the detected problems, and provide quick repair function for problems that can be automatically modified.

When using vscode to develop NPM projects, the plug-in will automatically usenode_modues/eslintTo check. Use the following command to install esling in the project:

my-project> npm install --save-dev eslint

If it is outside the editing project.jsor.tsFile, you need to use theeslint。 Install the global eslint as follows:

npm install -g eslint

If there is an eslint configuration file in the project(.eslintrc、.eslintrc.json、.eslintrc.jsThe plug-in will check according to this configuration. If not, check according to the global configuration. Global configuration in

  • Windows: %userprofile%\.eslintrc.*
  • Linux: ~/.eslintrc.*

In particular, typescript officially announced full support for eslint,

There was also a plug-in called tslint, but its GitHub project homepage readme made it clear:TSLint is deprecated.。

Vscode and its plug-ins

πŸ“š Tslint has declared that it is out of date. Use eslint instead

The typescript code is now checked by eslint, which is what tslint’s typescript eslint (https://github.com/typescript-eslint/typescript-eslint) plug-in does.

5. Git Graph & GitLens

Git is one of the common tools in modern development. Git installed by default provides command line operations. Git windows can also install a default GUI client at the time of installation. In addition, GIT also introduces many git GUI clients on the GUI client page (https://git-scm.com/download/gui/windows). But how to say, for me, those who don’t charge are not used to it, and those who are used to it need to be charged. So in the end, just use the built-in git function of vscode. With plug-ins, daily operation is completely OK.

Two git plug-ins are recommended here, GIT graph and gitlens.

Git Graph: https://marketplace.visualstu…
GitLens: https://marketplace.visualstu…

Git graph is a beautiful submission history viewing tool, and it also supports some shortcut operations on the history submission records, such as creating branches, creating labels, merging branches, cherry pick, etc. Without too much introduction, you can directly see the renderings:

Vscode and its plug-ins

πŸ“š Git graph is a beautiful presentation of submission history

Gitlens’s official introduction is very detailed, so it’s needless to say here, just the two functions I usually use:

  1. Compare the two branches directly in the compare interface. The local branch or the remote branch can participate in the comparison.

    Vscode and its plug-ins

    πŸ“š Gitlens compares two branches

  2. For git based code management, it is often necessary to push the task branch to the server, merge it through PR, and then delete the task branch. Although the remote end is deleted, it is localoriginIt also keeps records and needs to be usedgit remote prune originCommand cleanup. To be honest, I can’t remember this command if I’m not used to it. However, in the repositories interface of gitlens, right-click “remove β‡’ align” under git library to directly clear the origin, which saves me the trouble of writing the command line.

    Vscode and its plug-ins

    πŸ“š Gitlens cleaning origin

6. Todo Tree

https://marketplace.visualstu…

I wonder if you have the habit of writing tasks in code comments, such asTODO,NOTE,FIXMETask tags like that. Todo tree is a tool for retrieving and managing these task tags.

Vscode and its plug-ins

πŸ“š Todo Tree

Which task tags are supported and which colors and icons are used for each tag can be set in user configuration:

"Todo tree. General. Tags": [// supported task tags are configured here
    "TODO",
    "FIXME",
    "DEBUG",
    "NOTE"
],
"Todo tree. Highlights. Customhighlight": {// configure colors and icons here
    "DEBUG": {
        "foreground": "#909090",
        "icon": "tools",
        "type": "text-and-comment"
    },
    "FIXME": {
        "foreground": "#f33958",
        "icon": "bug",
        "type": "text-and-comment"
    },
    "NOTE": {
        "foreground": "#4375cd",
        "icon": "pencil"
    },
    "TODO": {
        "foreground": "#ffca28",
        "icon": "checklist"
    }
},
"Todo tree. Highlights. Defaulthighlight": {// this is the default color (if the above configuration does not match)
    "foreground": "#dcd079",
    "opacity": 50,
    "type": "tag"
},

7. Live Share

https://marketplace.visualstu…

This is an important tool for collaborative development. If the team is not together and needs some collaboration, this tool is very useful.

  • When we need to discuss code together, do we rely on screenshots?
  • When you check the code and see that it’s a mess and it’s hard to explain how to change it to the other party, should you choose to withdraw from “fishing” and ask for “fish”?
  • When the team members can’t adjust bugs for half a day and need help, how to adjust them?
  • ……

The team is not together, and collaboration is basically based on screenshots, videos, and remote assistance. Low efficiency of screenshots, unclear video, remote operation card Then you can use live share at this time. After the host starts the live share session, they can invite members who use live share to join, and then you can

  • See the same set of codes and edit them according to the authorization of the host;
  • You can see the operation of the other party, including cursor movement, code editing, etc;
  • When debugging, you can even see the value of each variable. Note that this is not the host is looking at the variable value, is to see which point which Oh!

Visual studio also has a live share plug-in. Vs and vscode can share together without using the same editor or IDE. For the remote collaboration team, this plug-in is so easy to use!

8. Visual Studio IntelliCode

https://marketplace.visualstu…

We all know that code prompt is easy to use and automatic completion is easy to use. However, these functions based on LSP are dead after all. They are well configured and have no different prompts according to SDK. If I could be more intelligent, for example, when I wrote Java programs, idea would automatically recommend variable names based on types

So, you need intellicode. This plug-in is called visual studio intellicode because it comes from visual studio. It brings intelligent code prompt function, including enhancing code prompt, recommending common methods, attributes, etc. It is said that the recommendation information comes from big data analysis of a large number of codes on the network.

Vscode and its plug-ins

πŸ“š Visual studio intellicode intelligent prompt

In the picture, the star is the content of the intelligent prompt. You see, inputconsole.When pop-up suggestions, common methods are listed in the front end, which is much faster to select.

Unfortunately, vscode only supports python, JavaScript / typescript and Java. If you need support for languages like C + + and C + +, please use visual studio.

9. Other plug-ins

There are many vscode plug-ins, which need to be found directly in the market. Those with large download volume and high voting number can be used directly if they meet the requirements. Used not easy to unload and then find the next; used easy to post a blog to share.

In addition to the plug-ins described above, I also use many other plug-ins. Because of the limited space, I will not expand the introduction. These plug-ins include (alphabetically, no link, just go to the plug-in market to search):

  • ASCII tree generator, which can generate a tree represented by ASCII characters according to the directory structure or indentation structure.
  • Change case, which is used to change the case style of variables.
  • Code runner, temporary run segment code.
  • Insert guid, used to generate UUID / guid.
  • Makrdown all in one, markdown extended function family bucket. But I like to edit markdown with typora recently, so I use it less.
  • Markdown TOC, number by title, generate directory and other functions. Markdown all in one does not include these functions, and typora does not include the function of numbering by title, so this plug-in is still very useful.
  • Material icon theme is a set of file icons. There are many vscode icon sets. Let’s see what you like.
  • Partial diff, used to compare partial text. Vscode provides the comparison between files, but if you want to compare only part of the text, or even the selected text with the clipboard, you need this plug-in.
  • Rest client, a lightweight rest testing tool, does not need to start postman.
  • Sort JSON objects is suitable for compulsive friends to sort JSON attributes.

This sharing ends here. If you know other useful plug-ins, you may as well leave a message / comment to share!


Vscode and its plug-ins

Please pay attention to the official account.Border Town Inn⇗

Don’t leave after reading it. Please give me a compliment. It’s OK to appreciate it!