Productive VS Code

发表于 分类于 Disqus： 本文字数： 1.9k 阅读时长 ≈ 3 分钟

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

代码联想

  • 查看定义，F12或Option + Click
    • 查看定义（不切换上下文）Option + F12
  • 查看引用（不切换上下文），Shift + F12，查看整个项目引用Shift + Option + F12
  • 重命名，F2
  • 搜索替换，Cmd + F，Cmd + 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。