VSCode

最新推荐文章于 2025-12-31 15:18:13 发布

原创最新推荐文章于 2025-12-31 15:18:13 发布 · 270 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vscode

本文详细介绍了Visual Studio Code（VSCode）中常用快捷键的功能，包括打开用户设置、显示快捷键列表、切换工作区、格式化文档等，旨在提升开发效率。此外，还重点讲解了Emmet插件在HTML代码输入中的强大功能，如快速生成页面模板、智能补全标签、插入多行光标等，帮助开发者更便捷地编写HTML代码。

快捷键

快捷键	作用	说明
CTRL +	打开用户设置	偶尔需要调整用户首选项，这是直接打开它们的方式。
CTRL + K CTRL + S	显示快捷键	这是VSCode中的快捷方式的完整列表。
CTRL + R	切换工作区	这将打开最近工作区的列表，并且是切换到另一个文件夹或项目的超快速方法。
ALT + Z	切换自动换行	希望看到完整的行而无需水平滚动时，它是一个方便的小帮手。
CTRL + G	转到行
CTRL + P	转到文件
F8	转到下一个错误或警告	还可以使用SHIFT+F8转到以前的错误或警告。
CTRL + TAB	切换选项卡	不用鼠标切换已打开文件的最快方法。
SHIFT + ALT + I	在选定的每行末尾插入光标	这对于在选定区域中快速创建多个光标很有用。
CTRL + L	选择当前行
CTRL + SHIFT + L	该快捷方式确实节省了时间，因为不必在整个文件中按CTRL + D
CTRL + F2	选择所有出现的当前单词	有了它，甚至不必选择任何东西，只需将光标放在要选择所有出现的单词上。
CTRL + SHIFT + SPACE	触发参数提示	如果我们不记得参数顺序，也不想通过查看文档来打断我们的流程，可以使用此命令。
SHIFT + ALT + F	格式化文档
CTRL + K CTRL + F	格式选择的代码
F12	转到定义
ALT+F12	查看定义	这只显示了变量或函数的相应定义，而不需要移动光标。
F2	重命名变量
CTRL + K CTRL + X	删除尾部空格
CTRL + K R	在资源管理器中显示活动文件
CTRL + SHIFT + H	替换为文件
CTRL + K V	在右侧打开Markdown预览
Ctrl + K Z	进入Zen模式

快捷输入HTML代码(Emmet插件)

1.输入html或者html:5生成页面模板

<!-- 输入html或者html:5生成页面模板 -->

2.输入link:css引入css样式文件，输入script:src引入js

<!-- 输入link:css引入样式 -->
<link rel="stylesheet" href="">
<!-- 输入script:src引入js -->
<script src=""></script>

3.输入标签名自动补齐

<!-- 输入标签名 h1 按tab键或Enter键自动补齐 -->
<h1>HTML快捷输入练习</h1>
<!-- {}可输入标签内的文本 如输入：h2{填充文本} -->
<h2>填充文本</h2>

4.随机文本的输入

<!-- Lorem自动输入一段随机文本(默认30个单词)-->
<!-- Lorem10 输入10个单词，Lorem*5 输入5遍随机文本 -->

5.使用"#“输入id，”.“输入class，”[]"输入属性

<!-- div#main.content 输入id、class -->
<div id="main" class="content"></div>
<!-- div#foot.foot[data=结束] -->
<div id="foot" class="foot" data="结束"></div>
<!-- div[alt=到底了]{结束} 添加属性及包裹文本 -->
<div alt="到底了">结束</div>

6.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素

<!-- div>div#imgs{put some imgs here} 标签的嵌套-->
<div>
    <div id="imgs">put some imgs here</div>
</div>

7.使用"{}“对标签分组及使用”*"生成多个相同的标签

<!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括号分组标签 *生成多个标签-->
<div id="list1">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="list1">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

8.自增符号$


<!-- $ 自增符号 -->
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->
<ul>
    <li><img src="./imgs/001.jpg" alt="img 001"></li>
    <li><img src="./imgs/002.jpg" alt="img 002"></li>
    <li><img src="./imgs/003.jpg" alt="img 003"></li>
</ul>