上手 Visual Studio Code

2018-05-25 Mac Tools

简介

VS Code 是微软开发的一款编辑器，迭代速度很快，产品定位是介于 IDE 和纯编辑器（如 vim ）之间，更多八卦可收听 Teahour.fm 第 91 期：Why VS Code is better than atom ?

VS Code 安装

安装很简单，从官网下载安装包到本地正常安装即可。实在不懂就看官方教程

立马上手

打开 VS Code 后，点击右边栏倒数第一个图标或通过快捷键 Cmd + Shift + X 来进入插件搜索界面。推荐安装下面两个插件：

搜索安装 Code Runner 插件来运行主流语言的代码。安装完后，用 ⌘ + , 打开设置页面，通过「User」选项卡 -> 「Extensions」-> 「Run Code configuration」可以勾选设置「Whether to clear previous output before each run.」即是否每次运行输出前清除之前的输出内容。
搜索安装 Emacs Friendly Keymap。这样就可以使用好用的 Emacs 快捷键（光标移动，Kill 和 Yank 等操作）。

Code Runner 设置

Code Runner 安装完之后并不能马上可以运行各种代码，因为它其实是调用各种终端命令来运行代码的，也就是终端里得有这个命令。

比如要运行 JavaScript ，就要确保安装了 Node.js ，而运行 Python 则要安装 python ，以此类推：

## 通过 Homebrew 安装 Node
$ brew install node

## 或者通过 nvm 安装 Node
$ nvm install latest    # 安装并使用最新版本的 Node

$ nvm install v13.14.0  # 安装并使用 v13.14.0 版本的 Node

## 通过 Homebrew 安装 python
$ brew install python3

安装完成后，Code Runner 就会自动调用相应的命令来运行对应的文件。比如对于.js 文件，就会调用 node 命令来运行，而对于.py 文件，则会调用 python3 来运行。

如果没安装，或者终端里的环境变量 $PATH 没设置对，Code Runner 就会因找不到这些命令而运行失败。

进一步设置命令如何运行
在 Code Runner 的设置页面找到齿轮图标，点击展开，然后：
Extensions Settings -> Code-runner: Executor Map -> Edit in settings.jason
可以打开如下设置文件：
```
{
"code-runner.clearPreviousOutput": true,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"code-runner.executorMap": {

  "javascript": "node --trace-uncaught",
  "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
  ...
  ...
  "python": "python3 -u",
  "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
  ...
  ...
}
}
```
可以更具体地看到，当运行.js 文件，会调用 node --trace-uncaught 命令来运行，而 .py 文件，则会调用 python3 -u 来运行。
这些命令都是可以更改的。比如你可以去掉参数 --trace-uncaught ，只用 node 来运行。或者根据本地安装的情况，把 python3 改为 python 来运行。

运行代码

VS Code 需要以目录（而不是文件）为最小单位打开（载入）。打开存放代码的目录就能看到代码文件。
选择文件后点击界面右上角的三角形 Run Code 按钮或者使用快捷键 Ctrl + Option + N 来运行的代码。

下面是 JavaScript 常用语法，可以用来试试上面的操作：

// 函数声明
function show(x) 
{
  return console.log(x);
}

(n) => { return n + 1; } // 匿名函数：有大括号就需要 return ，没有就不用；只有一个参数时圆括号是可选的；
x => x + 1 ;             // param => expression; 等于 param => { return expression; } 或者 param => { statements }

// 条件分支
if (n < 0) 
{
  show("Baroque");    // 函数调用
}
else if (n == 0) 
{
  show("Classical"); 
}
else 
{
  show("Romantic"); 
}

更多 JS 语法参见箭头函数

其他设置

终端（Terminal）里打开 VS Code ：
打开 Command Palette（快捷键 ⇧⌘P ），输入 shell command 后搜索安装 code 这个命令即可

VS Code Command Palette

安装好后，使用以下方式从终端打开

# 单纯打开 VS Code
$ code

# 使用 VS Code 打开指定路径的文件
$ code [文件路径]

# Example - 使用 VS Code 打开当前文件夹
$ code .

设置按一次 Tab 键相当于输入几个空格键：
用 Cmd + , 打开设置，然后搜索「Tab Size」关键词找到对应的选项，勾选即可。这里要注意观察另一个叫「Detect Indentation」的设置，它如果被勾选会覆盖「Tab Size」的设置。

这里注意 VS Code 的设置有以下两个不同优先级的设置文件，它们之间是继承关系：

User Settings - 用户设置
Workspace Settings - 工作站设置（覆盖上者）

设置格式化代码中的花括号位置：
vscode 缺省的格式化方式是「埃及括号」，也就是把花括号放在一行的末尾，而 ian 推荐的样式是把花括号放在新的一行，这样前两行不至于挨得太近。只需要在设置搜索栏搜索「open brace on new line」找到对应的条件分支（Control Blocks）和函数（Functions）两个选项，打上勾就可以了。

上面两个设置好后，之后的格式化代码操作（右键单击后选择 Format Document）就可以让代码调整为这些格式显示。

一些更方便的设置：

右键单击输出窗口（OUTPUT）的顶部，选择 Move Panel Right ，可以将输出窗口移动到右侧；
右键单击文件的 Tab ，选择 Split Right ，可以在右边新开一个面板（Panel）来显示该文件，这样可以同时看多个文件内容；

VS Code 常用快捷键：

打开 Command Palette 可以搜索各种命令的快捷键：Shift + ⌘ + P ；
注释 / 取消注释某一行代码（光标位于这一行后再按快捷键组合）：⌘ + / ；
块注释（选中代码后）：Shift + Option + A ；

更多有关 VS Code 的操作，可参考官方文档

`打赏`

QR Code for donation