Emmet syntax
Overview: Emmet syntax has been integrated into vs code and can be used directly. It has a great effect on improving efficiency.
Generate HTML
Click Tab to supplement the generation of the label name
$自增符
{}加内容
>父子关系
+兄弟关系
表达式之间无空格
表达式：标签名./#属性名${内容$}*个数
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>emmet语法学习</title>
<style>
.class0 {
color: red;
}
#id0 {
color: yellow;
}
</style>
</head>
<body>
<div></div>
<!-- div -->
<div></div>
<p></p>
<!-- div+p -->
<ul>
<li></li>
</ul>
<!-- ul>li -->
<p>gaoyang</p>
<!-- p{gaoyang} -->
<p>gaoyang1</p>
<p>gaoyang2</p>
<p>gaoyang3</p>
<p>gaoyang4</p>
<p>gaoyang5</p>
<!-- p{gaoyang$}*5 -->
<p class="class0"></p>
<!-- p.class0 -->
<p id="id0">1111111</p>
<p class="class0">0000000</p>
</body>
</html>
Generate css
简写·加tab
W200
H5
Text-indent2
For example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>emmet语法学习css</title>
<style>
body {
width: 200px;
font-size: 50px;
height: 100px;
}
</style>
</head>
<body>
100
</body>
</html>
Formatting (quickly tidy documents)
Automatic formatting
Automatic formatting setting steps (automatic formatting when saving documents): (Part of the version is invalid)
Document-Preferences-emmet.Include-User-Add "editor.formatOnSave": true and "editor.formatOnType": true
bottom left Angular-emmet.Include-User-Add "editor.formatOnSave":true and "editor.formatOnType":true to
manually format
a) Right click, format
b) Shift alt f (shortcut key)