VS Code常见书写Html的快捷方式和技巧


Emmet为您提供了一系列快捷方式,包括.html和.css扩展为有用的代码段。Emmet支持内置于VS Code中,因此不需要下载扩展。
 
新的Html
新建一个文件后缀名为.html的空白文件,键入感叹号!,会自动生成Html模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=
"UTF-8">
    <meta http-equiv=
"X-UA-Compatible" content="IE=edge">
    <meta name=
"viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

中文页面需要将en改为zh-CN。
可以使用双感叹号!!为VS Code编辑器创建了一个自定义快捷方式,需要导航(File菜单或按F1 > Preferences (Code > Preferences on macOS))“User Snippets”并键入“ html.json”。然后,将自定义片段添加到此文件中:
{
  "HTML boilerplate": {
   
"prefix": "!!",
   
"body": [
     
"<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
   
"description": "HTML boilerplate with custom tags"
  }
}

使用这个工具来将你的HTML文件转换成上面html.json中JSON字符串转义符。
 
其他常见快写法:
键入:nav>ul>li
输出:
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

li*5:
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

a{连接名称}:
<a href="">连接名称</a>

div.myclass:
<div class="myclass"></div>

divmain
<div id="main"></div>