VSCode 使用笔记

Posted on

VSCode 记录 VSCode 的特性、插件、快捷键。

安装

绑定到code命令

打开 VSCode –> command+shift+p –> 输入 shell command –> 点击提示 Shell Command: Install ‘code’ command in PATH 运行

设置 terminal

在配置文件中设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 设置 zsh 为Shell
"terminal.integrated.shell.linux": "/bin/zsh",
"terminal.integrated.shell.osx": "/bin/zsh",
// 设置Path，Path中的值可以在系统命令行执行"echo $PATH"取得
// 设置环境变量'CLICOLOR=1'，可以增加文字颜色
"terminal.integrated.env.osx": {
    "PATH": "xxx",
    "CLICOLOR": "1"
}
// 设置右键时自动拷贝粘贴动作，OSX不好用
"terminal.integrated.rightClickBehavior": "copyPaste",
// 当 terminal 出错时允许响铃
"terminal.integrated.enableBell": true,

关闭 Preview

默认点击文件时，如果不是已变更文件则会自动覆盖之前的文件页面，不方便看代码。可以通过下面操作关闭”Preview”功能：

  1. ctrl + shift + p 搜索 Open User Settings
  2. 在搜索框输入Preview
  3. 把Workbench->Editor:Enable Preview的勾选取消，就可以了

Workspace

VSCode 的配置文件分为多个级别，按作用范围：Default Settings > (Global)Settings > User Settings > Workspace Settings > 文件夹 Settings

如果为了简单，可以每个工程文件夹创建一个配置文件”.vscode/settings.json”。但是多个工程文件夹之间可能有冗余，但是比较灵活。 也可以导出 Workspace，一个 workspace 可以包含多个 Folder，这样多个工程文件夹可以共用。

  • 可以为特定语言设定配置
  • 范围越小、越接近代码的配置优先级越高

VSCode debug 方法

  1. 在所在的工程根目录增加.vscode文件夹，其中存放的配置会被 VSCode 加载时优先使用。
  2. 创建.vscode/settings.json文件，用于 debug 所需的特有配置
    • 比如Go语言需要设置go.goroot
  3. 创建.vscode/launch.json文件，用于启动配置，其内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "version": "0.2.0", // 自带的版本号，不用管
  "configurations": [
    // 可以设置多个备选项
    {
      "name": "Launch", // 启动项名
      "type": "go", // 语言
      "request": "launch",
      "mode": "auto",
      "stopOnEntry": true, // 启动时暂停，等待打点
      "cwd": "${workspaceRoot}/", // 程序启动时当前目录
      // main 入口函数所在文件，如果只填 main package 所在文件夹，则会自动编译
      "program": "${workspaceRoot}",
      "env": { "env1": "value1" }, // 环境变量
      "args": ["-flag1=value1", "-flag2=value2"] // 启动参数
    }
  ]
}
  1. 在代码编辑框点击左侧添加断点
  2. 在代码显示时，用命令Run -> Start Debugging，就会开始运行并自动卡在断点
  3. 在测试 case 函数上可以看到”run/debug”符号，同样可以启动 debug

markdown

VSCode 原生支持 markdown 格式。

可以用相对路径预览图片，注意路径根目录必须是 VSCode 导入时的文件夹。

  • 遇到的一个问题：
    • A 文件夹包含 B 和 C 两个 markdown 项目，将 A 文件夹作为根目录文件夹导入 VSCode。这时，B 中的图片在以 B 为根目录的相对路径下，无法显示。
  • 解决方法：
    • 分别导入 B C 两个文件夹即可。

compare file

  1. Right click the first file and “Select for Compare”
  2. Right click on the second file and “Compare with Selected”
  3. You should see the diff panel appear once you’ve completed these steps:

git

VSCode 原生支持 git，提供基本的 pull push commit stash checkout 操作。可以方便的查看差异、解决冲突、查看版本分支图。可以将这些 UI 操作背后的 git 命令操作输出到 output。

常用插件

markdown preview enhanced

可以更好的显示 markdown 格式，并且可以导出为图片或 pdf

方便解析代码

Bookmarks

可以记录书签 CMD+OPT+K 可以快速设置/取消书签

Text Marker (Hightlighter)

代码高亮查看工具 可以自己设置快捷键进行高亮/取消高亮操作

VS Code Counter

代码行数统计工具

PlantUML

可以以特定的文本格式来表示各种 UML 图，从此 UML 图也可以以文本进行版本控制了。结合对应的语言转换工具，可以方便的将各种语言(主要是静态语言)编写的代码转化为类图，便于代码分析。

YAML

编辑 yaml 格式文件

方便编辑

Vim

实现了 Vim 的主要功能，缩短键程提高编码效率。

  • 注意按照说明先配置按键长按 Repeat 速度、绑定系统剪贴板

MarsCodeAI

字节的编码助手，可以通过 ChatGPT 进行代码提示

git 相关

GitLens

补充了很多 git 功能，例如增加git blame视图、查看两个版本的文件差异。

  • 在左侧添加了 gitlens 工具集，可以分割窗口对比任意版本
  • 在查看git blame时，可以不断向前追溯代码变更

Git Graph

可以图形化的查看版本分支合并情况

Git History

图形化的方式查看git log

特定语言

ESLint Javascript 代码格式化工具

Vetur Vue 辅助工具，语法检查、代码格式化

Prettier-Code formatter 通用代码格式化工具，可用于 Markdown 格式化

Python Python 开发辅助插件

Go golang 开发辅助插件

  • 注意有时候导入包存在冲突时会导致插件卡住，需要手动添加 import
  • 如果代码中有循环引用，也会引起gopls卡住，尽早执行go build就能发现问题
  • bug: 如果当前打开 Workspace 包含多个 Project Folder，并且当前打开了多个 Project 中的文件，则可能在 terminal 当前文件夹自动生成打开文件的 go.mod 和 go.sum 到当前目录，这样就增加了多余的库 item。只要关闭所有其他 Project 的文件，terminal 当前文件夹就不会有问题了。

vscode-proto3 proto 格式查看工具

Clang-Format proto 格式自动整理工具

快捷键

在 windows 通常是以 Ctrl 作为组合键开头，mac 通常以 CMD 开头。

搜索

Ctrl+P 打开搜索框，输入文件名，可以直接打开文件

Ctrl+Shift+F 打开搜索框，可在范围内搜索文件内容

显示

全部折叠

Ctrl+K -> Ctrl+0

全部展开

Ctrl+K -> Ctrl+J

递归折叠

CMD+K -> CMD+[

递归展开

CMD+K -> CMD+]

编辑

(未选中)Ctrl+X 剪切一行(删除一行)

(未选中)Ctrl(+Shift)+Enter 在下一行(上一行)添加空行

(未选中)Atl+↑(↓) 当前行向上(向下)移动选中行(可以多行)

ALT+⬅️ 跳到前一位置

ALT+➡️ 跳到下一位置

CMD+F 查找

CMD+OPT+F 替换

编辑 mac

CTRL[+SHIFT]+- 跳到前一(下一)位置，也可以直接在 TouchBar 上点击前进、后退

多光标

(选中后)Ctrl+D 同时选中下一段相同文字进行编辑

  • 多次Ctrl+D可以继续向下选中
  • 点击其他位置可以解除多选

OPT+单击可以用鼠标选中多个光标位置同时编辑

重构

Ctrl+F2 重命名所有 symbol

导入、导入配置