VS Code 常用的快捷键（个人手打总结）

一时失言乱红尘 2022-12-29 06:36 303阅读 0赞

1.  Ctrl + S: 保存
2.  选中内容，按TAB键可以缩进代码。
3.  !(英文感叹号)+TAB: 快速形成代码框架
4.  标签快捷键：比如写`<h1></h1>`，我们可以写一个`h1`然后按TAB键就会出来`<h1></h1>`。
5.  Ctrl + /： 注释。
6.  Ctrl + \\：快速分屏。
7.  双击内容可以选中标签里的单词。
8.  Ctrl + D：快速删除一行。
9.  Ctrl + L：选中当前行。
10. Ctrl + Home（F11键）：快速到页首。
11. Ctrl + End（F12键）：快速到页尾。
12. Ctrl + F：搜索。
13. Ctrl + H：替换。
14. Ctrl + N：新建一个HTML/CSS。
15. 标签\* + 数字：拥有多个标签。
16. 双单词快捷键：取两个单词的首字母 + TAB。如：line-height（行高），输入 lh 然后按TAB就OK了。再如：text-align: center; 输入 tac 然后按 TAB 就可以了。
17. p+div 按tab键就会形成：

1.  ul>li>div>span + TAB 就会形成：

1.  输入 .demo （这个demo是自定义的）+ TAB, 可以形成：

1.  在 CSS 的 style 中，输入 w80 + TAB，形成：

width: 80px;

1.  Alt + 鼠标左键：在多行中书写或删除内容。
2.  Alt + Z：切换自动换行。
3.  Ctrl + 0（零）：网页缩小或放大后，快速还原成100%。
4.  Ctrl + 回车：跳转到下一行。
5.  Ctrl + Shift + 回车：在当前行的上面加一行。
6.  h1\*6>\{1级标题\} + TAB，形成：

1.  `h$*3{$级标题} + TAB`，形成：

1.  在 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>

1.  加缩进的两种方式：

*  选中内容 按 table 键。
 *  Ctrl + \}

1.  减缩进的两种方式：

*  选中内容 按 Shift+ table 键。
 *  Ctrl + \{

1.  Ctrl + table：文件之间的切换。
2.  Ctrl + L：选中当前行。
3.  Shift + 上、下、左、右箭头：选中多行。
4.  选中文件按 F2 快速重命名。
5.  Ctrl + W：关闭当前打开的 VS code 页面。
6.  Ctrl + Shift + W：退出整个VS code 软件。
7.  Ctrl + Shift + K：删除当前行。
8.  Ctrl + B：打开/关闭左边侧栏。
9.  Ctrl + 加号（+）：放大VS Code 里的内容。
10. Ctrl + 减号（-）：缩小VS Code 里的内容。
11. F11：全屏显示。
12. 输入 input:button + table键  
    显示：
13. 配置用户“用户代码片段”  
    看到设置，点击右键，选择用户代码片段。  
    注意：你要光标停在哪里，你就在哪里设置`$0`。  
    ![在这里插入图片描述][20210126200916969.png]

"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 循环"
    	},

--------------------

1.  ctrl + B : 关闭左边任务栏。
2.  vscode文件夹结构自动折叠取消
    
    1.  查看项目文件夹结构，默认是自动折叠起来的  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]
    2.  点击左下角的设置按钮，弹出的菜单中选择Settings  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]
    3.  跳转的页面中搜索compact，然后点击User标签页，找到如图所示的Compact Folders  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]
    4.  取消勾选Compact Folders，如图所示后保存  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]
    5.  回到项目的文件夹结构面板中，查看到文件夹取消了折叠模式。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]
3.  VS Code 字母键控制`上、下、左、右光标`的移动。  
    设置顺序：文件–》首选项–》键盘快捷方式 – 》分别搜索：up, down, left, right —》找到cursorUp, cursorDown, cursorLeft, cursorRight![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]

1.  光标到一行的最前面和光标到一行的最后面，这个快捷键需要自己定义。
    
     *  光标到一行的最前面(cursorLineStart)：我定义的是`Alt + ;`。
     *  光标到一行的最后面(cursorLineEnd)：我自己定义是`Alt + H`。
2.  侧边栏和上边栏、下边栏的显示和隐藏：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]
3.  VS Code 设置 系统字体大小 和 编辑字体大小  
    修改  
    Ctrl + Shitf + p，输入 settings，选择打开那个JSON的系统配置文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]  
    “editor.fontSize”: 16, 指编辑内容的字体大小是16  
    “window.zoomLevel”: 0.01 指系统内的字体大小。
4.  隐藏 / 显示终端：ctrl + \` (数字 1 前面的那个键)
5.  代码展开：ctrl + shift + \[  
    代码折叠: ctrl + shift + \]
6.  向上/向下复制一行：Shift + Alt + Up/Down
7.  跳到指定行：在文件中进行行跳转，你可以使用Ctrl + G ，然后输入要跳转的行号，当然，你也可以使用Ctrl + P，然后输入：和要跳转的行号。
8.  删除上一个词：ctrl + backspace(退格键)
9.  折叠所有文件夹：shift + alt + z (这个指令字自定义的，系统没有默认的。)
10. [关闭烦人的vscode提示][vscode]
11. 有时候注释了一大段代码并折叠了，但是在后面再写内容，折叠的内容就会展开，让人书写不方便，可以这么处理：
    
        // #region
        /*注释的内容*/
        // #endregion
12. 插件：open in external App 见名知义，可以在vscode中打开其他的应用，如，md文件、Word文档等。但是Xmind好像不行。
13. Search node\_modules：查找node\_modules中的文件夹或文件。
14. 
15. 
16. 
17. 
18. 
19. 
20.

未完待续…

[20210126200916969.png]: /images/20221120/9f5a714e03a74e6a91f992dbae5367c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/348cbe8ce21448969e69f0b1a482f83e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210130145238417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210130145300274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210130145347107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021013014541098.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210207005351493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2021020700554487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210302141818849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210525180510567.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[vscode]: https://blog.csdn.net/liuyuemozhu/article/details/101056556?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162201822116780357215804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162201822116780357215804&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-101056556.first_rank_v2_pc_rank_v29&utm_term=vscode%20%E7%A6%81%E6%AD%A2%E6%8F%90%E7%A4%BA%20&spm=1018.2226.3001.4187