标签 vscode使用 下的文章

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”,它们分别是干什么的呢?

- 阅读剩余部分 -

VSCode 任务配置参数及任务结果分析,任务系统的知识体系相对复杂,今天继续介绍任务系统的内容:任务配置的更多参数以及任务结果的分析功能。Command相关属性和特殊处理在自定义的任务里可以使用 command 属性,并在这个属性里指定我们想要运行的脚本或者程序。但是有的时候我们运行这个脚本的时候需要传入一些参数,这时候就可以简单地把这些参数全部写在 command 里,比如说在运行 echo ‘Hello World’ 这样的脚本时,我们可以把它直接放入 command 这个属性的值中:

- 阅读剩余部分 -

VSCode 命令面板,命令面板,我们在之前的学习过程中已经多次使用了。命令面板是一个非常特殊的 UI 组件,假如说你从来没有用过 VS Code 或者 Sublime 之类的编辑器,第一次打开 VS Code 后,你可以无障碍地使用资源管理器、搜索等组件,因为它们是直接可见的。但是没有任何提示的话,你可能很长时间都不会发现命令面板。虽然它的可发现性(discoverability)不太好,但也是 VS Code 最重要的组件之一。在我看来,它是一个基于文本的交互界面。怎么理解这句话呢?你可以先通过快捷键 F1 或者 Cmd + Shift + P 打开命令面板,打开之后,命令面板的输入框里已经有一个字符:>(大于号) 。

- 阅读剩余部分 -

VSCode面包屑,叫做 Breadcrumb,翻译过来就是面包屑导航,主要是展示目前的代码在整个工程里的路径,同时你还能够看出这个代码所在位置的结构层级并且可以快速跳转。这个功能相信你在浏览文档类的网站时经常能看到,而在 VS Code 中你能够看到则是当前的光标、在哪个符号或者函数里,然后是哪个文件中、在哪个文件夹下,等等。不过,VS Code 在最近几个月才添加了面包屑这个功能,并且默认是关闭的。要打开这个功能,我们需要“打开设置”(Open Settings),搜索 “breadcrumbs.enabled”,找到后将它打开。

- 阅读剩余部分 -

VSCode 横向编辑器组和纵向编辑器组,VS Code 的编辑器的组织方式,还是相对比较常见的,没有什么特别难的地方,相信你可以轻松使用。不过,要提到编辑器相关的操作,这个就比较复杂了。下面我们来看看横向编辑器组和纵向编辑器组。横向编辑器组编辑器的管理方式,可以说是 VS Code 一直在变化的部分。最开始的时候,VS Code 并不支持 Tab,同时你最多只能在工作区横向创建三个编辑器,比如下图:

- 阅读剩余部分 -