工欲善其事必先利其器,本文整理出VSCode常用技巧,帮助大家温故知新,提高开发效率。
注:本文主要介绍Windows系统下VSCode使用技巧,欢迎大家补充修正。
选择文本块
-
键盘同时按下
Shift + DownArrow
(下键)、Shift + RightArrow
(右键)、Shift + UpArrow
(上键)、Shift + LeftArrow
(左键) 的任意组合可选择文本块 -
和Word类似,按住
Shift
键,点击光标开始和结束位置选中文本块 -
选中光标所在位置的单词
Ctrl+D
添加光标
-
按
Ctrl + Alt + UpArrow
在行上方添加新光标 -
按
Ctrl + Alt + DownArrow
在行下方添加新光标 -
使用鼠标和
Alt + Click
在任何地方添加光标
光标移动
-
移动到行首
Home
-
移动到行尾
End
-
移动到文档的开头和末尾
Ctrl+Home/End
-
回到上一个光标的位置,
Ctrl+U
非常有用,有时候Vue文件,你改了html,需要去下面改js,改完js又需要回去,这时候Ctrl+U
-
选择从光标到行尾:
Shift+End
-
选择从行首到光标处
Shift+Home
-
扩展/缩小选取范围
Shift+Alt+Left和Shift+Alt+Right
在文本中所有出现的字符串上创建光标
-
选择字符串的一个实例,例如用鼠标选中background,然后按
Ctrl + Shift + L
,文本中所有的background都将被选中
行操作
-
使用
Shift + Alt + DownArrow
或Shift + Alt + UpArrow
复制光标所在行并将其插入当前光标位置的上方或下方 -
使用
Alt + UpArrow
和Alt + DownArrow
向上或向下移动选定行 -
用
Ctrl + Shift + K
删除整行 -
删除光标所在单词的前半部分:
Ctrl+Backspace
-
删除光标所在单词的后半部分:
Ctrl+Delete
-
单行注释:通过按
Ctrl + /
来注释掉光标所在行、取消注释 -
块注释
Alt+Shift+A
-
选择当前行:
Ctrl+L
-
重开一行:光标在行尾的话,回车即可;不在行尾,
Ctrl+ Enter
向下重开一行;Ctrl+Shift + Enter
则是在上一行重开一行
格式化文档
-
格式化整个文档
Shift + Alt + F
-
格式化当前行
Ctrl + K Ctrl + F
(即先按Ctrl
,再按K
,最后按F
) -
鼠标右键 > Format Document (格式化整个文档)
-
将格式化操作设置为自动化(保存时自动格式化整个文档):
Ctrl + ,
输入editor.formatOnSave
代码缩进
-
整个文档进行缩进调节,使用
Ctrl+Shift+P
打开命令面板,输入缩进
,然后选择相应的命令 -
选中代码缩进调节:
Ctrl+] 、Ctrl+[
分别是减小和增加缩进
调整字符大小写
-
选中
Ctrl+D
,然后在命令面板Ctrl+Shift+P
输入大写或者小写
窗口和侧边栏
-
打开或关闭侧边栏:
Ctrl+B
-
打开一个新窗口:
Ctrl+Shift+N
-
关闭窗口:
Ctrl+Shift+W
-
文件之间切换:
Ctrl+Tab
-
打开集成终端`Ctrl+``
-
并行编辑,拆分屏幕:
Ctrl+\
代码展开与折叠
-
折叠
Ctrl + Shift + [
-
展开
Ctrl + Shift + ]
快速跳转(文件、行、符号)
-
快速打开文件:
Ctrl+P
输入你要打开的文件名,回车打开;这里有个小技巧,选中你要打开的文件后,按Ctrl+Enter
,就会在一个新的编辑器窗口打开 -
快速跳转到某一行
Ctrl+G
输入行号,如果你想跳转到某个文件的某一行,你只需要先按下Ctrl + P
,输入文件名,然后在这之后加上:
和指定行号即可。
-
符号跳转:符号可以是文件名、css类名,Ctrl+Shift+O输入你要跳转的符号,回车进行跳转
-
跳转到定义(definition)处:
F12
-
跳转到实现(implement)处:
Ctrl+F12
其他快捷命令
-
搜索
Ctrl+F
-
查找替换:
Ctrl+H
-
重命名符号(函数名或变量名)
F2
或鼠标右键 -
错误导航:按
F8
键可以按顺序在错误之间导航,并查看详细的错误消息 -
命令面板:使用
F1
或者Ctrl+Shift+P
打开,在命令面板中你可以输入命令进行搜索(中英文都可以),然后执行。命名面板中可以执行各种命令,包括编辑器自带的功能和插件提供的功能。 -
放大缩小编辑器字体
ctrl+shift++/ctrl+shift+-
-
Ctrl+D
)第一次按下时,它会选中光标附近的单词;第二次按下时,它会找到这个单词第二次出现的位置,创建一个新的光标,并且选中它。(注:ctrl-k ctrl-d
跳过当前的选择) -
Alt+Shift+I
首先你要选中多行代码,然后按Alt+Shift+I
,这样做的结果是:每一行后面都会多出来一个光标 -
撤销多光标:使用
Esc
撤销多光标或者鼠标点一下撤销
VSCode常用配置项
-
editor.fontsize
用来设置字体大小,可以设置editor.fontsize : 14
-
files.autoSave
这个属性是表示文件是否进行自动保存,推荐设置为onFocusChange
——文件焦点变化时自动保存 -
editor.tabCompletion
用来在出现推荐值时,按下Tab键是否自动填入最佳推荐值,推荐设置为on; -
editor.codeActionsOnSave
中的source.organizeImports
属性,这个属性能够在保存时,自动调整 import 语句相关顺序,能够让你的 import 语句按照字母顺序进行排列,推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true };
-
editor.lineNumbers
设置代码行号,即editor.lineNumbers :true;
VSCode常用插件
-
Chinese Laguage Pack for Visual Studio Code:VSCode汉化插件
-
CSS Peek: 自动跳转到CSS定义处
-
GitLens: 提示每行代码的提交记录
-
Markdown All in One: Markdown插件
-
Regex Previewer: 正则表达式实时预览
-
Vetur:Vue代码插件