使用VS Code作为主力的开发工具已经很久了,平时自己常用的功能已经很熟悉。虽然VS Code的更新挺频繁的,但是我也没有过多关注。偶然一次阅读更新日志,发现除了一些很明显、一看到就会用的更新,也有不少没那么起眼,但是知道后会感觉提升了自己使用效率的功能。
正所谓「工欲善其事必先利其器」,下面罗列了近几年更新中我之前不知道,但发现很有用的功能。如果大家有其他使用小技巧,也欢迎补充。
April 2021 (version 1.56)
- vscode的extension支持自动更新
February 2021 (version 1.54)
- VS Code除了有很多icon theme支持修改文件的图标外,现在支持修改VS Code本身的图标了。在Extension里搜索
tag:product-icon-theme即可(目前只有几个,希望以后会有更多更酷炫的)
January 2021 (version 1.53)
- 新增设置
search.mode,修改全局搜索shift + cmd + F的效果。如果设置成newEditor,每次搜索都会打开一个新的search editor
November 2020 (version 1.52)
- 新增设置
explorer.openEditors.sortOrder,可以给open editors面板里的文件排序。如果有很多重名的例如Hello.tsx,Hello.less,按字母顺序排序就会很有用。
October 2020 (version 1.51)
- VS Code的IntelliSense(代码提示,按cmd + I可以手动调用)可以调整大小
- 新增设置
editor.suggest.showStatusBar,suggestion对话框也会显示一个小的状态栏,里面包含一些操作提示
September 2020 (version 1.50)
- 新增插件vscode-js-profile-flame,可以在debug javascript的时候实时显示一些如CPU使用情况之类跟performance相关的指标
August 2020 (version 1.49)
- 新增命令
Format Modified Lines,只format修改的代码,避免造成大量因为format而导致的diff,特别是在已有的项目里
July 2020 (version 1.48)
- Extensions面板上面的小漏斗标志可以进行filter(不怎么用,一直没注意到)
May 2020 (version 1.46)
- 右键某个打开的tab可以pin,被pin的tab不会被
Close other tabs之类的命令关闭
March 2020 (version 1.44)
- 想要同时显示terminal以及problem面板?只要把problem面板拖到terminal面板就可以了(我自己使用的时候发现如果多次拖动,每个面板的行为就变得有点奇怪,有些会被放到...里面。暂时没理解它的逻辑是什么,反正右键reset location可以恢复)
- VS Code里的多数面板都支持拖动,你可以将terminal之类的面板拖动到侧边栏或者Explorer里,反之亦然。如果排版出现了混乱,都可以右键reset location恢复。
February 2020 (version 1.43)
- 在search view里新增了search editor!点击
Open in editor打开,可以更好得显示搜索结果。可以通过设置search.searchEditor.doubleClickBehaviour改变双击某个搜索结果的效果,默认是跳转到那个文件(我改成了在边上打开另一个editor显示) - 新增设置
editor.minimap.size,调整minimap的高度 - 新增命令
Toggle Column Selection Mode,开启后可以直接进行column selection,不需要配合其他按键 - 新增设置
editor.scrollPredominantAxis,打开时,editor只能水平或者垂直滚动。之前用触摸板时会出现同时上下以及左右滚动的情况 - refactor新增
Convert to template string,可以直接把拼接的字符串转成template string
January 2020 (version 1.42)
- 在rename的时候,按
shift + Enter打开refactor preview,会显示rename的所有结果,你还可以单独修改每个rename - 新增命令
View: Show All Editors By Most Recently Used,显示最近使用过的editor
October 2019 (version 1.40)
- 新增设置
editor.minimap.scale,控制minimap的大小 - Explorer里可以选中多个文件然后
Compare Selected查看diff。也可以右键单个文件Select for Compare,然后再右键另一个文件选择Compare with Selected - 新增设置
problems.showCurrentInStatus,在状态栏里显示当前行的问题。这样就不许要其他快捷键或者鼠标hover了
September 2019 (version 1.39)
- 新增Toggle Fold (⌘K ⌘L)命令,可以折叠当前段落
- 新增设置,让你可以控制哪些symbol会显示在outline面板里。比如
outline.showVariables,outline.showFunctions
August 2019 (version 1.38)
- Hover over CSS或者HTML元素时,提示里会带有MDN的链接, 方便你直接跳转到MDN
July 2019 (version 1.37)
- 搜索替换时,点击输入框边上的AB,可以在替换的时候保持被替换文字的大小写
June 2019 (version 1.36)
- 状态栏里的每个子项目都是可以通过右键单独隐藏的
March 2019 (version 1.33)
- 在refactor里新增Convert to named parameters选项,可以快速将typescript的函数改成named parameter形式
February 2019 (version 1.32)
- Ctrl+L (Cmd+L on macOS)可以快速选中一行。多次按的话会选中之后的行。
January 2019 (version 1.31)
workbench.tree.indent设置可以修改侧边栏tree view的缩进- 按住alt可以快速scroll,默认是5倍。可以通过Fast Scroll Sensitivity设置修改
- 新增Developer: Toggle Screencast Mode命令。在Screencast模式下,所有按键会显示出来。很适合做一些demo
November 2018 (version 1.30)
- 多行搜索不再需要regex!在搜索框里
shift + enter可以直接换行
October 2018 (version 1.29)
- 搜索时可以使用
\n进行多行搜索 - 新增设置
search.useGlobalIgnoreFiles,搜索的时候就不会包含.gitignore里的文件 - 在macOS里,terminal里使用
cmd + backspace可以删除一整行(相当于ctrl + U)
July 2018 (version 1.26)
- 新增
View > Show Breadcrumbs命令,可以在编辑器的上方显示一个文件路径的breadcrumb。快捷键⇧⌘;和⇧⌘.可以用来跟breadcrumb交互
May 2018 (version 1.24)
- 在Search View里,通过
Alt+Up或者Alt+Down来查看之前的搜索内容
April 2018 (version 1.23)
- 新增
editor.codeActionsOnSave设置,可以在保存文件时跑一些指令,比如给import排序之类 - 按住
Shift和Alt,可以用鼠标左键进行column的选中 - 通过
Developer: Open Process Explorer命令查看vscode的进程信息
March 2018 (version 1.22)
F8跳转到下一个有问题的地方- 在explorer里可以直接以
a/b/c/d的形式创建子目录 - 在macOS里,可以通过
cmd+up和cmd+down快速在terminal里跳转到之前或者之后的命令。windows系统可以通过设置workbench.action.terminal.scrollToNextCommand之类配置快捷键 - 在debug里新增了
Logpoint。类似breakpoint,区别是不会中断程序的进行,而是可以输出一个text。
January 2018 (version 1.20)
- 新增
Select to Bracket命令(现在好像叫Expand Bracket Selection),可以选中当前括号中的所有内容。 - 新增
terminal.integrated.copyOnSelection设置。打开后,选中terminal里的内容后会自动copy。
November 2017 (version 1.19)
- 实验性质的插件process view让你可以看到vscode中所有process的情况
- 可以直接将命令行的输出pipe到vscode,例如
px ax | grep code | code - Compare Active File with Clipboard命令可以比较当前文件和剪切板内容!Shift + click折叠图标可以一次性折叠所有子节点。
September 2017 (version 1.17)
- 使用//#region和//#endregion这样的region markers来手动添加代码折叠
August 2017 (version 1.16)
- Javascript和Typescript支持右键refactoring,可以方便得把复杂的代码提取到函数
- 启动一些复杂debugging task的例子vscode-recipes
July 2017 (version 1.15)
explorer.sortOrder可以改变explorer里文件的排序- 原来可以在markdown里画很棒的流程图。Mermaid
- 可以将多个文件夹添加到explorer,成为一个workspace。
May 2017 (version 1.13)
- 可以通过
Ctrl / Cmd + Click来添加多个cursor。再次点击可以取消。editor.multiCursorModifier可以修改使用的modifier。我自己是用的option + click
April 2017 (version 1.12)
- 命令
Generate Color Theme From Current Settings以及vscode-theme-generator, 让自定主题变得简单。 - 新增
window.nativeTabs,在macOS上可以通过tab打开多个窗口。Make sure to show the tab bar (View > Show Tab Bar) to access tabs.
March 2017 (version 1.11)
- 新增
Join Editor Groups,快速合并多个editor group - 新增
Increase current view size和Decrease current view size命令,告别鼠标
February 2017 (version 1.10)
- 通过
editor.wordWrap控制是否换行,默认为off - 可以通过class或者id快速跳转到html中的node。Press ⇧⌘O to bring up the symbol in file.
- 可以在column中添加breakpoint。A column breakpoint can be set using ⇧F9 or via the context menu during a debug session.