To be good at work, you must first sharpen your tools
The downloaded plugin is as follows
open-in-browser与open in browser
Click the fifth button on the left in vscode, enter the search plugin
and download it.
After downloading, right-click on the code interface and click in the red box to open the webpage formed by the code
A bug
After downloading the plug-in, some students found that the right-clicking code did not appear in the red box.
I handled it like this at the time. Press F5 to save. It will prompt you to select an environment. After the selection, the webpage will open
and the red box will be displayed. The content inside will also appear after right-clicking
vscode-icons
This plug-in mainly has an icon in front of the code, which is clear at a glance. The download method is the same as above, and you can directly see the effect after downloading!
Live Server
The way to download the plug-in is the same as above.
Let’s take a look after the download is complete.
The difference between live server and open in browser
In simple terms, it is live server>open in browser.
Because open in browser is equivalent to opening locally, sometimes the picture cannot be loaded.
weUse live server first!
My first front-end program
After we create a new text file, as described in vscode-icon, click the icon in the lower right corner to change the language mode to html, and then
we enter! Then press tab to complete the html basic code!
Press p and then tab to complete the code of the paragraph.
We output Hello in the middle, the front end, and then run it with the live server, and the effect is as follows
