工具帝 发布的文章

VSCode 怎么运行代码,集成终端和资源管理器也有互动。比如我们打开了一个脚本文件,希望直接执行这个脚本文件,就可以打开命令面板,运行 “在活动终端中运行活动文件”(Run Active File In Active Terminal),这样这个脚本就会在当前打开的集成终端中运行了。我们也可以选中编辑器中的某段代码,然后打开命令面板,运行“在活动终端中运行所选文本”(Run Selected Text In Active Terminal),这段代码就会在终端中执行。

- 阅读剩余部分 -

VSCode 渲染出空格符和制表符,这里我们可以先一起来玩一个“大家来找茬”的游戏:图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件图2是使用经过了不少的个性化定制的编辑器打开的同一个文件在图2中你能够在不少代码行前面看到灰色的“点”,这每一个“点”都代表着一个空格符。你可以通过设置 editor.renderWhitespace: all 让编辑器将所有的空格符、制表符等全部都渲染出来。这样你就能够一眼看出这个文件中使用的究竟是制表符还是空格符,以及有没有在哪里不小心多打了一个空格等。

- 阅读剩余部分 -

VSCode 行号背景,这里我们可以先一起来玩一个“大家来找茬”的游戏:图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件图2是使用经过了不少的个性化定制的编辑器打开的同一个文件在图 1 中,第五行的代码下有一个绿色的背景色。通过这样一个背景色的改变,你能够清楚地看到哪一行代码是当前光标所在的位置。

- 阅读剩余部分 -

VSCode小地图,细心的你可能已经发现了,在之前所有的截图里,我都把小地图关掉了(在查看菜单栏中可以打开或关闭小地图)。这是因为图片小,而小地图又比较占地方。但是如果你是在一个比较大的屏幕上工作,需要快速了解整个文件的全貌,并且还能靠鼠标快速地移动,那么这时小地图就很有用了。这个功能默认是打开的,所以你无需特别设置。这个使用起来比较简单,你可以像我在图中展示的那样试着打开一个较大的文件,感受一下它的妙处。很多游戏中也有类似的小地图功能,不知道你有没有似曾相识的感觉。除了控制小地图是否打开,编辑器还为我们提供了几个渲染的配置项。比如说,默认情况下,小地图会将每个字符都渲染出来。但是我们并不能真正地通过小地图来看代码,我们只是要看个大概结构罢了,那么我们可以打开命令面板,搜索“打开设置”(Open Settings),进入设置界面后,搜索 “editor.minimap.renderCharacters” ,找到后将其关闭,这样一来,所有的字符,都会被渲染成一个个小色块。

- 阅读剩余部分 -

VSCode 显示相对行号和隐藏行号,这里我们可以先一起来玩一个“大家来找茬”的游戏:图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件图2是使用经过了不少的个性化定制的编辑器打开的同一个文件编辑器最左侧的行号。在图1中,行号代表的是每一行代码所处的位置,也就是在当前文件中处于第几行,是绝对行数。而在图2中,行号则显示的是每一行代码相对于当前光标所在位置的行的距离,是相对行数。经常使用 Vim 的用户一定非常熟悉这个功能。

- 阅读剩余部分 -

VSCode 缩进参考线和垂直标尺,这里我们可以先一起来玩一个“大家来找茬”的游戏:图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件图2是使用经过了不少的个性化定制的编辑器打开的同一个文件在图1中,第二行到第六行代码的中间,从内到外你能够依次看到两个竖线。这两个竖线就是缩进参考线。编辑器会根据你指定的制表符的长度,来决定缩进参考线的位置。这样你就可以非常清楚地知道代码有没有正确地缩进,而且也方便你区分出不同代码块之间的层级关系。这个功能是可以通过 editor.renderIndentGuides 来控制开关的。

- 阅读剩余部分 -

VSCode 如何使用自动任务检测,任务系统的目的,是将各种形形色色的任务脚本尽可能地统一化,然后提供一套简单但又定制化强的方式操作它们。这里举个我自己的例子。比如,我在使用 git 进行版本管理,当我在终端里要创建一个的新的分支时,得输入 git checkout -b branchName,但是要每次都打全这个命令太麻烦了,于是我自己创建了一个 bash 的别名(alias)gco 用来替代 git checkout -b。而 VS Code 的版本管理更近了一步,它在状态栏上添加了一个按钮,我只需点击一下状态栏,就可以创建分支了。任务系统也希望提供一样的效果,比如把我们日常使用的脚本命令,通过命令面板或者快捷键迅速执行,并且还可以将这一套快捷操作的方式,分享给工作在同一个项目上的同事。

- 阅读剩余部分 -

VS Code是如何管理文件和文件夹,首先需要说明的是,VS Code 的各个功能,都是基于当前打开的文件或者文件夹的。该怎么去理解这个概念呢?如果你使用过 IDE 的话, 你应该记得在第一次打开 IDE 的时候,它们往往需要你创建一个工程,这个工程会生成一个特殊的工程文件。这个工程文件记载了这个项目有哪些相关的文件、项目的配置、构建脚本等等。这个文件记录着 IDE 管理工程的元信息,开发团队也能够通过共享这个工程文件保证成员工作环境的一致性。但是工程文件对用户体验就不太友好了,比如说项目文件可能对 IDE 的版本有所要求,项目文件损坏了 IDE 读取不了但是我们也不知道如何修复,等等。

- 阅读剩余部分 -

VSCode 如何创建自定义的任务,学习完本文你可以掌握如何在VSCode中创建自定义的任务,首先我们在命令面板里,搜索 “配置任务”(Configure Task)并执行。我们能够看到一个下拉框,这里面提供了多个不同的选项。如果我们选择第一个,也就是npm: install这一项的话,VS Code 会立刻在 .vscode文件夹下创建一个 tasks.json 文件,它的格式是 JSON,可读性很好且易于修改。

- 阅读剩余部分 -

VSCode 任务系统配置 – 分组和结果显示,来学习一下任务系统配置里的其他属性。在下面的任务里,我们能够看到 “label”“type”“command” 这几个熟悉的属性,它们的意思是,在 shell 下运行 ./scripts/test.sh 这个脚本。不过又多了三个属性 “group” “presentation” 和 “options”,它们分别是干什么的呢?

- 阅读剩余部分 -