VSCode配置代码自动补全

前言

紧接着上一篇博文，其实之前写前端代码我更倾向于使用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

转载时须注明出处及本声明。