VScode快捷键

AIains

已于 2023-10-25 20:40:41 修改

阅读量200

点赞数 1

分类专栏：开发工具使用教程文章标签： vscode 编辑器

于 2023-09-19 13:57:29 首次发布

本文链接：https://blog.csdn.net/AIains/article/details/133025527

版权

开发工具使用教程专栏收录该内容

20 篇文章 1 订阅

订阅专栏

持续更新中......

1、其他
Ctrl  +  A：全选
Ctrl  +  S：保存
Ctrl  +  B：收起左边栏
Alt   +  B：运行到浏览器
Ctrl  +  Z：撤销上一步操作
Ctrl  +  - / +：调整字体大小
Shift  +  Alt  +  F：格式化代码
Alt  +  ↑/↓：向上或向下移动一行（当上面和下面有内容时相当于交换位置）

2、注释
Ctrl  +  / ：注释整行或选中的行
Shift  +  Alt  +  A：添加块注释(可以实现一行内部分代码的注释)
Shift  +  Alt  +  A：js中的多行注释

3、复制粘贴移动
Ctrl  +  X：剪切
Ctrl  +  C：复制
Shift  +  Alt  +  ↑/↓：向上或向下复制一行
Ctrl  +  V：粘贴
Ctrl  +  Enter：在下面插入行
Ctrl  +  Shift  +  Enter：在上面插入行
alt  +  ↑/↓：向上或向下移动

4、查找
Ctrl  +  F：快速查找
Shift  +  F3：查找上一个
Ctrl  +  G：快速定位到某一行
Ctrl  +  H：快速替换
Ctrl  +  Alt  +  F：替换
Ctrl  +  Shift  +  F：在项目内搜索

5、删除
Shift  +  Delete：删除本行代码
Ctrl  +  Shift  +  K：删除行

6、缩进
Ctrl  +  [：增加缩进
Ctrl  +  ]：减少缩进

7、其他
Ctrl  +  Shift  +  N：新建窗口
Ctrl  +  Shift  +  W：关闭窗口

8、补充：
Ctrl  +  K Ctrl  +  S：键盘快捷键
Ctrl  +  Shift  +  M：显示报错问题面板。
Ctrl  +  Shift  +  [：折叠区域代码
Ctrl  +  Shift  +  ]：展开区域代码
Alt  +  Z：切换自动换行


Ctrl  +  Shift  +  \：跳转到匹配的括号
Ctrl  +  T：显示所有符号。
Ctrl  +  G：转到行...。
Ctrl  +  P：转到文件...。
Ctrl  +  Shift  +  O：转到符号...。
F8：转到下一个错误或警告。
Shift  +  F8：转到上一个错误或警告。
Ctrl  +  Shift  +  Tab：导航编辑器组历史记录。
Alt  +  ←/→：后退/前进
Ctrl  +  M：切换选项卡移动焦点
Ctrl  +  ↑/↓：向上/向下滚动行。
Alt  +  PgUp/PgDn：上/下滚动页面。

1、初始代码生成
！+ enter 可以生成以下内容：

<!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>

2、css和js的引入
link:css 可以引入css样式文件，生成效果如下：
<link rel="stylesheet" href="style.css">

script:src 可以引入js，生成效果如下：
<script src=""></script>

3、标签自动补齐
标签名+tab或enter键，自动补齐标签，效果如下：
div+回车		可以生成	<div></div>

标签名+{}+tab或enter键，自动补齐标签，并且填充大括号中的内容，效果如下：
div{小明上了大学}+回车		
可以生成	<div>小明上了大学</div>

4、随机文本输入
Lorem	自动生成一段随机文本(默认30个单词)
Lorem10		随机生成含有10个单词的文本
Lorem*5		随机生成五段文本，每段文本30个单词
Lorem10*10	随机生成10行文本，每行文本10个单词

5、使用“#”输入id  	    使用“.”输入class 	
   使用“[]”输入属性      使用“{}”输入标签里面的内容
div#qqfc	
生成	<div id="qqfc"></div>

div#main.content	
生成	<div id="main" class="content"></div>

div#nyy.ddd[shu]	
生成	<div id="nyy" class="ddd" shu=""></div>

div#nyy.ddd[shu="aaa"]	
生成	<div id="nyy" class="ddd" shu="aaa"></div>

div#nyy.ddd[alt="到底了"]{内容}	
生成	<div id="nyy" class="ddd" alt="到底了">内容</div>

6、使用“>”输入嵌套标签	使用“+”输入并列(相当于同一级)的兄弟标签	使用“^”上级标签
6.1、
div>div#inns{你好} 生成如下：	
<div>
    <div id="inns">你好</div>
</div>

6.2、
div#ggg{小明在左}+div#rikk{小红在右} 生成如下：
<div id="ggg">小明在左</div>
<div id="rikk">小红在右</div>

6.3、
div#d1>p^div#d2 生成
<div id="d1">
    <p></p>
</div>
<div id="d2"></div>

div>div#d1>p^div#d2 生成
<div>
    <div id="d1">
        <p></p>
    </div>
    <div id="d2"></div>
</div>

div>p>img^div>ul>li 生成
<div>
    <p><img src="" alt=""></p>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
</div>
    
div>div>div^div 生成
<div>
    <div>
        <div></div>
    </div>
    <div></div>
</div>

div>div^div 生成
<div>
    <div></div>
</div>
<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>

(div#list1>ul>li*2)+(div#list2>ul>li*3) 生成
<div id="list1">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="list2">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

8、自增符号 $
ul>li*3>img[src=./mags/$.jpg][alt={img $}] 生成
<ul>
    <li><img src="./mags/1.jpg" alt={img 1}></li>
    <li><img src="./mags/2.jpg" alt={img 2}></li>
    <li><img src="./mags/3.jpg" alt={img 3}></li>
</ul>

ul>li*3>img[src=./mags/$$$.jpg][alt={img $$$}] 生成
<ul>
    <li><img src="./mags/001.jpg" alt={img 001}></li>
    <li><img src="./mags/002.jpg" alt={img 002}></li>
    <li><img src="./mags/003.jpg" alt={img 003}></li>
</ul>

ul>li*3>img[src=./mags/$$@4.jpg][alt={img $$@4}] 生成
<ul>
    <li><img src="./mags/04.jpg" alt={img 04}></li>
    <li><img src="./mags/05.jpg" alt={img 05}></li>
    <li><img src="./mags/06.jpg" alt={img 06}></li>
</ul>

h$*6 生成
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

9、补充
快速生成有序列表标签：ol>li*4	然后按tab键
快速生成无序列表标签：ul>li*4	然后按tab键
快速生成表格标签：table>tr*4>td*3	然后按tab键		会自动生成4行3列的表格

底部

AIains

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VScode快捷键

持续更新VScode常用或好用的快捷键
复制链接

扫一扫

专栏目录

VScode快捷键

“相关推荐”对你有帮助么？