This is the second day of my participation in the More text Challenge. For more details, see more text Challenge

The last article documented the efficiency tool VsCode shortcut. Here is a record of some of their own commonly used Vscode plug-ins, here is a list of some of their own, we all know must not list (such as: Vue standard with Vetur) to do a good job, must first improve its tools

menu Extensions (plug-ins)
recommended Settings SyncMulti-party collaboration synchronization configuration
recommended GitLens
The efficiency of Todo Tree
Touch the fish Leek box,Little overlord,zhihu,The Denver nuggets.
The theme Dracula Official or Snazzy Operator
The font Fira Code
icon vscode-icons
The highlighted Bracket Pair Colorizer
color color highlight
annotation Better Comments
automation Eslint
automation Tslint
automation Regex Previewer
beautify Prettier
git GitLens
git Git History

First, beautify the interface theme

First of all, we need to create a beautiful interface to protect our eyes. Of course, after tapping on the screen for a period of time, we can take a rest and look out the window to see the plants

1. [Theme] :Dracula Official or Snazzy Operator

Recommend current in use, a very good-looking theme style

1. 2. The United StatesFira Code

Features: Use fonts like “!= “–>” ≠ “or” >= “–>” ≥ “to improve code readability. A font designed for programmers who write programs, it is the main font family of Mozilla. One of them is Fira Code, which is designed to write programs.

You can also set Chrome’s uniform width font to Fira Code: Settings > Appearance > Custom Font.

V1.204 can be downloaded here -> github.com/tonsky/Fira…

2. 3. Smart Carvscode-icons

To use it, configure it as follows (setting.json)

"workbench.iconTheme": "vscode-icons".Copy the code

4. 4. Smart CarBracket Pair Colorizer / Indenticator

Color the parentheses so you can distinguish the different blocks

5. 5. Smart Carcolor highlight

Hexadecimal color [#0366d6] Nuggets blue edit area displayed

6. [C].Better Comments

The plugin provides a fancy way to make comments by typing certain characters at the beginning of a comment to change the style of the comment (as shown in the figure above). Most importantly, you can customize the style of the comment: go to Extensions > Right click > Extension Settings and customize the configuration in setting.json

{
  "tag": "todo"."color": "#FF8C00"."strikethrough": false."underline": false."backgroundColor": "transparent"."bold": false."italic": false
},
Copy the code

2, code detection CodeLint

Using plug-ins to automatically detect errors in code writing can help us standardize code and reduce the probability of bugs

7. Eslint

8. TSLint

9. TypeScript Hero

10. Regex Previewer

Regular preview tool, real-time matching corresponding rules

Three, automatic completion Automation

11. A path:Path Intellisense

Name: 12.Codelf

Variable naming is a headache, try this plugin (go to the website: Codelf)

13. vscode-fileheader

14. Better Aligngeneral

Align the selected code by opening the command window with Shift+Ctrl+P and typing Align. Aligned by:, all: are in the middle.

Git plug-in

15. Git History

16. GitLens

17. Git Blame

Browser/Server static service

18. [Browser]Open in Browser

Open the local HTML file by pressing Alt + B

19. [Browser]Open in Default Browser

In the default browser to open the HTML file, start a based on the local server: localhost: 52230 / index. HTML

20. [Local Services]Live Server

Quickly start a local service, easy HTML file preview debugging, etc

Format code, beautify formatCodeStyle

21. 【 Format 】Prettier

Prettier is an “independent” code formatting tool that keeps the style of output code consistent.

Other or touch fish

  1. Vetur
  2. Markdown Preview Enhanced
  3. “Fishing”Leek box,Little overlord,zhihu,The Denver nuggets.

trailer

The next installment updates Vscode configuration optimizations for snippets to improve development efficiency

【Calm down & Carry on】