工具帝 发布的文章

VSCode 支持Markdown,我们再来看看另一个 VS Code 支持的非常好的语言——Markdown。Markdown 在近些年已经成为了主流的文档书写语言,比如GitHub 上的项目 readme 默认就是 Markdown,微软在13年也把 MSDN 的文档从 XML 逐步地转为 Markdown 了。你在 VS Code 中书写 Markdown 的时候,VS Code 会提供语法高亮。VS Code 的定位是一个文本编辑器,而不是富文本编辑器,所以你并不能像一些 Markdown 编辑器一样,获得所见即所得的体验。但是 VS Code 提供了一个 Markdown 预览的效果。VSCode Markdown的支持 侧边预览当你在编辑器中打开一个 Markdown 文件后,你可以通过命令面板执行 “Markdown: 打开侧边预览”(Markdown:Open Preview to the Side)来打开预览窗口。

- 阅读剩余部分 -

VSCode 支持JSON,JSON 文件你肯定已经非常熟悉了,VS Code 的配置文件、任务系统、代码片段等都是使用的 JSON 语法。比如下面的这段调试配置:{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "启动程序", "program": "${workspaceFolder}/index.js", } ] }JSON

- 阅读剩余部分 -

VSCode 快捷键绑定,虽然一直都是介绍使用图形化的快捷键修改界面,但是 VS Code 快捷键修改,在最开始的时候,跟编辑器设置界面是一样的,也是基于文本编辑器的。你可以在快捷键界面的搜索框下,看到一行提示“高级自定义请打开和编辑器 keybindings.json”。你不妨点击这个链接,效果如下图:3859828021.png快捷键绑定文本界面如果你要搜索某个命令或者快捷键,可以在左侧编辑器唤出搜索框;而添加快捷键,则是使用右下角的 “定义按键绑定” 按钮。微信截图_20230906152157.png你是不是会觉得,虽然我们更好地理解了快捷键设置都是绑定在 keybindings.json 这个文件里的,格式也是 JSON,但是好像这个文本编辑器完全比不上图形化的界面啊?

- 阅读剩余部分 -

VSCode 设置,VS Code 是以文件和文件夹为核心的,用户的设置、快捷键绑定等,也都是以文件的形式存储在用户的机器上。同时,VS Code 把这一切都开放给用户,也就是说你可以直接对这些文件进行修改。相信你已经尝试过了修改代码片段(Code Snippet)配置、修改快捷键绑定以及修改个人设置等操作。不过还有些操作我还没有做过介绍。设置的文本界面VS Code 的最新稳定版里,有两个不同的设置编辑器。下面,让我们先打开命令面板,搜索 “打开设置(JSON)”[Open Settings(JSON)],然后执行。此时,我们能看到并排的两个编辑器。

- 阅读剩余部分 -

VSCode 编辑器缩放,缩放功能也是我在日常工作中经常使用的。比如我自己配置的字体比较小,而当需要给其他同事展示代码的时候,就往往需要把字体调大以便于更好地展示,这时候我就会按下Cmd +/-(Windows 上是 Ctrl +/-)来缩放整个工作区。而如果我希望一键将缩放调整为默认设置,就可以执行命令 “重置缩放”(reset zoom)。

- 阅读剩余部分 -

VSCode 编辑器专注模式,我们在工作的时候,有时候希望更专注于代码编辑器,而不希望被 VS Code 的其他组件,比如视图或者面板所打扰。或者我们在比较小的屏幕上工作,比如说笔记本,有时候也有类似的需求,视图和面板等都太占屏幕面积了。对于这样的需求,VS Code 有几个非常实用的快捷键。首先,我们可以按下 Cmd + B (Windows 上是 Ctrl + B)打开或者关闭整个视图;也可以按下 Cmd + J (Windows 上是 Ctrl + J)来打开或者关闭面板。

- 阅读剩余部分 -

VS Code 资源管理器,当你打开一个文件夹之后,你就能在工作台的最左侧看到资源管理器。资源管理器将当前文件夹下的文件和子文件夹,以树形结构的形式呈现出来。每一个文件的前面还会有一个小图标,用于反映文件的类型。在这个列表里,你既可以使用鼠标来打开文件,展开文件夹,也可以通过鼠标右键来唤出上下文菜单,对文件或者文件夹进行重命名、删除等操作。另外,资源管理器还支持鼠标进行多文件选择和拖转(drag & drop)。相信这已经是大家都非常熟悉的一种设计语言,这里我就不多加赘述。在资源管理器的最上方,你可以看到一个列表,叫做 “打开的编辑器”。这个很好理解,就是指这里面列出的都是当前已经被打开的文件。

- 阅读剩余部分 -

VSCode 终端设置,我们一起看一下如何设置集成终端,让它能够符合我们平时的终端使用习惯。在终端里使用什么样的 Shell默认情况下,在 Windows 10 上我们会使用 PowerShell,而如果是 Win 10 以下的版本那么默认的 Shell 则会是 Cmd。macOS 和 Linux 下 VS Code 会检测你的默认 Shell 是什么,比如在我的系统上,我就是使用 Zsh,而如果没有找到的话,终端则会使用 Bash 或者 sh 作为启动时的 Shell 环境。如果 VS Code 挑选的 Shell 不是你想要的,那么你可以修改 terminal.integrated.shell.windows、terminal.integrated.shell.osx 或者 terminal.integrated.shell.linux,这个设置的值就是你想要使用的 Shell 在系统上的路径。集成终端在创建时给 Shell 脚本传入参数

- 阅读剩余部分 -

VSCode 终端面板里文件跳转,我们可以从集成终端中非常轻松地打开一个文件。我们经常在终端中运行测试脚本,在某些测试失败后,我们能够从错误警告中得到,某一个文件的某行代码有问题。这个时候,如果我们按下 Cmd 键,然后把鼠标移动到这个文件名的上面,我们就能看到这个文件名下出现了一个下划线,这说明集成终端成功检测出了这个文件的位置,此时只需按下鼠标左键就能将这个文件在当前编辑器中打开。在上面的动图中,我通过“Cmd + 鼠标左键”,将“./index.js”在编辑器中打开了。

- 阅读剩余部分 -

VSCode 终端内操作,接下来,我们再一起了解一下集成终端里的快捷键操作。我们能够在终端里使用 Shell 自身支持的那些快捷键操作。比如在 Bash 里,我们可以按下 Ctrl + A 或者 Home 键把光标移动到一行的开头,也可以按下 Option + 左方向键 (Windows 上是 Alt + 左方向键)把光标向前移动一个单词;如果我们在集成终端里使用的也是 Bash,那么这些操作依然生效。但同时,VS Code 也为几个常用的操作提供了接近于编辑器命令的快捷键。比如,我们知道在编辑器里,按下 Cmd + 左右方向键 能够把光标移动到这行的开头或者结尾,其实我们也可以在集成终端里这么做。再比如,在编辑器里可以使用“Cmd + C”“Cmd + V”来复制粘贴,同样,在集成终端里也可以完成一样的操作。

- 阅读剩余部分 -