- Ctrl + S: 保存
- 选中内容,按TAB键可以缩进代码。
- !(英文感叹号)+TAB: 快速形成代码框架
- 标签快捷键:比如写
<h1></h1>
,我们可以写一个h1
然后按TAB键就会出来<h1></h1>
。 - Ctrl + /: 注释。
- Ctrl + \:快速分屏。
- 双击内容可以选中标签里的单词。
- Ctrl + D:快速删除一行。
- Ctrl + L:选中当前行。
- Ctrl + Home(F11键):快速到页首。
- Ctrl + End(F12键):快速到页尾。
- Ctrl + F:搜索。
- Ctrl + H:替换。
- Ctrl + N:新建一个HTML/CSS。
- 标签* + 数字:拥有多个标签。
- 双单词快捷键:取两个单词的首字母 + TAB。如:line-height(行高),输入 lh 然后按TAB就OK了。再如:text-align: center; 输入 tac 然后按 TAB 就可以了。
- p+div 按tab键就会形成:
<p></p>
<div></div>
- ul>li>div>span + TAB 就会形成:
<ul>
<li>
<div>
<span>
</span>
</div>
</li>
</ul>
- 输入 .demo (这个demo是自定义的)+ TAB, 可以形成:
<div class="demo"></div>
- 在 CSS 的 style 中,输入 w80 + TAB,形成:
width: 80px;
- Alt + 鼠标左键:在多行中书写或删除内容。
- Alt + Z:切换自动换行。
- Ctrl + 0(零):网页缩小或放大后,快速还原成100%。
- Ctrl + 回车:跳转到下一行。
- Ctrl + Shift + 回车:在当前行的上面加一行。
- h1*6>{1级标题} + TAB,形成:
<h1>1级标题</h1>
<h1>1级标题</h1>
<h1>1级标题</h1>
<h1>1级标题</h1>
<h1>1级标题</h1>
<h1>1级标题</h1>
h$*3{$级标题} + TAB
,形成:
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
- 在 body 里打 lorem + TAB 就会出现一段文字,这些文字没有实际意义,对以后的测试会有帮助,lorem 就是“乱数假文”。
输入:p*6>lorem5 + TAB
,形成:
<p>Lorem ipsum dolor sit amet.</p>
<p>Optio ipsa est aliquid voluptate?</p>
<p>Autem non molestiae dolor voluptates.</p>
<p>Exercitationem placeat pariatur dolore? Unde?</p>
<p>Eum dolorum molestias quasi nam.</p>
<p>Consequuntur ab totam officiis. Illum!</p>
- 加缩进的两种方式:
- 选中内容 按 table 键。
- Ctrl + }
- 减缩进的两种方式:
- 选中内容 按 Shift+ table 键。
- Ctrl + {
-
Ctrl + table:文件之间的切换。
-
Ctrl + L:选中当前行。
-
Shift + 上、下、左、右箭头:选中多行。
-
选中文件按 F2 快速重命名。
-
Ctrl + W:关闭当前打开的 VS code 页面。
-
Ctrl + Shift + W:退出整个VS code 软件。
-
Ctrl + Shift + K:删除当前行。
-
Ctrl + B:打开/关闭左边侧栏。
-
Ctrl + 加号(+):放大VS Code 里的内容。
-
Ctrl + 减号(-):缩小VS Code 里的内容。
-
F11:全屏显示。
-
输入 input:button + table键
显示:<input type="button" value="">
-
配置用户“用户代码片段”
看到设置,点击右键,选择用户代码片段。
注意:你要光标停在哪里,你就在哪里设置$0
。
"queryselector":{
"scope" : "javascript",
"prefix" :"qs",
"body" : [
"document.queryselector('$0');"
],
"description": "获取API所有"
},
"for 循环":{
"scope" : "javascript",
"prefix" :"fi",
"body" : [
"for (var i = 0; i < .length; i++) {
}"
],
"description": "for 循环"
},
-
ctrl + B : 关闭左边任务栏。
-
vscode文件夹结构自动折叠取消
-
查看项目文件夹结构,默认是自动折叠起来的
-
点击左下角的设置按钮,弹出的菜单中选择Settings
-
跳转的页面中搜索compact,然后点击User标签页,找到如图所示的Compact Folders
-
取消勾选Compact Folders,如图所示后保存
-
回到项目的文件夹结构面板中,查看到文件夹取消了折叠模式。
-
-
VS Code 字母键控制
上、下、左、右光标
的移动。
设置顺序:文件–》首选项–》键盘快捷方式 – 》分别搜索:up, down, left, right —》找到cursorUp, cursorDown, cursorLeft, cursorRight
-
光标到一行的最前面和光标到一行的最后面,这个快捷键需要自己定义。
- 光标到一行的最前面(cursorLineStart):我定义的是
Alt + ;
。 - 光标到一行的最后面(cursorLineEnd):我自己定义是
Alt + H
。
- 光标到一行的最前面(cursorLineStart):我定义的是
-
侧边栏和上边栏、下边栏的显示和隐藏:
-
VS Code 设置 系统字体大小 和 编辑字体大小
修改
Ctrl + Shitf + p,输入 settings,选择打开那个JSON的系统配置文件
“editor.fontSize”: 16, 指编辑内容的字体大小是16
“window.zoomLevel”: 0.01 指系统内的字体大小。 -
隐藏 / 显示终端:ctrl + ` (数字 1 前面的那个键)
-
代码展开:ctrl + shift + [
代码折叠: ctrl + shift + ] -
向上/向下复制一行:Shift + Alt + Up/Down
-
跳到指定行:在文件中进行行跳转,你可以使用Ctrl + G ,然后输入要跳转的行号,当然,你也可以使用Ctrl + P,然后输入:和要跳转的行号。
-
删除上一个词:ctrl + backspace(退格键)
-
折叠所有文件夹:shift + alt + z (这个指令字自定义的,系统没有默认的。)
-
关闭烦人的vscode提示
-
有时候注释了一大段代码并折叠了,但是在后面再写内容,折叠的内容就会展开,让人书写不方便,可以这么处理:
// #region /*注释的内容*/ // #endregion
-
插件:open in external App 见名知义,可以在vscode中打开其他的应用,如,md文件、Word文档等。但是Xmind好像不行。
-
Search node_modules:查找node_modules中的文件夹或文件。
-
ctrl + shift + L 能够很快的形成
console.log('xxx', xxx);
var a = 1;
// 选中 a,然后按 ctrl + shift + L 就会形成:console.log(''a'', a);
clo
能够很快的形成console.log('xxx', xxx);
并且会出现两个光标,你可以写上你要打印的变量
有两种可以选:一个是基本类型的,一个是对象类型的
console.log('first', first);
console.log('object :>> ', object);
-
Gitlens-Git supercharged 插件
可以记录你写代码的日期:
-
我们经常在使用vscode的时候,用了一些插件,在打字提示的时候,那个abc的选项会在第一个出现,而那个并不是我想要的。
我要的是第二个,如何把abc往后面移呢?
打开设置,在搜索中输入editor.snippetSuggestions,然后将选项改为top,就可以解决了
效果:
-
向上复制一行、向下复制一行、向上移动一行、向下移动一行:
33个好用的vscode插件
未完待续…
更多推荐
VS Code 常用的快捷键(个人手打总结)
发布评论