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{连接名称}:
div.myclass:
<div class="myclass"></div>
|
divmain: