Everything you should know when you first use VS Code

preface

This article is updated on 2020-06-19. There is no need to worry about this article becoming obsolete, as it will be updated as VS Code releases and plug-ins are updated.

The latest content of this article will also be updated on GitHub. Welcome to Star.

VS Code is so cool and easy to use that more and more young Internet users are using it.

You Yuxi Da commented on VS Code like this:

You might be surprised to know that VS Code itself is written in JavaScript (check out Electron, a JS-BASED client development framework, for details). In 2007, Jeff Atwood proposed the famous Atwood Law:

Any application that can be implemented in JavaScript will eventually be implemented in JavaScript.

It doesn’t matter who Jeff Atwood is (he’s the co-founder of Stack Overflow), it’s the law.

The front end is in the Spring and Autumn period, the warring States period, various heroes become waves, a variety of framework tools emerge in endlessly, VS Code software is undoubtedly the most proud of the front end of the era of tools.

If you’re doing front-end development (mostly in the JavaScript programming language), you can use VS Code as a “workhorse development tool.” This software is tailor-made for front end students.

If you’re doing development in another language and don’t need a complex INTEGRATED development environment, you can use VS Code as a “Code editor” to keep things smooth.

Even some of you who write and document often use VS Code as a Markdown writing tool.

Best of all, even if you don’t fall into any of these categories, you can use VS Code as the simplest text editor, beating out Notepad on Windows.

In writing this article, I am riding the tide.

Introduction to VS Code

VS Code stands for Visual Studio Code, which is an open source, free, cross-platform, high-performance, lightweight Code editor. It’s great in terms of performance, language support, open source community.

IDE vs. editor

There are differences between an IDE and an editor:

• Integrated Development Environment (IDE) : It has good intelligent prompts and mutual jumps for code, and focuses on engineering projects. It has good graphical interface support for project Development and debugging, so it is relatively cumbersome. For example, Eclipse is positioned as an IDE.

• Editor: Much lighter, focusing on text editing. For example, Sublime Text’s positioning is the editor. For example, the Windows “notepad” is the simplest editor.

It should be noted that VS Code is positioned as an editor, not an IDE, but VS Code is much more versatile than a typical editor. Think of it this way: The size of VS Code is somewhere between an editor and an IDE.

VS Code features

• VS Code’s mission is to give developers the same IDE experience in the editor, such as Code intelligence, syntax checking, graphical debugging tools, plug-in extensions, version management, etc.

• Cross-platform support for MacOS, Windows, and Linux.

• The source Code of VS Code is open source under the MIT protocol.

• Support third-party plug-ins, powerful functions, perfect ecosystem.

• VS Code comes with support for TypeScript and Node.js. That is to say, when you write JS and TS, there are intelligent hints. Of course, for other languages, you can install the corresponding extension pack plug-in, there is also a smart tip.

Front end wars: VS Code vs. WebStorm

One of the front end white’s favorite questions is: which editor /IDE is good? VS Code or WebStorm (which is actually a customized version of IntelliJ IDEA)? Let me make a comparison:

• Which is cooler: Clearly VS Code is cooler.

• Memory usage: From my observations, VS Code is very memory intensive (especially if you have multiple Windows open), but if you have enough memory, it doesn’t feel like you’re stuck. IntelliJ IDEA, by contrast, is not only very memory intensive, but also very slow. If you want to switch to a lightweight editor that doesn’t take up memory, you’re better off using a “Sublime Text” editor.

• Use ratio: VS Code is superior, of course. I’m working on a front end team of about 100 people, and most of the front end students are using VS Code, so it’s fine.

So, if you ask this question again in the future, it might be a bit off the mark.

Installation of VS Code

• VS Code website: code.visualStudio.com

Installing VS Code is easy. Just go to the official website, download the installation package, and double-click it.

In the picture above, click download directly to download and install.

2, come to your attention: VS Code shortcuts

How familiar with VS Code is, in the first place, whether you know how to use shortcut keys. The following are common shortcuts, but the ones in bold are used more frequently.

20 percent of any tool is enough to handle 80 percent of the work. In that case, you may be asking: Can we keep only 20% of the features and soon reach 80% of the users?

But here’s my point: it’s never the same 20 percent, and everyone uses different features.

Master the following high-frequency core shortcuts, you and your tools, enough to expose the edge.

1, workspace shortcut key

Mac shortcuts	Windows shortcuts	role	note
Cmd + Shift + P	Ctrl + Shift + P, F1	Display command panel
Cmd + B	Ctrl + B	Show/hide the sidebar	Very practical
Cmd + \	Ctrl + \	Create multiple editors	【 Important 】 Code copying tool
Cmd + 1, 2	Ctrl + 1, 2	Focus on the first and second editors	Same as above important
cmd +/-	ctrl +/-	Zoom in/out of the workspace (including code font, left navigation)	Often used in the projector scene
Cmd + J	Ctrl + J	Show/hide the console
Cmd + Shift + N	Ctrl + Shift + N	Open a new software window	Is very common
Cmd + Shift + W	Ctrl + Shift + W	Close the current window of the software
Cmd + N	Ctrl + N	The new file
Cmd + W	Ctrl + W	Close the current file

2. Skip operations

Mac shortcuts	Windows shortcuts	role	note
Cmd + `	There is no	In the same softwareMultiple workspacesSwitch between	It’s used a lot
Cmd + Option + left and right arrow keys	Ctrl + Pagedown/Pageup	In the already openedMultiple filesSwitching between	Very practical
Ctrl + Tab	Ctrl + Tab	Jump between files that are already open	Not as fast as the shortcut above
Cmd + Shift + O	Ctrl + shift + O	Various in the current fileMethods betweenTo jump
Ctrl + G	Ctrl + G	Jumps to the specified line
Cmd+Shift+\	Ctrl+Shift+\	Jump to the matching bracket

3. Move the cursor

Mac shortcuts	Windows shortcuts	role	note
The direction key	The direction key	inA single characterMove the cursor between	As you all know
Option + Left and right arrow keys	Ctrl + Left and right arrow keys	inThe wordMove the cursor between	Is very common
Cmd + left and right arrow keys	Fn + Left and right arrow keys	inThe entire lineMove the cursor between	Is very common
Cmd + please	Fn + ← (or Win + ←)	Position the cursor to the far left of the current line	Is very common
Cmd + –	Fn + → (or Win + →)	Position the cursor to the far right of the current line	Is very common
Cmd + write	Ctrl + Home	Position the cursor on the first line of the article
Cmd + left	Ctrl + End	Position the cursor to the last line of the article
Cmd + Shift + \		inThe code blockMove the cursor between

4. Edit operations

Mac shortcuts	Windows shortcuts	role	note
Cmd + Enter	Ctrl + Enter	Add a new row below the current row, and then jump to it	Quickly insert a line down, even if the cursor is not at the end of the line
Cmd+Shift+Enter	Ctrl+Shift+Enter	Add a new row above the current row, and then jump to it	You can quickly insert a line up even if the cursor is not at the end of the line
Option + write	Alt + write	Move the code up	Is very common
Option + left	Alt + left	Move the code down	Is very common
Option + Shift + ↑	Alt + Shift + ↑	Copy the code upward
Option + Shift + ↓	Alt + Shift + ↓	Copy the code down	A great tool for writing repetitive code

5. Multiple cursor editing

Mac shortcuts	Windows shortcuts	role	note
Cmd + Option + up/down	Ctrl + Alt + up/down	The cursor appears simultaneously on successive columns
Option + Mouse click anywhere	Alt + mouse click anywhere	At any position, the cursor appears simultaneously
Option + Shift + Drag the mouse	Alt + Shift + Drag the mouse	At the end of each line in the selected area, a cursor appears
Cmd + Shift + L	Ctrl + Shift + L	The cursor appears at all the same parts of the selected text

Other multi-cursor editing operations :(very important)

• Select a text and hold down the shortcut key “Cmd + D” repeatedly (or “Ctrl + D” for Windows users) to add the same words to the text one by one.

• After selecting a bunch of text, hold down Option + Shift + I (or Alt + Shift + I for Windows users) to create a cursor at the end of each line.

6. Delete

Mac shortcuts	Windows shortcuts	role	note
Cmd + shift + K	Ctrl + Shift + K	Delete the entire line	“Cmd + X” is used to cut, but it can also delete entire lines
option + Backspace	Ctrl + Backspace	Delete a word before the cursor	English is effective and often used
option + delete	Ctrl + delete	Delete a word after the cursor
Cmd + Backspace		Deletes the entire line before the cursor	Is very common
Cmd + delete		Deletes the entire line after the cursor

Note: The above mentioned shortcuts for moving the cursor, editing, and deleting can be used in most other editors.

7. Programming language

Mac shortcuts	Windows shortcuts	role	note
Cmd + /	Ctrl + /	Add a single line comment	Is very common
Option + Shift + F	Alt + shift + F	Code formatting	Is very common
F2	F2	Do this in the form of refactoringrename	To change the code for
Ctrl + J		Combine multiple lines of code into one	Win users can search for “merge line” in the command panel.
Cmd +
Cmd + U	Ctrl + U	Moves the cursor back to the previous position	Undo cursor movement and selection

8. Search for relevance

Mac shortcuts	Windows shortcuts	role	note
Cmd + Shift + F	Ctrl + Shift +F	Global search code	Is very common
Cmd + P	Ctrl + P	In the current project,globalSearch file name
Cmd + F	Ctrl + F	Searches for code in the current file, cursor in the search box
Cmd + G	F3	Searches for code in the current file with the cursor still in the editor	Very clever

9. Customize shortcuts

Hold down Cmd + Shift + P to display the command panel. Enter Shortcut keys in the command panel to set the shortcut keys.

Of course, you can also choose the menu bar “Preferences -> Keyboard Shortcuts” to enter the shortcut Settings:

10. Shortcut key list

You can click on the gear button in the lower left corner of VS Code and it will look like this:

In the image above, select “Keyboard Shortcuts” from the expanded menu to view and modify the list of all shortcuts:

Shortcut key reference links

• Shortcut quick table [official] : code.visualstudio.com/shortcuts/k…

Use of command panel

Mac users hold down the shortcut key Cmd+Shift+P (Windows users hold down the shortcut key Ctrl+Shift+P) to open the command panel. The effect is as follows:

If you need to change some Settings, you can use the “command panel” to do so, which will be more efficient. Here are a few.

1. Set font size

Enter “Font” in the command panel to set the font. The effect is as follows:

Of course, you can also go to the menu bar and go to “Preferences – Settings – Common Settings” to change the font size.

2. Shortcut key setting

Enter “Shortcut key” in the command panel, you can enter the shortcut key Settings.

3. Case conversion

Once the text is selected, type Transfrom into the command panel to change the case of the text.

4. Start VS Code from the command line

(1) Enter the shortcut key “Cmd + Shift + P”, select install code Command:

(2) Using the command line:

• Run the code command to start the VS Code software

• Run the code pathName/fileName command to open the specified directory /file using VS code.

Personal customization: Common configuration of VS Code

1. Set VS Code to Chinese

Mac users hold down the shortcut key Cmd+Shift+P (Windows users hold down the shortcut key Ctrl+Shift+P) to open the command panel.

In the command panel, type Configure Display Language, select Install Additional Languages, Then install the Plug-in Chinese (Simplified) Language Pack for Visual Studio Code.

Alternatively, we can simply install the Plug-in Chinese (Simplified) Language Pack for Visual Studio Code, and it will be the same.

When the installation is complete, restart VS Code.

2. It’s only the Breadcrumb.

Open VS Code Settings and choose User Settings > Workbench > Navigation Path, as shown in the figure below:

In the picture above, check the red box.

Once set, we can see the “hierarchy” of the current file, very convenient. As shown in the figure below:

With this breadcrumb navigation, we can jump between any directory, any file.

3, left and right display multiple editor Windows (code copy sharp tool)

For Mac users, hold down the shortcut key Cmd + \ and for Windows users, hold down the shortcut key Ctrl + \ to open multiple editor Windows simultaneously.

Press Cmd + 1 to switch to the left window, and press Cmd + 2 to switch to the right window. Whenever you want, wherever you want.

After learning this move, the leader will no longer have to worry about my slow copy when I copy code. I can get my salary in one day.

4. Whether to display the line number of the code

VS Code displays the line number of the Code by default. You can change the Settings by searching for editor.lineNumbers in the Settings TAB. The configuration TAB is as follows:

I recommend leaving this setting unchanged.

5. Whether to display the thumbnail of the code on the right

VS Code will show a thumbnail by default on the right side of the Code. You can set this by searching for editor.minimap in the Settings TAB. The configuration TAB is as follows:

Highlight the current line of code (change the background color of the line where the cursor is located)

When we place the cursor on a line, the background color of that line does not change. If you want to highlight the current line of code, you need to set two steps:

(1) in the item set search editor. RenderLineHighlight, sets the option value to all or line.

(2) Add the following contents to the Settings item:

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#00000090",
    "editor.lineHighlightBorder": "#ffffff30"
}
Copy the code

The top code, the first line of code says: Change the background color of the line where the cursor is located (set the background color to all black and opacity to 90%); The second line of code says: Change the border color of the line where the cursor is located.

7, after changing the code immediately automatically save

A:

After changing the code, the default is not automatically saved. You can search for files.autoSave in Settings and change the Settings as follows:

In the figure above, after changing the configuration item to onFocusChange, the file is automatically saved when the cursor moves away from it. Very convenient.

Method 2:

Of course, you can also go to the menu bar and select “File-Autosave”. When this is checked, the file will be saved in real time as soon as you finish writing the code.

8. Whether to format the code immediately after saving it

After saving the code, the code is not immediately formatted by default. You can view this configuration item by searching for editor.formatOnSave in the Settings item:

I think I’ll just leave this configuration as default and don’t check it.

9, space or TAB

VS Code will decide whether to use Spaces or tabs based on the file you have open. That is, if your project uses tabs, the editor will recognize tabs when you press the TAB key while writing new code.

Common Settings are as follows:

• Editor. detectIndentation: Automatic detection (enabled by default). The screenshot is as follows:

• Editor.insertspaces: Inserts Spaces when the Tab key is pressed (default). The screenshot is as follows:

• Editor. tabSize: A TAB is equal to four Spaces by default. The screenshot is as follows:

10. Default file type after the new file is created

When we press the “Cmd + N” shortcut to create a new file, VS Code defaults to recognizing the type of the file and therefore the syntax highlighting.

If you want to change the default file type, you can search for files.defaultLanguage in the Settings.

In the red box above, fill in the default file type you want. I put it in HTML, you can put it in javascript or MarkDown, or any other language.

11. Check whether a confirmation dialog box is displayed when deleting a file

When we delete a file in VS Code, a confirmation box pops up by default. If you want to change the Settings, you can search for xplorer.confirmDelete in Settings. The screenshot is as follows:

I recommend that you leave this setting as the default. The pop-up prompt before deleting the file is also for security considerations, in case of accidentally deleting it?

Next, let’s look at some more advanced configurations.

12. File comparison

By default, VS Code supports comparing the contents of two files. Select both files, right click “Compare selected”, and the effect is as follows:

VS Code’s built-in comparison capabilities are not powerful enough, so you can install the compareit plug-in to make comparisons richer. For example, after installing the plugin CompareIt, we can compare the “current file” to the contents of the “clipboard” :

13. Find where a function has been called

For example, I have called foo() in the a.js file. So, what if I want to know if foo() is called in another file?

Here’s how to do it: in a.js, select foo() (or place the cursor on foo()) and hold down the “Shift + F12” shortcut key to see where foo() is called.

14. Mouse operation

• In the current row position, the mouse three click, can select the current row.

• Click the line number of the file with the mouse to select the current line.

• To select multiple lines, move the mouse pointer up or down a line number.

15, refactoring

There are many different kinds of refactoring, so let’s take a few examples.

Named refactoring:

When we try to change a function (or variable name), we can place the cursor on it and press “F2” to change the function (or variable name) wherever it appears.

Method reconstruction:

When you select a piece of code, a “light bulb icon” will appear on the left side of the code. Click this icon to extract the code into a single function.

16. Search the current file

In the list of shortcuts above, we already know the following:

• Cmd + F (Ctrl + F for Win users) : Search the current file, cursor in the search box

• Cmd + G (F3 for Win users) : search the current file with the cursor still in the editor

In addition, you may have noticed that there are many buttons in the search box, each with a different function, as shown below:

In the image above, you can switch between the input and replacement boxes by using the Tab and Shift + Tab keys.

The “find in selected” feature is useful. You can also search in the item set editor. The find. AutoFindInSelection, after check the item set, so, when you select the specified content, then hold down the “Cmd + F”, can only to find in these contents automatically. The setting item is shown in the following figure:

17. Global search

In the list of shortcuts above, we already know the following:

• Cmd + Shift +F (Ctrl + Shift +F for Win users) : Search in the global folder. The effect is as follows:

In the image above, you can click on the red box section to expand more configuration items.

Git version management

VS Code comes with Git version control, as shown below:

This is where you can perform common Git commands. If you’re not familiar with Git version management, take some lessons.

In the meantime, I recommend installing GitLens, which is my favorite plugin for VS Code. It’s a Git gadget and a must-have for any coder.

Zoom in/out of the workspace

After we changed the font size in the Settings above, we only changed the font size of the code.

If you want to scale the entire workspace (including code font, left navigation font, etc.), press the shortcut key “CMD +/-“. For Windows users, CTRL +/-

This works great when we’re showing code to someone on a projector.

If you want to restore the default workspace size, type reset Zoom in the command panel.

Create multi-layer subfolders

We can create a new folder by typing aa/bb/cc, for example:

Then, you can create multiple layers of subfolders with the following effect:

21,.vscodeThe role of folders

To unify the team’s vsCode configuration, we can create a.vscode directory at the root of the project and put some configuration content in it, such as:

• Json: workspace Settings, code formatting configuration, plug-in configuration.

• Sftp. json: FTP file transfer configuration.

The configuration in the.vscode directory is valid only for the current project scope. Submit.vs Code to the code repository, everyone unified configuration, will be very convenient.

22. Bring your own terminal

We can press “Ctrl + ‘” to open VS Code’s built-in terminal. I don’t think the built-in terminal is that good. I suggest you use the third-party terminal Item2.

23. Markdown syntax support

VS Code comes with markDown syntax highlighting. That said, if you are writing in Markdown format, you can write in VS Code.

After writing the MD file, you can preview it by clicking the button in the upper right corner, as shown below:

I usually install the ‘Markdown Preview Github Styling’ plugin to Preview Markdown Styling in Github style. The style is very simple and beautiful.

You can also preview the Markdown file in full screen by typing Markdown: Open Preview in the control panel.

24, Emmet in VS Code

Emmet can greatly improve the efficiency of HTML and CSS writing by providing a very concise syntax.

For example, enter ul>li*6 in the editor and press Tab to get the following code snippet:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Copy the code

VS Code supports Emmet by default. Check out more Emmet grammar rules.

25. Change the font to “Fira Code”

This is a beautiful font for writing code:

The installation steps are as follows:

(1) Go to github.com/tonsky/Fira… Website, download and install the “Fira Code” font.

(2) Open VS Code “Settings”, search for font, and change the related configuration to the following:

"Editor. fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // set the font to display "editor.fontLigatures": False,// controls whether font hyphenation is enabled, true enables it, false disables itCopy the code

The second line above is configured as “editor.fontLigatures”: null, depending on personal habit, as I am not used to hyongs.

Code formatting: Prettier

“Prettier” you can use Prettier to format code. The steps are as follows:

(1) Install the plug-in Prettier.

(2) In the root path of the project, create the file “prettierrc” and add the following content to the file:

{
  "printWidth": 150."tabWidth": 4."semi": true."singleQuote": true."trailingComma": "es5"."tslintIntegration": true."insertSpaceBeforeFunctionParenthesis": false
}
Copy the code

The above content, is my own configuration, you can refer to.

IO /docs/en/opt… For more configuration, see the official document: prettier.

File transfer: SFTP

If you need to transfer local files to the LAN server via FTP, you can install the SFTP plug-in, very easy to use. It’s used a lot in the company.

The steps are as follows:

(1) Install the SFTP plug-in.

(2) Configure the SFTP. Json file. After the plug-in is installed, enter the shortcut key “CMD +shift+P” to pop up the command panel, then enter SFTP :config, press Enter, the current project under the. Vscode folder will automatically generate SFTP.

• Host: indicates the IP address of the server

• Username: indicates the username

• PrivateKeyPath: the key file (also a PPK file) that is stored locally and configured for logging in to the workstation

• RemotePath: Folder path on the workstation that is synchronized with the local project. It must be the same as the root directory of the local project file. Before uploading files using SFTP, manually generate the root directory on the workstation in mkdir

• Ignore: Specifies the file and folder to be ignored when using SFTP: sync to remote. Note that each line has a comma after it and the last line has no comma

Here’s an example :(note that the comments need to be removed)

{" host ":" 192.168. XXX. XXX ", / / server IP "port" : 22, / / port, SFTP mode is 22 "username" : "", / / the user name" password ":" ", / / password "protocol" : "SFTP ", // mode "agent": null, "privateKeyPath": null, "passphrase": null, "passive": false, "interactiveAuth": False, "remotePath": "/root/node/build/", // server file address "context": "./server/build", // local file address "uploadOnSave": True, // listen to save and upload "syncMode": "update", "watcher": {// listen to external files" files": false, // the absolute path of external files" autoUpload": False, "autoDelete:" false}, "ignore" : [/ / ignore item "/ * * * * /. Vscode", "/ * * * * /. Git", "* * /. DS_Store"]}Copy the code

(3) In the current VS Code file, choose “right click -> upload”, you can upload the local Code to the specified FTP server (that is, the server IP configured in the above host).

You can also right-click and choose Diff with Remote to compare the local code to the code on the FTP server.

VS Code configures cloud synchronization

We can synchronize the configuration to the cloud, so that when we change computers, we can synchronize the configuration to the local computer with one click, no need to reinstall plug-ins, no need to reconfigure the software.

We can also share the configuration with other users, and we can also use other users’ configuration for our own use.

To synchronize your local configuration cloud to GitHub:

(1) Install the plug-in Settings-sync.

(2) After installing the plugin, log in to the plugin using a GitHub account.

(3) After login in vsCode interface, you can choose one of others gist; Or you can just ignore it and create your own Gist.

(4) Use the shortcut key “Command + Shift + P”, enter sync in the displayed Command box, and select “Update/Upload configuration”, so that the latest configuration can be uploaded to GitHub.

Synchronize the configuration from the cloud to the local computer when switching to another computer:

(1) When we switch to another computer, we can install settings-Sync in VS Code first.

(2) After installing the plugin, log in to the plugin using a GitHub account.

(3) After login, the previous synchronization records will automatically appear on the interface of the plug-in:

In the picture above, we can click on the latest record to synchronize the latest configuration of the cloud to the local:

If your remote configuration fails to be synchronized to the local, it may be due to network problems. In this case, you can use the shortcut key “Command + Shift + P”, enter sync in the dialog box that is displayed, and choose “Download configuration” to try several times.

Using someone else’s configuration:

If we want to use someone else’s configuration, we first need them to provide you with gist. The specific steps are as follows:

(1) Install the plug-in Settings-sync.

(2) Use the shortcut key “Command + Shift + P”, enter sync in the Command box that is displayed, and select “Download configuration”.

(3) In the screen that pops up, select “Download Public Gist”, and then enter the Gist that others have shared with you. Note that you do not need a GitHub account for this step.

Eight, three heads six Arms: VS Code plugin recommended

One of the most powerful features of VS Code is its support for add-ons that make your editor feel like it has three heads and six arms.

In the image above, click on the red box to find the name of the plugin you want in the input box, and then install it.

Let me list a few common plug-ins, all of which are useful. Note: The higher the order, the more practical.

1, GitLens

I highly recommend that you install GitLens, which is one of my favorite widgets in VS Code. It’s a Git gadget and a must-have for any coder. If you don’t know, you’re out.

GitLens has many powerful Git management features, such as:

• By placing the cursor in the current direction of the code, you can see who submitted the code and when. This is the most convenient feature of GitLens.

• View the code change records for a commit

• Look at the different branches

• You can compare the code between the two Commits

• You can even compare the two branches as a whole. This is the most powerful feature of GitLens. This can be used when reviewing code in different branches.

2, Git History

For those of you who like to use the Git management tool in your editor and don’t like to open another Git UI tool, this plugin will help you query all your Git records.

3, Live Server

Start a server locally, and after the code is written, you can get a “hot update” to see it running in real time on a web page. You don’t have to manually refresh the page every time.

How to use: After installing the plug-in, start writing the code; After writing the code, right-click Open with Live Server.

4, Chinese (Simplified) Language Pack for Visual Studio Code

Let the software display in simplified Chinese language.

Bracket Pair Colorizer

Bracket Pair Colorizer 2: Displays Bracket pairs in different colors and uses a line to indicate the Bracket range. Rainbow bracket for short.

There is also the Rainbow Brackets plugin to highlight pairs of Brackets.

6, SFTP: File transfer

If you need to transfer local files to the LAN server via FTP, you can install the SFTP plug-in, very easy to use. It’s used a lot in the company.

The detailed configuration is described above.

7, open in browser

After the Open In Browser plug-in is installed, right-click in the HTML file and choose –> Open in Default Browser to preview the web page.

8. Highlight-icemode: Highlight the same code when it is selected.

VSCode’s own highlighting is really inconspicuous. Use plugins to support it.

With this plugin, you can turn off VS Code’s built-in highlighting:

Add in the user Settings “editor. SelectionHighlight” : false.

Reference link: VSCode after selected the same content highlighted plug-in recommended

9, vscode – the ICONS

Vscode-icons will display different ICONS according to the file name suffix, giving you a more intuitive idea of what type each file is.

10, the Project Manager

At work, we often switch back and forth between multiple projects, each time to find the corresponding project directory to open again, more troublesome. The Project Manager plug-in can solve this problem. It provides a special view to show your projects. We can save the frequently used projects here, and switch them with one button when needed, which is very convenient.

11, TODO Highlight

In the process of writing code, you suddenly find a Bug, but you don’t want to stop your work, so as not to interrupt your train of thought, how to do? According to the code specification, we usually add a TODO comment to the code. For example :(be sure to write capital TODO, not lowercase TODO)

//TODO: There is a bug here. I will deal with you laterCopy the code

Or:

//FIXME: I don't know why, but it works only that way.Copy the code

After installing TODO Highlight, hold down “Cmd + Shift + P” to open the command panel, type “Todohighlist” and select the relevant command to see a list of Todolists.

12, WakaTime

Count time spent writing Code in VS Code. The statistical effects are as follows:

13, Code Time

Code Time plug-in: record the programming Time and count the number of Code lines.

After installing the plug-in, time statistics can be seen in the lower right corner of the status bar at the bottom of VS Code. After clicking on that location, select “Code Time Dashboard” to view the statistics.

Note: I tried the code Time plugin and found that the statistics are not very accurate.

14, Markdown Preview of Github highlights

Preview the Markdown style in GitHub style, very neat and elegant. Write the Markdown text on the left and preview the Markdown rendering on the right like this:

15, Markdown Preview Enhanced

Preview the Markdown style.

16, Settings Sync

• Address: github.com/shanalikhan…

• Function: Synchronize VS Code configuration between multiple devices. Use the sync tool by logging into your GitHub account.

The details of synchronization are described above.

17, vscode – syncing

• Address: github.com/nonoroazoro…

• Function: Synchronize VS Code configuration between multiple devices.

In the 18th and Vetur

Vue multi-function integration plug-in, including: syntax highlighting, intelligent hint, Emmet, error message, formatting, autocomplete, debugger. Vue plugin is a must for Vue developers.

19, ES7 React/story/GraphQL/React – Native snippets

React/Redux/ React-Router syntax intelligence prompt.

20, MinAPP: small program support

Essential plug-in for small program development.

21, Prettier: code format

Prettier is a code formatting tool that only formats code but does not have the verification function. In a collaborative development team, it is important to have a uniform code specification. A set of specifications allows us to write code in a consistent style, improving the readability and uniformity of the code. Nature maintainability will also improve.

22, ESLint: Code format verification

In daily development, it is recommended to use Prettier for code formatting and esLint for verification.

23, Beautify

Code formatting tool.

24. JavaScript(ES6) Code snippets

ES6 Grammar intelligent prompt, which supports quick input.

25, Search node_modules

There are so many folders and modules in the node_modules module that it’s hard to find them. After installing the Search node_modules plug-in, enter the shortcut key “Cmd + Shift + P” and then enter node_modules. Select Search node_modules from the options that pop up. You can search for modules in node_modules.

26, rainbow: Highlight the indent of code

Indent-rainbow plug-in: Highlights code indentation.

After the installation, the effect is as shown in the figure below:

27, javascript console utils: Quick print log

After installing the plugin, the log console.log() automatically appears when we hold down the shortcut key “Cmd + Shift + L”. Good news for the log party.

When we select a variable name and hold down the shortcut key “Cmd + Shift + L”, the log console.log(name) for this variable will automatically appear.

Other similar plug-ins are Turbo Console Log.

However, in production code, it is better to log as little as possible to avoid some exceptions.

There are three levels of programming:

• The third level is to play log, this is the most simple, convenient way, slightly low level, general novice or senior programmers lazy will use.

• The second level is breakpoint debugging, which is very common in front-end, Java, PHP, and iOS development. Through breakpoint debugging, you can intuitively track code execution logic, call stack, variables, and so on. It is a very practical skill.

• The first level is test-driven development, where you write tests before you write code. In contrast to breakpoint debugging of the second class, most people are not used to this method, but in the eyes of foreign developers or agile enthusiasts, it is the most efficient development method, in terms of ensuring code quality, refactoring, etc., is an essential part of modern programming.

28, Code Spell Checker

The goal of this spell checker is to help catch common word misspellings and can detect hump names. Farewell to Chinglish.

29, Local History 【 recommend】

Maintain a local history of files. Installation is strongly recommended. When code is accidentally lost, life can sometimes be saved.

30, Polacod-2020

You can save the code as a beautiful picture, with different color schemes depending on the theme, and you can also set the border color, size, and shadow.

Some people may say: direct use QQ screenshots not? Can be ok, but not beautiful enough, not clean enough.

31, Image Preview 【 用 】

Image preview. When the mouse moves over the image URL, the preview and size of the image will be displayed automatically.

32, Auto Close Tag, Auto Rename Tag

Automatically close and rename labels.

33, Better Comments

Add more bold, categorized colors to comments.

34, CSS Peek

Enhance the association between HTML and CSS to quickly see the CSS styles on the element.

35. Vue CSS Peek

CSS Peek has no support for Vue. This plug-in provides support for Vue files.

36, Color Info

This handy plugin will give you information about how to use colors in your CSS. You can preview the HEX, RGB, HSL, and CMYK color models in the color block by hovering the cursor over the color.

37, RemoteHub

Not surprisingly, RemoteHub and GitLens were developed by the same author.

What the RemoteHub plug-in does is it allows you to view GitHub code locally without having to download it locally.

Not many people are using this plugin yet, so install it and give it a try.

Live Share: Live Share

Live Share is a magic plugin created by Microsoft to do just that: code sharing in real time. In other words, it lets you and your partner write code together. This is the ultimate pair programming tool.

Installation mode:

Open plug-in management, search for “Live Share”, and install. After installing and restarting VS Code, there is an extra button on the left:

In the image above, click on the section in the red box to log in and share your workspace.

39, the Import Cost

In the process of project development, we will introduce many NPM packages. Sometimes we may only use a method in a package, but we introduce the entire package, resulting in a lot of code volume. The Import Cost plug-in can help optimize the size of the code by providing a friendly reminder of how much volume the currently introduced package will increase.

Common Theme plug-ins

Give your VS Code a new skin, the free one.

• Dracula Theme

• Material Theme

• Nebula Theme

• One Dark Pro

• One Monokai Theme

• Monokai Pro

• Ayu

• Snazzy Plus

• Dainty

• SynthWave '84

• GitHub Plus Theme: White Theme

• The Horizon Theme

The last paragraph

If you have any more VS Code plugins to recommend, please leave a comment.

There is no need to worry about this article becoming obsolete, it will be updated as VS Code releases and plug-ins are updated. For further VS Code content updates, you can follow my Front End Getting Started project on GitHub at:

Github.com/qianguyihao… >

A super detailed and sincere front end entry project.

Refer to the link

• This is the second installment in VSCode for advanced players

• www.supuwoerc.xyz/tools/vscod…

• How to make VS Code 10 times better to use? Here is a VS Code beginner’s guide

• VS Code Toss – (16) recommends a set of practical plug-ins

• VSCode front-end must-have plug-in, if you have installed but do not know how to use it?

• VSCode plugin configuration that doubles your development efficiency

• Segmentfault.com/a/119000001…

• “Vscode” creates a high level editor for class sublime

• Mac Vscode shortcut key

• Some tips for using VSCode

My official account

Want to learn something other than code? Might as well follow my wechat public number: One.

Scan, you will find another new world, and it will be a beautiful accident: