Productive VS Code

Visual Studio Code Tips and Tricks

这里介绍一些能提高VS Code产率的方法。

基础

欢迎页右下角提供Interactive playground(在命令面板里的Help > Interactive Playground)。里面提供了VS Code一些关键特性的快速介绍。比如:

  • 多光标编辑
  • 行操作
    • 整行向上、下移动Option + up/down
    • 整行向上、下复制Shift + Option + up/down
    • 删除整行Shift + Cmd + K
    • 注释整行Cmd + /
  • 重构
    • 重命名:光标处F2,修改后自动同步相关位置
    • 选中语句 -> Cmd + . -> 选择重构方式
  • 格式化文档:Cmd K + Cmd F或者Shift + Option + F
  • 折叠
    • 折叠Option + Cmd + [,展开Option + Cmd + ]
    • 折叠所有Cmd K + Cmd 0,展开所有Cmd K + Cmd J
  • 代码片段:见代码片段一节
  • Emmet:见Emmet一节

常见操作

指令面板

快捷键Shift + Cmd + P。里面的常见命令都有快捷键提示。

快速打开文件

快捷键Cmd + P。点击打开文件,点击右方向键打开不会关闭当前面板。

状态栏

Shift + Cmd + M

修改语言

Cmd K + M

命令行工具

打开指令面板,安装code命令。

常见命令:

1
2
3
4
5
6
7
8
9
10
11
# open code with current directory
code .
# open the current directory in the most recently used code window
code -r .
# change the language
code --locale=es
# open diff editor
code --diff <file1> <file2>

自定义编辑器

Cmd + ,,打开编辑器编辑配置。也可以

插件

Cmd + Shift + X,利用插件增强你的开发体验和生产率。

文件及目录

  • 内置terminal,Ctrl + `或View -> Terminal或命令面板里输入View: Toggle integrated terminal。深度阅读
  • 自动保存,setting.json中设置"files.autoSave": "afterDelay"
  • toggle侧边栏,Cmd + B
  • 专注模式,Cmd K + Z
  • 分栏,Cmd + \,使用Cmd + 1, Cmd + 2等切换
  • 关闭当前tab,Cmd + W
  • 浏览历史
    • 全部历史,Ctrl + Tab按住选择
    • 回退,Ctrl + -
    • 前进,Ctrl + Shift + -

高效编辑

多光标

  • Cmd + Click可以多光标操作
  • Cmd + Shift + L可以在所有选中单词的末尾多光标操作
  • Cmd + D选中当前单词

盒式选中

Shift + Alt + 拖拽

选中当前行

Cmd + L

快速滚动

Alt + 滚动可以达到x5速度的滚动

行操作

行向上/下复制/剪切,见[基础]一节里的介绍

层级选中

Ctrl + Shift + Cmd + left/right可以扩大/缩小当前选择范围

Goto Symbol

  • Shift + Cmd + O当前文件下选择符号名,输入@:可以进行分类
  • Shift + Cmd + T当前工作区下选择符号名

Goto特定行

Ctrl + G

trim行尾空格

Cmd K + Cmd X

Markdown预览

  • Cmd + Shift + V
  • 实时预览Cmd K + V

代码联想

  • 查看定义,F12Option + Click
    • 查看定义(不切换上下文)Option + F12
  • 查看引用(不切换上下文),Shift + F12,查看整个项目引用Shift + Option + F12
  • 重命名,F2
  • 搜索替换,Cmd + FCmd + Shift + F

Emmet

VS Code支持Emmet风格书写HTML代码。完整的Emmet语法参考这里

Code Snippet

Code Snippet即能让你更容易复用的代码模板,如for循环,if语句等。在代码联想时,可以自动帮你补全,开启"editor.tabCompletion": "on"配置时,也可以使用Tab键补全。

在VS Code Marketplace中有许多snippets拓展。搜索”xxx snippet”多半你能找到已有的snippet拓展。

书写自己的snippet可以参考官方文档

Git集成

Shift + Ctrl + G打开。

  • 支持Side by side和Inline view两种diff模式。
  • 左下角快捷切换分支
  • 手动添加文件、解决冲突

更多参考Git integration一节。

调试

在命令面板中输入”Debug”查看相关命令。更多查看Debugging一节

脚本任务

参考Task Runner