Use of vs code development tools

Time:2020-10-25

preface

To improve the development efficiency of programmers, we must have a good development tool. At present, the best front-end development tools mainly include vs code, sublime text, atom, webstorm, Notepad + +.

Vs code is a very powerful code editor. Although it has been out for a short time, its usage frequency and popularity rate have far exceeded those of other editors. Vs code is applicable to almost all programming and development tasks, including a very rich application plug-in, which is very convenient. More and more new generation Internet youth are using it.

In fact, vs code is written in JavaScript language. It is a client editor based on electron framework. If you like to study the source code, you can go to GitHub to download the source code for research. The use and learning of electron will be introduced in the following chapters (please refer to the PC client development framework based on JS for details)Electron)。 Jeff Atwood proposed the famous Atwood law in 2007

Any application system that can be implemented with JavaScript will eventually be implemented with JavaScript

It doesn’t matter who Jeff Atwood is (he’s co-founder of stack overflow), it’s the law that matters.

At present, the front-end is in the spring and Autumn period and Warring States period. Heroes and heroines of all walks of life have become the rear wave. Various framework tools emerge in endlessly. The vs code software is undoubtedly the most proud tool in the era of big front-end.

If you are doing front-end development (mainly in JavaScript programming language), you can use vs Code as theMain development tools」。 This software is customized for front-end students.

If you are developing in other languages and do not need a complex integrated development environment, then you can use vs Code as theCode editor“To use, enjoy silky.

Even some students who write documents and write often use vs Code as a markdownWriting toolsThere is no sense of disharmony.

Second, even if you don’t belong to any of the above categories, you can still regard vs Code as the simplesttext editorTo use, win the notepad of windows system.

The following is an introduction to the basic use of vs Code:

1、 Introduction to vs Code

The full name of vs code is visual studio code. It is an open source, free, cross platform, high performance, lightweight code editor. It has done very well in terms of performance, language support, and open source community.

Microsoft has two kinds of software: vs Code and vs ide.
Vs code is a code editor for developers, providing various portable plug-ins for use; vs IDE is a heavyweight ide tool of Microsoft, which integrates various compilation tools of development environment, especially the development of back-end server programming, and provides complete integrated development tools such as C / C + +, Java, python, go, Android, etc. Similar to the eclipse IDE, one click installation is required.

Comparison between IDE and editor

IDE and editor are different

  • IDE(integrated development environment): it has better intelligent prompt and mutual jump for the code, and focuses on the engineering project, and has better graphical interface support for the development and debugging of the project, so it is relatively cumbersome. For example, the positioning of eclipse is ide. There are also many excellent ide tools, such as:

Visual Basic 6.0:
Use of vs code development tools
Visual C++ 6.0:
Use of vs code development tools
Dev C++:
Use of vs code development tools
Visual Studio 2015-2019:
Use of vs code development tools
QT Creator:
Use of vs code development tools
Eclipse:
Use of vs code development tools
IDEA:
Use of vs code development tools
PyCharm:
Use of vs code development tools

  • editor : it should be relatively light-weight, focusing on the editing of the text. For example, sublime text is positioned as an editor. Another example is the “NOTEPAD” that comes with the windows system, which is the simplest editor.

It should be noted that the positioning of vs code iseditor , not IDE, but vs code is much more functional than the general editor. It can be understood as follows: the volume of vs code is between the editor and IDE. Some excellent editors commonly used by programmers are as follows:
“Vs code, sublime text, EDITPLUS, Notepad + +, VIM, atom, webstorm, chocolatapp, textpad and so on.”

Features of vs Code

  • The mission of vs code is to let developers have ide like development experience in the editor, such as code intelligent prompt, syntax check, graphical debugging tools, plug-in extension, version management, etc.
  • Vs code is a free, open source, high performance, cross platform, lightweight code editor. At the same time, it also does a good job in terms of performance, language support and open source community!
  • It supports multiple platforms such as MacOS, windows and Linux.
  • The source code of vs code is open source with MIT protocol.
  • It supports third-party plug-ins with powerful functions and perfect ecosystem.
  • Vs code comes with JavaScript, typescript and Node.js Support. That is to say, when you write JS and TS, you bring your own smart tips. Of course, for other languages, you can install the correspondingExpansion packPlug in, there will also be intelligent tips.

Front end editor: vs code, webstorm, sublime text

We often see the question: which editor / IDE is easy to use? Is it vs code or webstorm (webstorm is actually a customized version of IntelliJ idea)? Let me make a comparison

  • Which is cooler: obviously vs code is cooler.
  • Memory usageAccording to my observation, vs code takes up a lot of memory (especially when you open multiple windows), but if you have enough memory, you won’t feel stuck. In contrast, IntelliJ idea is not only very memory intensive, but also very stuck. If you want to switch to a lightweight and memory free editor, you’d better use the sublime text editor.
  • Usage ratioOf course, vs code is better. Let’s not say anything else. I’ll talk about the data. The R & D team I’m in now has about 200 people (120 backstage, 80 front-end), and most of them are coding with vs code, which is appropriate. You can choose sublime Text3 for fast and lightweight development. There are many rich plug-ins to use.

Therefore, the first choice is vs code, followed by sublime Text3, and then you can choose other editors you like.

Installation of vs Code

The installation of vs code is very simple. Go directly to the official website to download the installation package, and then double-click to install.

Use of vs code development tools

In the figure above, click download directly and download and install with one click.

2、 Vs Code shortcut key

If vs code is not familiar, it depends on whether you can use shortcut key. The contents listed below are commonly used shortcut keys, and the shortcut keys in bold parts are used very frequently.

Any tool, mastering 20% skills, is enough to deal with 80% of the work. In this case, you may ask: will only 20% of the features be retained, and 80% of the users will be satisfied soon?

But what I want to say is:That’s never the same 20 percentEveryone uses different functions.

Master the following high-frequency core shortcut keys, you and your tools, enough to show the edge.

1. Workspace shortcut

Mac shortcut Win shortcut key effect remarks
Cmd + Shift + P Ctrl + Shift + P,F1 Display command panel
Cmd + B Ctrl + B Show / hide sidebar Very practical
Cmd + \ Ctrl + \ Create multiple editors [important] code reading tool
Cmd + 1、2 Ctrl + 1、2 Focus on editor 1 and Editor 2 Ditto important
cmd +/- ctrl +/- Enlarge / shrink workspace (including code font, left navigation bar) It is often used in projector scenes
Cmd + J Ctrl + J Show / hide console
Cmd + Shift + N Ctrl + Shift + N Open a software window again Very common
Cmd + Shift + W Ctrl + Shift + W Close the current window of the software
Cmd + N Ctrl + N new file
Cmd + W Ctrl + W close current file

2. Jump operation

Mac shortcut Win shortcut key effect remarks
Cmd + ` No, In the same softwareMultiple workspacesSwitch between It’s used a lot
CMD + option + left and right arrow keys Ctrl + Pagedown/Pageup In the openMultiple filesSwitch between Very practical
Ctrl + Tab Ctrl + Tab Jump between multiple open files It’s not as fast as the shortcut key above
Cmd + Shift + O Ctrl + shift + O Various in the current fileBetween methodsJump
Ctrl + G Ctrl + G Jump to specified line
Cmd+Shift+\ Ctrl+Shift+\ Jump to matching bracket

3. Move the cursor

Mac shortcut Win shortcut key effect remarks
Direction key Direction key staySingle characterMove the cursor between Everybody knows
Option + left and right direction keys CTRL + left and right arrow keys staywordMove the cursor between Very common
CMD + left and right arrow keys FN + left and right direction keys stayWhole lineMove the cursor between Very common
Cmd + ← FN + ← (or win + ←) Position the cursor to the far left of the current row Very common
Cmd + → FN + → (or win + →) Position the cursor to the far right of the current row Very common
Cmd + ↑ Ctrl + Home Position the cursor on the first line of the article
Cmd + ↓ Ctrl + End Position the cursor on the last line of the article
Cmd + Shift + \ stayCode blockMove the cursor between

4. Edit operation

Mac shortcut Win shortcut key effect remarks
Cmd + Enter Ctrl + Enter Add a new line below the current line and jump to it You can quickly insert a line down even if the cursor is not at the end of the line
Cmd+Shift+Enter Ctrl+Shift+Enter Adds a new line above the current row and jumps to it You can quickly insert a line up even if the cursor is not at the end of the line
Option + ↑ Alt + ↑ Move the code up Very common
Option + ↓ Alt + ↓ Move code down Very common
Option + Shift + ↑ Alt + Shift + ↑ Copy code up
Option + Shift + ↓ Alt + Shift + ↓ Copy code down A sharp tool for writing repetitive code

5. Multi cursor editing

Mac shortcut Win shortcut key effect remarks
CMD + option + up and down CTRL + Alt + up / down On consecutive columns, the cursor appears at the same time
Option + mouse click anywhere Alt + mouse click anywhere In any position, the cursor appears at the same time
Option + Shift + mouse drag Alt + Shift + mouse drag 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 contents of the selected text

Other multi cursor editing operations: (important)

  • Select a text and press the shortcut key repeatedlyCmd + DFor Windows users, press and hold theCtrl + DYou can add the same words in the full text one by one.
  • After selecting a pile of text, press and hold theOption + Shift + iFor Windows users, press and hold theAlt + Shift + IYou can use theEnd of each lineEach creates a cursor.

6. Delete operation

Mac shortcut Win shortcut key effect remarks
Cmd + shift + K Ctrl + Shift + K Delete entire row The function of “CMD + X” is to cut, but you can also delete entire lines
option + Backspace Ctrl + Backspace Delete the word before the cursor English is effective, very common
option + delete Ctrl + delete Delete a word after the cursor
Cmd + Backspace Delete entire line before cursor Very common
Cmd + delete Delete the entire line after the cursor

Note: most of the shortcut keys for moving cursor, editing and deleting operations mentioned above are applicable in other editors.

7. Programming language related

Mac shortcut Win shortcut key effect remarks
Cmd + / Ctrl + / Add a single line comment Very common
Option + Shift + F Alt + shift + F Code formatting Very common
F2 F2 In the form of refactoringrename Code modification
Ctrl + J Merge multiple lines of code into one line Win users can search the “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 related

Mac shortcut Win shortcut key effect remarks
Cmd + Shift + F Ctrl + Shift +F Global search code Very common
Cmd + P Ctrl + P In the current project engineering,overall situationSearch for file names
Cmd + F Ctrl + F Search for code in the current file with the cursor in the search box
Cmd + G F3 Search for code in the current file and the cursor remains in the editor Very clever

9. Custom shortcut key

Press and hold the shortcut key “CMD + Shift + P” to pop up the command panel. Enter “shortcut key” in the command panel to enter the shortcut key setting.

Of course, you can also select “Preferences > keyboard shortcut” in the menu bar to enter the shortcut key settings:

Use of vs code development tools

10. Shortcut key list

You can click the gear button in the lower left corner of vs code, and the effect is as follows:

Use of vs code development tools

In the figure above, select “keyboard shortcut” in the expanded menu to view and modify the list of all shortcut keys

Use of vs code development tools

Shortcut key reference link

3、 Use of command panel

Mac users hold down the shortcut keyCmd+Shift+P(Windows users hold down the shortcut keyCtrl+Shift+P)To open the command panel. The results are as follows:

Use of vs code development tools

The “panel” is more efficient. If you need to modify some commands, you can modify them. Here are some.

1. Set font size

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

Use of vs code development tools

Of course, you can also change the font size in the menu bar by selecting preferences settings common settings.

2. Shortcut key settings

Enter “shortcut key” in the command panel to enter the setting of shortcut key.

3. Case conversion

With the text selected, enter it in the command paneltransfromYou can change the case of the text.

Use of vs code development tools

4. Starting vs code from the command line

(1) Enter the shortcut key “CMD + Shift + P”, selectinstall code command

Use of vs code development tools

(2) Use the command line:

  • codeCommand: start vs Code Software
  • code pathName/fileNameCommand: open the specified directory / file through vs code software.

4、 Private Customization: common configuration of vs Code

1. Vs code set to Chinese language

Mac users hold down the shortcut keyCmd+Shift+P(Windows users hold down the shortcut keyCtrl+Shift+P), open the command panel.

In the command panel, enterConfigure Display Language, selectInstall additional languages, and then install the plug-inChinese (Simplified) Language Pack for Visual Studio CodeThat’s fine.

Or we can install the plug-in directlyChinese (Simplified) Language Pack for Visual Studio CodeIt’s the same.

After installation, restart vs code.

2. Breadcrumb

Open the settings of vs Code and select User Settings > workbench > navigation path, as shown in the following figure:

Use of vs code development tools

In the figure above, tick the red box.

After setting successfully, we can view the “hierarchy” of the current file, which is very convenient. As shown in the figure below:

Use of vs code development tools

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

3. Left and right display multiple editor windows (code reading tool)

Mac users hold down the shortcut keyCmd + \, Windows users hold down the shortcut keyCtrl + \To open multiple editor windows at the same time, the effect is as follows:

Use of vs code development tools

Press the shortcut key “CMD + 1” to switch to the left window, and press the shortcut key “CMD + 2” to switch to the right window. Whenever and wherever you want to.

After learning this move, the leader will no longer have to worry about me copying slowly when I copy the code. I will get my salary 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 search in the settingseditor.lineNumbersModify the settings, and the configuration items are as follows:

Use of vs code development tools

I suggest that you keep this setting item and do not need to modify it.

5. Is a thumbnail of the code displayed on the right

Vs code will be on the right side of the code, and the thumbnail will be displayed by default. You can search in the settingseditor.minimapThe configuration items are as follows:

Use of vs code development tools

6. Highlight the current line of code (change the background color of the cursor line)

When we place the cursor on a line, the background color of the line does not change. If you want toHighlightThe code of the current line needs to be set in two steps:

(1) Search in settingseditor.renderLineHighlight, set the option value toallperhapsline

(2) Add the following contents in the setting item:

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

The first line of code means to modify the background color of the cursor line (the background color is set to all black, and the opacity is 90%); the meaning of the second line is to modify the border color of the cursor line.

7. Save the code automatically after changing it

Mode 1

After changing the code, it will not be saved automatically by default. You can search in the settingsfiles.autoSave, modify the configuration items as follows:

Use of vs code development tools

In the figure above, we change the configuration item toonFocusChangeThen, when the cursor leaves the file, the file will be saved automatically.Very convenient

Mode 2

Of course, you can also select “auto save” in the menu bar. If you check this box, the file will be saved in real time as soon as you finish writing the code.

8. Do you want to format the code immediately after saving it

After saving the code, defaultNot immediatelyFormat the code. You can search in the settingseditor.formatOnSaveTo view the configuration item:

Use of vs code development tools

I think it’s better to keep this configuration item by 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 open. In other words, if you use tabs in your project, the editor will recognize them as tabs when you press the tab key when you are writing new code.

Common settings are as follows:

  • editor.detectIndentation: auto detect (on by default). The screenshot is as follows:

Use of vs code development tools

  • editor.insertSpaces: inserts a space when you press tab (the default). The screenshot is as follows:

Use of vs code development tools

  • editor.tabSize: a tab is equal to four spaces by default. The screenshot is as follows:

Use of vs code development tools

10. Default file type after new file

When we press the shortcut key “CMD + n” to create a new file, vs code does not recognize the type of the file by default, so it cannot recognize the corresponding syntax highlight.

If you want to modify the default file type, you can search in the settingsfiles.defaultLanguageThe settings are as follows:

Use of vs code development tools

In the red box above, fill in the default file type you want. I filled inhtmlType, you can also fill in thejavascriptperhapsmarkdown, or some other language type.

11. Do you want to pop up a confirmation box when deleting a file

When we delete a file in vs code, a confirmation box will pop up by default. If you want to modify the settings, you can search in the settingsxplorer.confirmDelete。 The screenshot is as follows:

Use of vs code development tools

I suggest that this setting should be checked by default, and no modification is needed. Delete the pop-up prompt before the file, is also for security considerations, in case the hand is cheap accidentally deleted?

Next, let’s talk about some more advanced configurations.

12. Document comparison

Vs Code default supportCompare the contents of the two documents。 Select two files and right-click to select “compare selected items”. The effect is as follows:

Use of vs code development tools

The built-in comparison function of vs code is not powerful enough. We can install plug-inscompareitFor a richer comparison. For example, install the plug-incompareitAfter that, we can compare the contents in the current file with those in the clipboard

Use of vs code development tools

13. Find out where a function has been called

For example, I’m already herea.jsCalled in the filefoo()Function. Well, if I want to knowfoo()Is the function called in other files? What should I do?

The method is as follows: in thea.jsIn the file, selectfoo()Function (or place the cursor in thefoo()Function), and then hold down the shortcut key “Shift + F12”, you can seefoo()Where the function is called is more practical.

14. Mouse operation

  • In the position of the current line, three mouse clicks can select the current line.
  • Click theLine number, you can select the current row.
  • In a certainLine numberThe location of the,Move the mouse up and down to select multiple lines

15. Refactoring

There are many kinds of refactoring. Let’s give a few examples.

Named refactoring

When we try to modify a function (or variable name), we can put the cursor on it and press the “F2” key. Then, the function (or variable name) will be modified wherever it appears.

Method refactoring

Select a piece of code. At this time, a “light bulb icon” will appear on the left side of the code. Click this icon to extract the code into a separate function.

16. Search in current file

In the list of shortcut keys above, we already know the following shortcut keys:

  • CMD + F (win user is Ctrl + F): search in the current file with the cursor in the search box
  • CMD + G (win user is F3): search in the current file with the cursor still in the editor

In addition, you may notice that there are many buttons in the search box, and each button corresponds to different functions, as shown in the following figure:

Use of vs code development tools

In the figure above, you can switch between the input box and the replacement box by using the “tab” key and the “Shift + Tab” key.

The “find in selection” function is more practical. You can also search in the settingseditor.find.autoFindInSelectionAfter checking the setting item, select the specified content, and then press and hold “CMD + F”automaticSearch only in these contents. The settings are shown in the following figure:

Use of vs code development tools

17. Global search

In the list of shortcut keys above, we already know the following shortcut keys:

  • CMD + Shift + F (for win users, Ctrl + Shift + F): search the global folder. The results are as follows:

Use of vs code development tools

In the figure above, you can click the red box to expand more configuration items.

18. Git version management

Vs code comes with git version management, as shown in the following figure:

Use of vs code development tools

In the figure above, we can do the common git command operation here. If you’re not familiar with itGit version managementYou can make up for it first.

In the meantime, I recommend installing plug-insGitLensIt’s a plug-in I recommend most in vs code. It’s a git artifact and a must for coders.

19. Zoom in / out of the workspace

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

If you want to zoom the entire workspace (including the font of the code, the font of the left navigation bar, etc.), you can press the shortcut keycmd +/-」。 Windows users press “Ctrl + / -“

It works when we’re showing code to someone on the projector

If you want to restore the default workspace size, you can type it in the command panelReset zoom(English isreset zoom

20. Create multi tier subfolders

When we create a new folder, if you enter it directlyaa/bb/ccFor example:

Use of vs code development tools

Then, you can create multi-level subfolders. The effect is as follows:

Use of vs code development tools

21、.vscodeThe role of the folder

In order to unify the vscode configuration of the team, we can create it in the root directory of the project.vscodeDirectory, where you can place some configuration contents, such as:

  • settings.json: workspace settings, code format configuration, plug-in configuration.
  • sftp.json: FTP file transfer configuration.

.vscodeThe configuration in the directory is only valid for the current project scope. take.vscodeIt is very convenient to submit to the code warehouse for unified configuration.

22. Self provided terminal

We can press “Ctrl +” to open the terminal of vs code. I don’t think the built-in terminal is so easy to use. I suggest you use a third-party terminalitem2

23. Markdown syntax support

Vs code has markdown syntax. In other words, if you write articles in markdown format, you can write in vs code.

After writing the MD file, you can click the button in the upper right corner to preview it, as shown in the following figure:

Use of vs code development tools

I usually install the “markdown preview GitHub Styling” plug-in to preview the markdown style in GitHub style. The style is very simple and beautiful.

You can also type in the control panelMarkdown: open Preview, directly preview the markdown file in full screen.

24、Emmet in VS Code

EmmetCan greatly improve the efficiency of HTML and CSS writing, it provides a very concise syntax rules.

For example, we enter the abbreviation code in the editor:ul>li*6And then press the tab key to get the following code fragment:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

The vs code supports Emmet by default. For more Emmet syntax rules, please check it yourself.

25. Modify the font and use “Fira code” font

This font is beautiful and suitable for writing code:

Use of vs code development tools

The installation steps are as follows:

(1) Enterhttps://github.com/tonsky/Fir…Website, download and install the “Fira code” font.

(2) Open the “Settings” of vs Code and searchfont, modify the relevant configuration as follows:

" editor.fontFamily ":"'fira code ', Menlo, Monaco,' Courier New ', monospace ", // sets the font display
" editor.fontLigatures ": false, // controls whether font hyphenation is enabled, true enabled, false not enabled

The second line above the configuration, depending on personal habits, I am directly set to"editor.fontLigatures": nullBecause I’m not used to hyphenation.

26. Code format: prettier

We can use itPrettierCode formatting will make the display of code more beautiful. The steps are as follows:

(1) Installing plug-insPrettier

(2) In the root path of the project, create a new file.prettierrcAnd add the following contents to the file:

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

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

For more configuration, please refer to the official document:https://prettier.io/docs/en/o…

27. File transfer: SFTP

If you need to upload local files to the LAN server in the form of FTP, you can installsftpThis plug-in, very easy to use. It is often used in the company.

The steps are as follows:

(1) Installing plug-inssftp

(2) Configurationsftp.jsonDocuments. After the plug-in is installed, enter the shortcut key “CMD + Shift + P” to pop up the command panel, and then entersftp:config, enter, current project’s.vscodeA folder will be automatically generatedsftp.jsonFile. The contents that we need to configure in this file can be as follows:

  • host: IP address of the server
  • username: user name
  • privateKeyPath: stored in the local configured key file used to log in to the workstation (or PPK file)
  • remotePath: the folder path synchronized with the local project on the workstation should have the same name as the root directory of the local project file. Before uploading files using SFTP, the root directory should be generated manually in MKDIR on the workstation
  • ignore: specify the files and folders to be ignored when using SFTP: sync to remote. Note that there is a comma after each line, and there is no comma in the last line

For example: (note that the comments need to be removed)

{
  "host": "192.168. xxx.xxx ", // server IP
  "Port": 22, // port, SFTP mode is 22
  "Username": ", // user name
  "Password": ", // password
  "Protocol": "SFTP", // mode
  "agent": null,
  "privateKeyPath": null,
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "Remotepath": / root / node / build / ", // the file address on the server
  "Context": "." / server / build ", // local file address

  "Uploadonsave": true, // listen, save and upload
  "syncMode": "update",
  "watcher": {
    //Listen to external files
    "Files": false, // absolute path of external files
    "autoUpload": false,
    "autoDelete": false
  },
  "ignore": [
    //Ignore items
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

(3) In the current file of vs code, select “right click > upload” to upload the local code to the specified FTP serverhostIP server configuration).

We can also select “right click to diff with remote” to compare the local code with the code on the FTP server.

7、 Vs Code configure cloud synchronization

We can synchronize the configuration cloud. In this way, when we change a computer, we can synchronize the configuration to the local. There is no need to re install the plug-in or reconfigure the software.

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

Synchronize your local configuration cloud to GitHub

(1) Installing plug-inssettings-sync

(2) After installing the plug-in, log in with GitHub account in the plug-in.

(3) After logging in, in the vscode interface, you can select another person’s gist, or you can ignore it, and then create your own gist.

(4) Use the shortcut key “Command + Shift + P”, enter sync in the pop-up command box, and select “update / upload configuration”. In this way, the latest configuration can be uploaded to GitHub.

When changing to another computer, synchronize the configuration from the cloud to the local

(1) When we change another computer, we can install it in vs code firstsettings-syncplug-in unit.

(2) After installing the plug-in, log in with GitHub account in the plug-in.

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

Use of vs code development tools

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

Use of vs code development tools

If your remote configuration fails to synchronize to local, it may be a network problem. At this time, you can use the shortcut key “Command + Shift + P”, enter sync in the pop-up command box, and select “download configuration”, and try again.

Use someone else’s configuration

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

(1) Installing plug-inssettings-sync

(2) Use the shortcut key “Command + Shift + P”, enter sync in the pop-up command box, and select “download configuration”

(3) In the pop-up interface, select “download public gist”, and then enter the gist shared with you by others. Note that there is no need to log in to the GitHub account for this step.

8、 Three heads and six arms: vs code plug-in recommended

Vs code has a very powerful function is to support plug-in extensions, so that your editor seems to have three heads and six arms.

Use of vs code development tools

In the figure above, click the red box to find the plug-in name you want in the input box, and then install it.

Let me list a few common plug-ins, which are very useful. be careful:The higher the order, the more practical

1. GITS

I strongly recommend that you install plug-insGitLensIt’s a plug-in I recommend most in vs code. It’s a git artifact and a must for coders. If you don’t know, it’s out.

Gitlens has many powerful functions in Git management, such as:

  • Place the cursor on the current line of the code to see who submitted the code and when. This is the most convenient function of gitlens.
  • View the code change record of a commit
  • View different branches
  • You can compare the two commit codes
  • You can even compare the whole code of two branch branches. This is the most powerful function of gitlens. This can be used when reviewing code in different branches.

2、Git History

Some students are used to using the GIT management tool in the editor, rather than those who want to open another git UI tool. This plug-in can meet your needs of querying all git records.

3. Live server

Start a server locally. After the code is written, “hot update” can be realized, and the running effect can be seen in the web page in real time. You don’t have to manually refresh the page every time.

How to use: after installing the plug-in, start to write code; after writing the code, right-click to select “open with live server”.

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

Let the software display as simplified Chinese language.

5. Bracket pair colorizer 2: highlight pairs of brackets

Bracket Pair Colorizer 2Plug in: display pairs of brackets in different colors, and mark the range of brackets with lines. abbreviationRainbow bracket

In addition, there is another oneRainbow BracketsPlug ins can also highlight pairs of parentheses.

6. SFTP: file transfer

If you need to upload local files to the LAN server in the form of FTP, you can installsftpThis plug-in, very easy to use. It is often used in the company.

The detailed configuration has been described above.

7、open in browser

installopen in browserClick “open browser” in the “web browser” and select “open browser” in the “browser”.

8. Highlight icemode: select the same code to make the highlight more obvious

The highlight of vscode is not obvious enough. Use plug-ins to support it.

After using this plug-in, the highlight of vs code can be turned off

Add in user settings"editor.selectionHighlight": falseThat’s fine.

Reference link:After vscode is selected, the same content will be highlighted and the plug-in recommendation will be highlighted

9、vscode-icons

Vscode icons will display different icons according to the suffix name of the file, so that you can know what type of file is more intuitive.

10、Project Manager

In our work, we often switch back and forth between multiple projects, and each time we have to find the corresponding project directory and open it again, which is more troublesome. The project manager plug-in can solve this problem. It provides a special view to display your project. We can save the commonly used projects here, and switch them with one key when necessary.

11、TODO Highlight

In the process of writing code, I suddenly find a bug, but I don’t want to stop my work to avoid interrupting my thoughts. What should I do? According to the code specification, we usually add a todo comment to the code. Note that it must be written in capital lettersTODO, not lowercasetodo

//Todo: Here's a bug. I'll fix you later

Or:

//Fix me: I don't know why, but it works only that way

Plug in installedTODO HighlightAfter that, press and hold “CMD + Shift + P” to open the command panel, enter “todohighlist”, select the relevant command, and we will see a list of todolist.

12. Wakatime

Count the time spent writing code in vs code. The statistical results are as follows:

Use of vs code development tools

13、Code Time

Code TimePlug in: record the programming time and count the number of lines of code.

After installing the plug-in, you can see the time statistics in the lower right corner of the status bar at the bottom of vs code. Click the location and select “code time dashboard” to view the statistical results.

Note: the team leader tried the code time plug-in and found that the statistical results were not very accurate.

14. Markdown preview GitHub styling

Preview markdown style in GitHub style, very simple and elegant. As follows, write markdown text on the left and preview the rendering effect of markdown on the right:

Use of vs code development tools

15、Markdown Preview Enhanced

Preview the markdown style.

Markdown All in One

This plug-in will help you write documentation in markdown more efficiently.

16. Settings sync

  • Address:https://github.com/shanalikha…
  • Function: synchronize vs code configuration between multiple devices. Use the synchronization tool by logging in to GitHub.

The details of synchronization have been described above.

17、vscode-syncing

18、Vetur

Vue multi-functional integration plug-in, including: syntax highlighting, intelligent prompt, Emmet, error prompt, formatting, automatic completion, debugger. Vue plug-in is officially ordered by vs code, which is necessary for Vue developers.

19、ES7 React/Redux/GraphQL/React-Native snippets

The syntax intelligent prompt of react / Redux / react router.

20. Minapp: applet support

Necessary plug-ins for small program development.

21. Prettier: code format

Prettier is a code formatting tool that only focuses on formatting, but does not have verification function. In a multi person collaborative development team, a unified code writing specification is very important. A set of specifications can make our code to achieve a consistent style, improve the readability and unity of the code. Natural maintenance will also be improved.

22. Eslint: code format verification

In daily development, it is recommended to use prettier for code format and eslint for verification.

23、Beautify

Code formatting tool.

Note: by contrast, prettier is currently the most popular code formatting tool, and is used more than beautify.

24、JavaScript(ES6) code snippets

ES6 syntax intelligent prompt, support fast input.

25、Search node_ Modules

node_modulesThere are too many folders and modules in the module. It’s hard to find. Good thing is installationSearch node_modulesAfter the plug-in, type the shortcut key “CMD + Shift + P”, and then typenode_modules, select from the pop-up optionsSearch node_modulesTo search for node_ Modules in modules.

Use of vs code development tools

26. Indent rainbow: highlight code indentation

indent-rainbowPlug in: highlight code indentation.

After installation, the effect is shown in the following figure:

Use of vs code development tools

27. JavaScript console utils: fast printing log

After installing this plug-in, when we hold down the shortcut key “CMD + Shift + L”, the log will appear automaticallyconsole.log()。 It’s a log party gospel.

When we select a variablenameThen press and hold down the shortcut key “CMD + Shift + L” to automatically display the log of this variableconsole.log(name)

Other similar plug-ins are: Turbo console log.

However, it is better to log as little as possible for the code of the production environment to avoid some exceptions.

There are three levels of programming

  • The third level is to log, which is the most simple and convenient way. It is a bit low-level and can be used by novices or senior programmers when they are lazy.
  • The second level is breakpoint debugging, which is very common in front-end, Java, PHP and IOS development. Through breakpoint debugging, you can track code execution logic, call stack, variables, etc., which is a very practical skill.
  • The first level is test driven development, where you write tests before you write code. Contrary to the second-class breakpoint debugging, most people are not very used to this method, but in the eyes of foreign developers or agile enthusiasts, this is the most efficient development method, which is very helpful in ensuring code quality and refactoring, and is an indispensable part of modern programming development.

28. Code spell checker

The goal of this spell checker is to help catch common word spelling errors and detect hump naming. Farewell to Chinglish

29. Local history

Maintain local history of files, installation is highly recommended. When code is accidentally lost, it can sometimes save lives.

Use of vs code development tools

30. Polacode-2020: generating code screenshots [recommended]

The code fragment can be saved into beautiful pictures. The color scheme of the code varies with the theme, and the border color, size and shadow of the picture can also be customized.

This is especially useful when we need to use code snippets for PPT sharing, or when we need to share code snippets gracefully on the Internet.

The results are as follows:

Use of vs code development tools

Other similar plug-ins:CodeSnap。 We can also go throughhttps://carbon.now.sh/This site generates code images

Some people may say: can’t you use QQ screenshots directly? It can be, but it is not beautiful and clean enough.

31. Image preview

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

32、Auto Close Tag、Auto Rename Tag

Automatically close the label and rename the label automatically.

33、Better Comments

Add a more eye-catching, classified color to your notes.

34、CSS Peek

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

35、Vue CSS Peek

CSS peek does not support Vue, and the plug-in provides support for Vue files.

36、Color Info

This handy plug-in will provide you with information about how to use colors in CSS. You can preview the color model information (hex, RGB, HSL and CMYK) in the color block by hovering the cursor over the color.

37、RemoteHub

Not surprisingly, remotehub and gitlens were developed by the same author.

RemoteHubThe purpose of the plug-in is to view the code on GitHub website locally without downloading the code locally.

Use of vs code development tools

There are not many people using this plug-in at present. Please install it and try it.

38. Live share: real time coding sharing

Live ShareThis magic plug-in is officially produced by Microsoft. Its functions are as follows:Real time coding sharing。 In other words, it enables you to write code with your peers. This is absolutelyPair programmingIt’s an artifact.

Installation method:

Open plug-in management, search for “live share” and install. After installation, restart vs code, and a button will appear on the left side:

Use of vs code development tools

In the picture above, click on the red box and you can share your workspace after logging in.

Use of vs code development tools

39、Import Cost

In the process of project development, we will introduce many NPM packages. Sometimes we only use one method in a package, but introduce the whole package, resulting in a lot of code volume increase.Import CostThe plug-in can give us a friendly prompt in the code about how much volume will be added to the package currently introduced, which helps us optimize the size of the code.

Paste JSON as Code

This plug-in can convert JSON strings in the clipboard into working code. Support multiple languages.

8、 Common theme plug-ins

Give your vs code a new skin, the free one.
Operation: File – preferences – color theme

  • 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
  • Horizon theme: Red Theme