前言
紧接着上一篇博文，其实之前写前端代码我更倾向于使用Sublime，因为其有强大的自动补全功能，但是作为一款入门级的文本编辑器，用其写代码的效果终究不如VSCode，经过了解，后者其实也自带自动补全功能，只不过该功能在默认情况下被禁用了。
此外新版Vscode自带了Emmet插件，通过它可以通过简单的操作完成大量的html编写。
例如若要编写：
<nav class="menu-nav">
<div class="menuitem"></div>
<div class="menuitem"></div>
<div class="menuitem"></div>
</nav>
<div class="block">block</div>
<div class="block">block</div>只需写下：
(nav.menu-nav>div.menuitem*3)+div.block*2{block}并按下Tab键即可完成。
此外VSCode还内置了场景自动格式化功能，这些将在本文后续部分展开介绍。
配置
Snippets
设置 -> 文本编辑器 -> 建议 -> 去掉下图所示对勾（在靠后的位置）
设置 -> 文本编辑器 -> 文件 -> 按照下图所示添加项
此时的settings.json：
"editor.suggest.snippetsPreventQuickSuggestions": false,
"files.associations": { // 手动写代码自动匹配后半个部分
"*.vue": "html",
"*.html": "html"
},Emmet
若使用旧版本软件，可在扩展商店搜索安装：
新版本可以直接进行如下配置：
"emmet.triggerExpansionOnTab": true, // Tab以自动填写自动格式化
"editor.formatOnType": true, // 对键入的信息格式化(键入一行后，就是输入“;”分号结束一行)
"editor.formatOnSave": true, // 对保存后的文件格式化
"editor.formatOnPaste": true, // 对粘贴进行格式化针对php文件，软件自带格式化操作有bug，可以安装phpformatter扩展实现预期效果，通过如下配置即可指定php文件格式化操作通过该插件完成。
"[php]": {
"editor.defaultFormatter": "chuaple.php-formatter"
}注：每一项配置完后最后都随手重启一下VSCode以确保其在正确条件下可以正常生效。
Emmet语法
此处仅对部分常用语法加以记录，获取更多Emmet语法信息请点击这里。
后代：>
缩写：nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav> 兄弟：+
缩写：div+p+bq
<div></div>
<p></p>
<blockquote></blockquote> 上级：^
缩写：div+div>p>span+em^bq
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div> 缩写：div+div>p>span+em^^bq
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
<blockquote></blockquote> 分组：() 缩写：div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div> 缩写：(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>乘法：*
缩写：ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> 自增符号：$
缩写：ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>缩写：h[title=item[title=item[title=item]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3> 缩写：ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul> 缩写：ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul> 缩写：ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul> ID和类属性
缩写：#header
<div id="header"></div> 缩写：.title
<div class="title"></div> 缩写：form#search.wide
<form id="search" class="wide"></form> 缩写：p.class1.class2.class3
<p class="class1 class2 class3"></p> 自定义属性
缩写：p[title="Hello world"]
<p title="Hello world"></p> 缩写：[a='value1' b="value2"]
<div a="value1" b="value2"></div> 文本：{}
缩写：a{Click me}
<a href="">Click me</a> 缩写：p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p> 标签
缩写：link
<link rel="stylesheet" href="" /> 缩写：link:css
<link rel="stylesheet" href="style.css" /> 缩写：link:print
<link rel="stylesheet" href="print.css" media="print" /> 缩写：style
<style></style>缩写：script
<script></script>缩写：script:src
<script src=""></script> 参考资料：
https://blog.csdn.net/qq_35393869/article/details/101280343
https://blog.csdn.net/qq_37162688/article/details/90517963
https://blog.csdn.net/jdsydwr/article/details/120634295
https://www.jianshu.com/p/65899dc9f4a8
https://juejin.cn/post/6888918249518399502
https://blog.csdn.net/weixin_42160117/article/details/114800988
https://blog.csdn.net/weixin_36094484/article/details/82797890
https://www.cnblogs.com/coderon/p/12757724.html
https://blog.csdn.net/angry_rooster/article/details/118560317
https://www.cnblogs.com/ryanzheng/p/12190240.html
https://blog.csdn.net/fighting_dream/article/details/112649843
版权属于：soarli
本文链接：https://blog.soarli.top/archives/592.html
转载时须注明出处及本声明。
