VSCode使用笔记

VSCode 使用笔记

Mac安装VSCode

VSCode 官网下载 Mac 版本（支持 M1 芯片），下载下来是一个 zip 包，解压后出现带图标的 Visual Studio Code.app 文件，拖入 Mac 的 “应用程序” 即安装完毕，其实是放入了 /Applications 目录中，命令行中也能看到。

之后 VSCode 会自动下载更新版本，重启更新即可。

VSCode 版本

列出一些个人比较喜欢的 VSCode 新特性。

2022年6月(version 1.69)

Command Center 命令中心，在顶部标题栏中心显示一个随时可用的输入框，可以搜索文件、输入命令(CMD+Shift+P)
Minimap 缩略图，之前 Atom 中一直在用，VSCode 从 version 1.10 开始支持缩略图，这次看到有更新才知道。
Git 边栏增加了一个大大的 Commit 按钮，方便提交。

2023年11月(version 1.85)

浮动窗口，可直接将单个tab拖出来成为独立窗口

VSCode系统配置

user配置和workspace配置

https://code.visualstudio.com/docs/getstarted/settings
CMD+, 打开配置界面，可以看到有 user 配置和 workspace 配置，这是 VSCode 提供的两种配置范围：

user 配置会全局化的应用到所有打开的 VSCode 实例
workspace 配置存储在当前项目中（会自动创建一个 .vscode/settings.json 文件），且只作用于当前项目。

workspace 设置会覆盖 user 设置。

比如我使用暗色的 Solarized Dark 主题，但存储 draw.io 流程图的 Git 项目想要使用亮色主题在 vscode 中打开（暗色主题下打开流程图背景也是暗色的），就可以在 draw.io 项目的 workbench 配置中修改亮色主题，以后 vscode 打开这个项目时就会自动启用针对这个项目的配置。

JSON配置模式

CMD+, 打开设置界面，搜索 workbench.settings.editor 默认配置项是 ui 表示通过界面配置，选为 json 再次 CMD+, 进入配置就是 json 配置形式了。
其实 vscode 的配置都是存储在名为 settings.json 的 json 文件中的，ui 模式只是提供了一种界面化修改 settings.json 的方式。
有一些隐藏的高级配置项，只能通过修改 settings.json 来配置。

修改系统语言

单击左下角，选择“命令面板”，在搜索框中输入language，选择 Config Display Language/配置显示语言这一项，选择中文 zh-cn 或英文 en，之后重启即可
或者 CMD+Shift+P 打开搜索框，搜索 language 或语言，选择 Config Display Language/配置显示语言，配置即可。

开启配置同步(GitHub/微软)

点左下角配置，配置 setting sync 可以选择微软账户或 GitHub 账户，跳转到浏览器登录，之后会自动跳转到 VSCode, 然后提示下载个插件，自动同步就开启了。
可以配置同步哪些配置、插件，忽略哪些等等，每个配置项前都有个“是否同步”的开关。
还能查看同步了哪些配置项（左下角配置 - Settings Sync is ON -> Settings Sync: Show Synced Data），这个配置同步真的太强大、太方便了。

VSCode界面配置

SidePanel+Outline实现右侧大纲目录

2022 年 1 月 1.64 版本更新后，新增 Side Panel 视图，直接将 outline 拖到右侧即可
从更新描述中的这段可以看出，这个 Side Panel 几乎就是为了实现将 outline 从 sidebar 分离而做的，很不错。
https://code.visualstudio.com/updates/v1_64#_new-side-panel

Based on one of our most upvoted feature requests, you might want to move Outline view from the Side Bar to the Side Panel. You can do this by dragging and dropping the view into the Side Panel. If the Side Panel is not open, just like the bottom Panel, dragging a view to the edge of the editor area, will pop it open.

在有 Side Panel 之前，Outline 窗口是默认吸附在左侧的 Side Bar 上的，在 Side Bar 上右键单击，选择 Move Side Bar Right 可将左侧 Side Bar 移到窗口右侧，但这是整个 Side Bar 移动，无法实现单独将 Outline 窗口移动到任意位置。或者可以将 Outline 窗口吸附到默认在底部的 Terminal 栏，然后将 Terminal 移到右侧，但总是不够完美，无法实现我使用 Atom 时最理想的布局： 左侧文件目录树(Explorer)，右侧文件大纲(Outline)，下方控制台(Terminal)

2022 年 3 月 v1.66 版本更新中，将 Side Panel 进行了重命名：
Side Bar -> Primary Side Bar 原来的 Side Bar 改名为 Primary Side Bar
Side Panel -> Secondary Side Bar 2022 年 1 月 1.64 版本引入的 Side Panel 改名为 Secondary Side Bar
https://code.visualstudio.com/updates/v1_66#_new-names-for-side-panel-and-side-bar

outline去掉icon图标

json 配置中添加：

"outline.icons": false

outline 的展开与折叠

当代码结构变化导致 outline 变化时，outline 会全部折叠，之前经常把 outline 全部展开了，不知道为啥又自动折叠了就是这个原因。
如果 outline 结构没变化，再次打开同一篇文档时 outline 会保持之前的展开项不变。

markdown outline去掉`#`

通过配置无法去掉，但可以修改 vscode 代码实现，见下面这个 issue
Outline view + Markdown: Do not display the “#”s
https://github.com/microsoft/vscode/issues/53992

显示垂直标尺

设置中搜索 editor.rulers 能跳转到 json 配置，添加如下值，配置在 80 字符宽度处显示一个垂直标尺（可配置多个）

"editor.rulers": [80]

Atom 中默认是有垂直标尺的，打开看着习惯。

显示/关闭小地图

默认编辑器右侧有小地图， CMD+, 打开设置 Text Editor -> Minimap -> 勾选/去掉勾选 Enabled 开关

编辑

查找换行或替换为换行

CMD + F，打开查找，选中 正则匹配模式，搜索 \n 可查找换行
CMD + Alt + F 替换时，输入 \n 可将指定字符替换为换行（前提也需要勾选正则匹配模式）

开启自动保存

CMD+, 打开配置界面，User 配置中修改 Text Editor -> Files -> Auto Save 改为 afterDelay, 下面的 Auto Save Delay 配置多少毫秒自动保存一次，默认 1 秒自动保存一次。

IntelliSense 智能补全

https://code.visualstudio.com/docs/editor/intellisense

VSCode 关闭反引号自动闭合

CMD+, 打开设置，搜索 closing，Text Editor 中 Editor: Auto Closing Quotes 设为 never

拖动插入图片到Markdown

按住 Shift 拖动图片到 Markdown 内，放开后自动成为 Markdown 图片语法 ![图片](path-to-image)

Ctrl+J 多行合并为一行

CMD + Enter 当前行下方插入一行

在当前行下插入新的一行
CMD + Enter
Ctrl + Enter

CMD + Delete 删除当前行光标前内容

Opt + Delete 删除当前单词光标前内容

Ctrl+Shift+Right 递进式选中(Expand Selection)

递进式选中 Expand Selection
Mac：Ctrl+Shift+Right
Win：Ctrl + W

搜索和替换

CMD + D 选中下一个匹配

按一次 CMD+D 是选中当前光标下的单词
再按一次是选中当前单词的下一个位置，以此类推
选中多个后，可以整体替换。

CMD + Shift + L 在搜索结果处插入多个光标

光标快速移动

Opt + 左/右在单词间移动光标

Alt/Opt + 左/右方向键，在单词间移动光标

CMD + 左/右行首行尾

CMD + 左/右方向键，移动光标到行首/尾

CMD + 上/下文档开头结尾

CMD + 上/下方向键，移动到文档第一行、最后一行

CMD + Shift + \ 括号匹配移动

CMD + Shift + \，括号匹配移动光标

VSCode神技-让双手不离键盘
https://juejin.cn/post/6844904119224926216

列编辑

Alt + 左键插入多光标

Opt + 鼠标左键，插入多光标

VSCode 批量将多行搜索结果前的内容删除

1、CMD + F 搜索字符串
2、CMD + Shift + L 可在搜索结果末尾插入多个光标
3、关闭搜索框，这一步是为了让编辑焦点离开搜索框，进入文本上
4、此时按 CMD + Delete 可批量删除多行光标前的内容

Alt + Shift + 左键列块选中

Opt + Shift + 鼠标左键在多行多次点击，选中多行之间的块。

Opt + Shift + 鼠标左键在多行开头拖动，可实现在多行开头插入光标

Alt + Shift + I 选中的每行末尾插入光标

Alt + Shift + I 选中的每行末尾插入光标
或者
在多行末尾插入光标：按住 Opt + Shift，鼠标拖拉选中多行，则每行末尾都会有个光标

VSCode 实现多行转一行保留空格

方法1
全选，Alt + Shift + I 在选中的每行末尾插入光标，输入 \n 换行符，按方向键“右”把光标移到下一行开头，按回车，合并为一行。
实现：换行替换为 \n，合并为一行，保留了空格。

方法2
Opt + Shift + 鼠标左键在多行开头拖动，在多行开头插入光标，按退格键，可合并为一行，同时保留空格

CMD + Shift + L 编辑选中相同内容

先选中一段文本，然后按 CMD + Shift + L 会同时选中文档中的相同内容，并将光标定位到选中内容末尾，之后就可以批量编辑。

其他功能

文件对比(diff)

1、VSCode 打开要对比的文件所在的目录
2、选中第一个文件，右键 Select for Compare，再选中第二个文件，右键 Compare with Selected 即可打开对比视图。
3、或者也可以按住 CMD 选中多个文件，右键 Compare Selected 也可以打开对比视图

快捷键

vscode mac 快捷键官方文档
vscode 里 F1/命令面板 -> 搜索 shortcuts 选择 Help: Keyboard Shortcuts Reference 也可以打开这个文档
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Alt+Z 打开/关闭自动换行

Toggle word wrap
或者菜单栏 - View - Word Wrap
或者 Settings - 搜 word wrap

CMD+Shift+F 全局搜索

和 IDEA 快捷键相同
CMD+Shift+F 会打开搜索视图，默认在编辑器左侧边栏，单击搜索框左边的下箭头会出现全局替换框

CMD+Shift+P/F1 命令面板

Command Palette 命令面板是 vscode 中非常强大易用的功能，直接 CMD+Shift+P 切换出命令面板后，几乎可以做任何动作，非常强大。

CMD+J 显示/隐藏控制台(Panel)

控制台位于 Panel 中，默认在底部。

CMD+K CMD+T 主题列表

先 CMD+K 再 CMD+T 可查看已安装的主题列表，系统还按浅色、深色给做了分类，而且上下键切换后直接就实时预览，很强大。
2021.11 版本更新后，CMD+K CMD+T 后选择 Browse Additional Color Themes 可浏览在线主题，而且上下线切换后可直接预览在线主题。
目前在用自带的 Solarized Dark 主题

CMD+K+V 双列预览markdown

CMD+Shift+V 新页面预览markdown

CMD+Shift+T 重新打开已关闭的标签页

vscode 和 chrome 中都有这个快捷键

CMD+Shift+L 选中全部单词后加光标

选中单词，按 CMD+Shift+L 选择文档中与当前所选的单词相同的所有单词，并在所有这些单词后加一个光标

F3 下一个光标下单词

在一个单词上按 F3 会直接打开搜索框，并跳到下一个单词上

Shift+F3 上一个光标下单词

Ctrl+- 跳到上一个位置

CMD+Shift+P 命令面板，搜索前进 / Go Forward 或后退 / Go Back

Ctrl+Shift+- 跳到下一个位置

自定义快捷键

CMD+K CMD+S 打开 keyboard shortcuts 设置（或 Code -> Preferences -> Keyboard Shortcuts 打开，或左下角 Manage -> Keyboard Shortcuts），搜索想设置的内容
点击搜索栏 “Record Keys” 记录快捷键，然后可直接在搜索框按快捷键搜索，比如查看 cmd k 查看是否被占用。
开启配置同步后，所有自定义的快捷键都会被同步，不用担心自定义配置丢失。

CMD+1 左/主侧边栏

问题：
VSCode 默认的快捷键 CMD+B 显示/隐藏侧边栏和 markdown 中加粗的快捷键冲突

解决：
CMD+B 在 Markdown 编辑中是很通用的快捷键，不要删除 Markdown 快捷键，将侧边栏快捷键改为 CMD+1，和 IDEA 相同。

操作：
Keyboard Shortcuts 打开快捷键设置，点击搜索栏 “Record Keys” 记录快捷键，然后可直接在搜索框按快捷键搜索，搜索 CMD+B
可以看到有两个命令的快捷键都是 CMD+B，一个是系统操作 View: Toggle Primary Side Bar Visibility 即侧边栏开关，另一个是 Markdown 扩展的加粗快捷键
修改侧边栏开关快捷键为 CMD+1，会提示 CMD+1 已经绑定了命令 View: Focus First Editor Group，这个很少用，强制强 CMD+1 改为侧边栏快捷键。

CMD+2 右/副侧边栏

Keyboard Shortcuts -> 搜索 Toggle Secondary Side Bar，修改快捷键为 CMD+2
提示已有编辑器分栏快捷键占用了 CMD+2，忽略，强制将 Toggle Secondary Side Bar 快捷键设为 CMD+2

问题

VIM 模式下左右箭头无法换行

VIM 模式下 i 进入插入模式后，假如当前在一行的末尾，按 -> 右箭头无法将光标移动到下一行开头，同样 <- 左箭头也无法跨行移动。

VSCode 插件安装失败

VS code fails to download updates for extensions
https://github.com/microsoft/vscode/issues/87881

解决：
将 1.1.1.1 加入 dns
https://1.1.1.1/dns/

插件

Vim(必备)

在 Atom 中一直用 Vim 编辑，不开 vim 码字很难受，首先安装 Vim 编辑器。

Git Blame(在用)

状态栏展示某行代码是谁在什么时间提交的
修改配置项 Status Bar Message Format
默认值是 Blame ${author.name} ( ${time.ago} )，状态栏展示结果为 Blame masikkk (4 months ago)
改为 此行作者 ${author.name} ${author.date} ，状态栏展示结果为 此行作者 masikkk 2022-06-18
修改配置项 Info Message Format 默认值是 ${commit.summary} 改为 ${commit.summary} ${author.name} ${author.date}

Git History(在用)

查看 git 提交历史

Image preview(在用)

在 markdown 文件编辑时可直接看图片，不用打开预览模式，会在图片引用行的行号左边的侧边栏(gutter) 显示图片，鼠标悬浮到图片上也可弹出预览图。
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

Visual Studio IntelliCode

微软官方出的 Python, JS, Java 代码自动补全

vscode-pdf

在 VSCode 里打开 pdf

Markdown Preview Enhanced

导出 pdf 需要先安装 princexml ，注意是单独安装，这个不是 vscode 插件
https://www.princexml.com/download/

Draw.io Integration

在 vscode 里打开 draw.io 画的流程图，结合 draw.io/app.diagrams.net 的 GitHub 存储功能，非常方便

All Autocomplete(弃用)

万能自动补全，基于已打开的文本提示单词，感觉不够智能，只是前缀匹配，不是基于单词，经常会提示出一大段文字，很占空间，弃用。

Bracket Pair Colorizer 2(弃用，太卡)

括号颜色配对插件
v0.2.1
对于篇幅较长的文档，开启此插件后编辑会非常卡（i5 8g mac），敲每个字都要等好几秒，弃用。

2021.11.5 再次试用VSCode

想买个 2021 新款 M1 MacBook Pro, 调研软件适配问题。
平常重度依赖 Atom 文本编辑器，发现到 2021.11.5 为止无法原生支持 M1 版 Mac.
从 2010 年 Atom 的 GitHub Issue 和 Discuss 上就开始讨论 Atom 适配 M1 Mac 的问题，到 2021 年底了，还是没有明确的规划，见下面这个讨论 issue
https://github.com/atom/atom/issues/21688
对 Atom 这个适配进度有些失望，先使用 VSCode 适应下。

2021.11.22，用了两周 vscode, 已经习惯了，很强大，准备卸载 Atom.

一开始使用不习惯的地方

1、VSCode 的窗口排列没有 Atom 灵活，无法随意拖动控件到想要的位置后自动吸附，一开始很想实现 左侧文件目录树(Explorer)，右侧文件大纲(Outline)，下方控制台(Terminal) 发现实现不了，后来把目录树和大纲放一起，一个在上一个在下也能用，用了几天也习惯了。
2022 年 1 月 1.64 版本更新后，新增 Side Panel 视图，直接将 outline 拖到右侧即可
https://code.visualstudio.com/updates/v1_64#_new-side-panel

2、大纲边栏中，markdown 目录都带着 # 号，无法通过配置去掉（改代码可以），一开始看着非常别扭，很乱，习惯了几天也还行。看网上的讨论，说带着 # 号有助于帮助识别是几级标题，确实是。

3、markdown 编辑中的语法高亮一开始不习惯，虽然 VSCode 也有 Atom 中的 Markdown Preview Enhanced 插件，但平时基本不会开着预览编辑，都是直接编辑 markdown, inline 实时预览。不过用了几天也习惯了。

VSCode 相比 Atom 的优势

1、配置可通过 GitHub 或微软账号同步，多台电脑上不用重新配了。

2、使用的人多，网上有大量使用技巧、插件推荐。

3、除了用来编辑markdown，对 Java 等语言的项目支持较好，打开 Java 项目后，直接会给推荐一个扩展组合包，貌似直接就能用来跑 maven java 项目了。

4、响应速度挺快，整个编辑器感觉很轻量级，一点都不卡。

2018.9.3 首次试用VSCode

首次尝试试用 VSCode 编辑 markdown 文本
发现 Mac 上安装 VSCode 后会把所有代码文件的图标都改成了 VSCode 的图标，手动把默认打开方式改成其他应用也改不过来。然后想着把 VSCode 删掉，从 /Applications 中删掉后，图标还是没改过来，后来打开文件发现 VSCode 还在。然后试了网上各种删除 VSCode 的方法，都删不掉。

最后发现在下面这个 private 目录中还有一个app备份，只能重启来让他消失
/private/var/folders/pt/f6w__txx0bd373jw8r7y27brv9rvj9/T/AppTranslocation/5F966B3C-3B13-4E0E-B03A-828A297F1548/d/Visual\ Studio\ Code.app

重启后 VSCode 是删掉了，但图标还是改不过来。

放弃试用 VSCode

当前位置 : 首页 » 文章分类 : 开发 » VSCode使用笔记