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

- 阅读剩余部分 -

Visual Studio Code,vscode,vscode教程,vscode使用教程,vscode入门教程,vscode高级教程,vscode核心教程,vscode怎么用,vscode使用,vscode配置,vscode设置,vscode终端,vscode终端设置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 脚本传入参数

- 阅读剩余部分 -

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

- 阅读剩余部分 -

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

- 阅读剩余部分 -

Visual Studio Code,vscode,vscode教程,vscode使用教程,vscode入门教程,vscode高级教程,vscode核心教程,vscode怎么用,vscode使用,vscode配置,vscode设置,vscode运行代码,vscode怎么运行代码VSCode 怎么运行代码，集成终端和资源管理器也有互动。比如我们打开了一个脚本文件，希望直接执行这个脚本文件，就可以打开命令面板，运行 “在活动终端中运行活动文件”（Run Active File In Active Terminal），这样这个脚本就会在当前打开的集成终端中运行了。我们也可以选中编辑器中的某段代码，然后打开命令面板，运行“在活动终端中运行所选文本”（Run Selected Text In Active Terminal），这段代码就会在终端中执行。

- 阅读剩余部分 -

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

- 阅读剩余部分 -

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

- 阅读剩余部分 -

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

- 阅读剩余部分 -

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

- 阅读剩余部分 -

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

- 阅读剩余部分 -