VS Code中不怎么起眼的更新

1,537 阅读7分钟

使用VS Code作为主力的开发工具已经很久了,平时自己常用的功能已经很熟悉。虽然VS Code的更新挺频繁的,但是我也没有过多关注。偶然一次阅读更新日志,发现除了一些很明显、一看到就会用的更新,也有不少没那么起眼,但是知道后会感觉提升了自己使用效率的功能。

正所谓「工欲善其事必先利其器」,下面罗列了近几年更新中我之前不知道,但发现很有用的功能。如果大家有其他使用小技巧,也欢迎补充。

April 2021 (version 1.56)

  1. vscode的extension支持自动更新

February 2021 (version 1.54)

  1. VS Code除了有很多icon theme支持修改文件的图标外,现在支持修改VS Code本身的图标了。在Extension里搜索tag:product-icon-theme即可(目前只有几个,希望以后会有更多更酷炫的)

January 2021 (version 1.53)

  1. 新增设置search.mode,修改全局搜索shift + cmd + F的效果。如果设置成newEditor,每次搜索都会打开一个新的search editor

November 2020 (version 1.52)

  1. 新增设置explorer.openEditors.sortOrder,可以给open editors面板里的文件排序。如果有很多重名的例如Hello.tsx, Hello.less,按字母顺序排序就会很有用。

October 2020 (version 1.51)

  1. VS Code的IntelliSense(代码提示,按cmd + I可以手动调用)可以调整大小
  2. 新增设置editor.suggest.showStatusBar,suggestion对话框也会显示一个小的状态栏,里面包含一些操作提示

September 2020 (version 1.50)

  1. 新增插件vscode-js-profile-flame,可以在debug javascript的时候实时显示一些如CPU使用情况之类跟performance相关的指标

August 2020 (version 1.49)

  1. 新增命令Format Modified Lines,只format修改的代码,避免造成大量因为format而导致的diff,特别是在已有的项目里

July 2020 (version 1.48)

  1. Extensions面板上面的小漏斗标志可以进行filter(不怎么用,一直没注意到)

May 2020 (version 1.46)

  1. 右键某个打开的tab可以pin,被pin的tab不会被Close other tabs之类的命令关闭

March 2020 (version 1.44)

  1. 想要同时显示terminal以及problem面板?只要把problem面板拖到terminal面板就可以了(我自己使用的时候发现如果多次拖动,每个面板的行为就变得有点奇怪,有些会被放到...里面。暂时没理解它的逻辑是什么,反正右键reset location可以恢复)
  2. VS Code里的多数面板都支持拖动,你可以将terminal之类的面板拖动到侧边栏或者Explorer里,反之亦然。如果排版出现了混乱,都可以右键reset location恢复。

February 2020 (version 1.43)

  1. 在search view里新增了search editor!点击Open in editor打开,可以更好得显示搜索结果。可以通过设置search.searchEditor.doubleClickBehaviour改变双击某个搜索结果的效果,默认是跳转到那个文件(我改成了在边上打开另一个editor显示)
  2. 新增设置editor.minimap.size,调整minimap的高度
  3. 新增命令Toggle Column Selection Mode,开启后可以直接进行column selection,不需要配合其他按键
  4. 新增设置editor.scrollPredominantAxis,打开时,editor只能水平或者垂直滚动。之前用触摸板时会出现同时上下以及左右滚动的情况
  5. refactor新增Convert to template string,可以直接把拼接的字符串转成template string

January 2020 (version 1.42)

  1. 在rename的时候,按shift + Enter打开refactor preview,会显示rename的所有结果,你还可以单独修改每个rename
  2. 新增命令View: Show All Editors By Most Recently Used,显示最近使用过的editor

October 2019 (version 1.40)

  1. 新增设置editor.minimap.scale,控制minimap的大小
  2. Explorer里可以选中多个文件然后Compare Selected查看diff。也可以右键单个文件Select for Compare,然后再右键另一个文件选择Compare with Selected
  3. 新增设置problems.showCurrentInStatus ,在状态栏里显示当前行的问题。这样就不许要其他快捷键或者鼠标hover了

September 2019 (version 1.39)

  1. 新增Toggle Fold (⌘K ⌘L)命令,可以折叠当前段落
  2. 新增设置,让你可以控制哪些symbol会显示在outline面板里。比如outline.showVariables, outline.showFunctions

August 2019 (version 1.38)

  1. Hover over CSS或者HTML元素时,提示里会带有MDN的链接, 方便你直接跳转到MDN

July 2019 (version 1.37)

  1. 搜索替换时,点击输入框边上的AB,可以在替换的时候保持被替换文字的大小写

June 2019 (version 1.36)

  1. 状态栏里的每个子项目都是可以通过右键单独隐藏的

March 2019 (version 1.33)

  1. 在refactor里新增Convert to named parameters选项,可以快速将typescript的函数改成named parameter形式

February 2019 (version 1.32)

  1. Ctrl+L (Cmd+L on macOS)可以快速选中一行。多次按的话会选中之后的行。

January 2019 (version 1.31)

  1. workbench.tree.indent设置可以修改侧边栏tree view的缩进
  2. 按住alt可以快速scroll,默认是5倍。可以通过Fast Scroll Sensitivity设置修改
  3. 新增Developer: Toggle Screencast Mode命令。在Screencast模式下,所有按键会显示出来。很适合做一些demo

November 2018 (version 1.30)

  1. 多行搜索不再需要regex!在搜索框里shift + enter可以直接换行

October 2018 (version 1.29)

  1. 搜索时可以使用\n进行多行搜索
  2. 新增设置search.useGlobalIgnoreFiles,搜索的时候就不会包含.gitignore里的文件
  3. 在macOS里,terminal里使用cmd + backspace可以删除一整行(相当于ctrl + U)

July 2018 (version 1.26)

  1. 新增View > Show Breadcrumbs命令,可以在编辑器的上方显示一个文件路径的breadcrumb。快捷键⇧⌘;和⇧⌘.可以用来跟breadcrumb交互

May 2018 (version 1.24)

  1. 在Search View里,通过Alt+Up或者Alt+Down来查看之前的搜索内容

April 2018 (version 1.23)

  1. 新增editor.codeActionsOnSave设置,可以在保存文件时跑一些指令,比如给import排序之类
  2. 按住ShiftAlt,可以用鼠标左键进行column的选中
  3. 通过Developer: Open Process Explorer命令查看vscode的进程信息

March 2018 (version 1.22)

  1. F8跳转到下一个有问题的地方
  2. 在explorer里可以直接以a/b/c/d的形式创建子目录
  3. 在macOS里,可以通过cmd+upcmd+down快速在terminal里跳转到之前或者之后的命令。windows系统可以通过设置workbench.action.terminal.scrollToNextCommand之类配置快捷键
  4. 在debug里新增了Logpoint。类似breakpoint,区别是不会中断程序的进行,而是可以输出一个text。

January 2018 (version 1.20)

  1. 新增Select to Bracket命令(现在好像叫Expand Bracket Selection),可以选中当前括号中的所有内容。
  2. 新增terminal.integrated.copyOnSelection设置。打开后,选中terminal里的内容后会自动copy。

November 2017 (version 1.19)

  1. 实验性质的插件process view让你可以看到vscode中所有process的情况
  2. 可以直接将命令行的输出pipe到vscode,例如px ax | grep code | code -
  3. Compare Active File with Clipboard命令可以比较当前文件和剪切板内容!
  4. Shift + click折叠图标可以一次性折叠所有子节点。

September 2017 (version 1.17)

  1. 使用//#region和//#endregion这样的region markers来手动添加代码折叠

August 2017 (version 1.16)

  1. Javascript和Typescript支持右键refactoring,可以方便得把复杂的代码提取到函数
  2. 启动一些复杂debugging task的例子vscode-recipes

July 2017 (version 1.15)

  1. explorer.sortOrder可以改变explorer里文件的排序
  2. 原来可以在markdown里画很棒的流程图。Mermaid
  3. 可以将多个文件夹添加到explorer,成为一个workspace。

May 2017 (version 1.13)

  1. 可以通过Ctrl / Cmd + Click来添加多个cursor。再次点击可以取消。editor.multiCursorModifier可以修改使用的modifier。我自己是用的option + click

April 2017 (version 1.12)

  1. 命令Generate Color Theme From Current Settings 以及vscode-theme-generator, 让自定主题变得简单。
  2. 新增window.nativeTabs,在macOS上可以通过tab打开多个窗口。Make sure to show the tab bar (View > Show Tab Bar) to access tabs.

March 2017 (version 1.11)

  1. 新增Join Editor Groups,快速合并多个editor group
  2. 新增Increase current view sizeDecrease current view size命令,告别鼠标

February 2017 (version 1.10)

  1. 通过editor.wordWrap控制是否换行,默认为off
  2. 可以通过class或者id快速跳转到html中的node。Press ⇧⌘O to bring up the symbol in file.
  3. 可以在column中添加breakpoint。A column breakpoint can be set using ⇧F9 or via the context menu during a debug session.