工欲善其事必先利其器,本文整理出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代码插件