This article is mainly used to make basic settings for vscode. The whole article seems to be procedural. It is best to follow the settings step by step from beginning to end.
Directory:
1. Install vscode
2. Install the "Chinese" plug-in to make the software Chinese. 3.
Install the software theme to personalize the software interface
4. Open a file directory as a project directory
5. Create a new web page
6. Install "beautify "plug-in, so that the code can be formatted
7. Set the font size of the vscode code display
8. Realize "refresh the webpage while writing the code to see the style effect of the webpage"
1. Install vscode
The software installation process is very simple, just follow the prompts to install the whole process. But when you are in the above interface during the installation process, check " Create a desktop shortcut ", " Add the 'Open with Code' operation to the Windows Explorer file context menu " and " Add the 'Open with Code' operation Add to Windows Explorer directory context menu ".
Reason:
Create a desktop shortcut: it is convenient for us to open the software.
Add the "Open by Code" action to the Windows Explorer file context menu: for us to open a file directory as a project directory. (Related to the fourth and eighth points in the follow-up)
Add the "Open by Code" operation to the Windows Explorer directory context menu: for us to open a file directory as a project directory. (related to the subsequent fourth and eighth points)
In addition, users can also set the software installation path by themselves (as shown in the figure below), and click the "Browse" button. As for other steps in the installation process, just follow the installation prompts and operate normally.
2. Install the "Chinese" plug-in to make the software Chinese
My screenshots show that my software is already in Chinese. This is because I have installed this plug-in before, and it has not been uninstalled cleanly.
The first step, click the "Extension" button (or press the shortcut key ctrl+shift+x)
As shown below:
The second step is to search for "Chinese" in the search box
As shown in the picture below:
Click the first one. I am here because I have already downloaded it. When installing this software for the first time, just click a blue button——install, and you can install the Chinese language pack, which is also called the Chinese language extension plug-in. Vscode without the Chinese language pack installed generally has an English interface.
3. Install the software theme to personalize the software interface
Also click "extend", I just search for a topic. As shown in the picture below, because I have installed it before, it is just disabled. Click the "Install" button when installing for the first time.
After installation, you can see different interface colors. You can download themes according to your preferences, Baidu "what are the good-looking themes for vscode" and you can find some you like.
4. Open a file directory as a project directory
In the future, you can put your own code in this folder.
Right-click on this folder and select "Open with Code" .
Note: When installing vscode in the first point, I said to check "Add the 'Open by Code' operation to the Windows Explorer file context menu" and "Add the 'Open by Code' operation to the Windows Explorer directory Context menu", they are here to "open by Code" folder, if not ticked, right-clicking the folder will not have this column.
After opening, vscode will list the contents of the folder, as shown in the figure below:
The advantage of "open by Code" is that vscode can directly list the items in our project folder, which is convenient for us to click Edit; the second is to facilitate our use of the "live server" plug-in that will be mentioned in the eighth point later.
5. Create a new web page
Click to create a new file as indicated in the image below. 
To create a file with html as the suffix, that is, to create a new web page, you only need to write its suffix as "html" when editing the file name. Other suffix types operate similarly. As shown in the figure below:
In this way, we have created a new web page for subsequent programming.
Note: In a real actual project, when we name the webpage, it is best not to use Chinese , because it may cause some troubles to the project.
6. Install the beautify plug-in to enable the code to be formatted
The operation steps to install the "beautify" plug-in are similar to the second point (Chinese) and the third point (Radical), just search for "beautify" when searching, and click the "Install" button. As shown in the figure below:
This plug-in is used for code formatting when we write HTML, CSS and Javascript code later, making the code easier to read.
Seven, set vscode code display font size
The first step is to open "Settings"
Three methods to open "Settings":
Method 1: Click the gear button ("Management" button) in the lower left corner, find "Settings"; 
Method 2: Click the "File" tab, put the mouse on the "Preferences" , you can find "Settings";
Method 3, the shortcut key "ctrl+," can also open "Settings".
The second step, find "Editor: Font Size"
As indicated by the arrow in the figure below, click the text box to change the code font display size by yourself. 16 should be fine.
8. Realize the function of "refreshing the webpage while writing code to see the style effect of the webpage"
This feature uses the "live server" plugin.
Let's first talk about the principle, or process, of this function.
The "live server" plug-in will help us refresh the webpage after we save the source code of the webpage (you can use the ctrl+s shortcut key), instead of clicking the webpage refresh button ourselves. But the premise is that when opening the webpage, right-click the source code editor and click "Open with Live Server" to open the webpage.
Note: As mentioned in the fourth point above, you need to use "Open by Code" to open the folder. That's because the "Open with Live Server" function of "live server" can only be used when the source code of the webpage must be in a folder opened by "Open with Code", otherwise the content in the red box below will be displayed: Of course,
we You can also open the folder by clicking the "File" tab --> "Open Folder" , which is the same as "Open with Code". All in all, the source code of the web page must be in a folder, and the entire folder must be added to vscode to use the "Open with Live Server" function of the "live server" plug-in. In this way, the function of automatically refreshing the web page after saving the code can be used. At this time, if our web page source code can be saved by itself, then the function of editing the code, saving the code by itself, and refreshing the web page by itself will be realized.
Coincidentally, vscode just provides us with a function of "automatically saving the source code according to a certain delay time".
In this way, if we set the delay time to 300ms (which is already very short), vscode will automatically save the code every 300ms when we edit the code. After the code is saved, it will pass the "Open with Live Server" of the "live server" plug-in The webpage opened by the function will refresh itself, and we have realized the function of "seeing the style effect of the webpage in real time while writing code".
Next, let's implement this function step by step:
The first step is to install "live server"
The installation process is the same as the previous plug-in installation process, as shown in the following figure:
The second step, use "Open with Live Server"
Right-click the code editing area, select "Open with Live Server", so that you can use the "live server" to open the web page. As shown in the figure below:
Note: Look at the content in the red box, and open the webpage with "live server" to simulate project development.
Now the browser can help us automatically refresh the web page after we save the source code.
The third step is to let vscode automatically save the source code according to a certain delay time
In this way, you can realize the function of saving the source code while editing the code, and refreshing the web page to see the effect of the web page style in real time.
process:
1. Open "Settings"
The method of opening "Settings" has been mentioned in the seventh point above, so I won't repeat it here. Find "Files: Auto Save" (the first of the common settings), and change the default "off" to "afterDelay".
At this time, the webpage opened through the "live server" can automatically refresh the webpage after the default delay of 1000ms.
2. Set an appropriate auto-save delay time
Click "Text Editor" --> click "File" --> find "Auto Save Delay", the default value is 1000, and the default unit is milliseconds. We change it to 300, and the webpage can refresh itself at an interval of 300ms, and the function is realized. The operation is as shown in the figure below:
Here we can also find "Auto Save", just above "Auto Save Delay".
This article is what I learned when I was studying the front-end at Shang Silicon Valley at Station B. I am afraid that I will forget it in the future, so I will record it. This is my first time editing a blog, and it took about two days. The article is a bit long, and there may be some things that are not very clear. You are welcome to ask questions, and I hope it can help you.