Use vscode to write html code

Original link: https://www.jianshu.com/p/f8b10f99a0ed

Download and install Visual Studio Code

Visual Studio Code free download address
Set the Visual Studio Code (VSCode) language to Chinese
Press the shortcut key in the Windows system: ctrl+shift+p to open the command panel, the interface is as follows:
insert image description here
Enter in the input box: Configure Language (if it is in Chinese mode, you need to To switch other languages, enter: configuration language). Enter.
insert image description here
Modify the "locale" value to "zh-CN" in the opened locale.json file. After the modification is successful, save and reopen VSCode to complete the language modification.
insert image description here
For a list of selectable languages, please refer to Visual Studio Code Display Language (Locale)

insert image description here
Note: If the language does not change after restarting, it may be that you have not downloaded the Chinese (Simplified) language pack for VSCode. The link is as follows:
Chinese (Simplified) Language Pack for Visual Studio Code - Visual Studio Marketplace


How to quickly start writing html under VSCode

1. New file (Ctrl + N)

2. The newly created file Untitled-1 is in plain text format and needs to be changed to HTML format.
insert image description here
After the change, you can see that both the language mode and the file header have changed.
insert image description here
3. Quickly generate standard html code

(1) Enter on the first line!

(2) Press the Tab key or select the !
insert image description here
insert image description here

View HTML pages in a browser

Visual Studio Code默认是在VScode的控制台下查看html页面,这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件,在浏览器中查看html页面。

insert image description here
After the installation is complete, select the HTML page you want to open in the browser, and press the shortcut key Alt + B to open the page you wrote in the default browser.
insert image description here
Use the shortcut keys Shift + Alt + B to choose other browsers to open.
insert image description here

Guess you like

Origin blog.csdn.net/weixin_45334970/article/details/117816600