上手 Visual Studio Code

    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",
    "cpp": "cd $dir && g++ -std=c++11 $fileName -o $fileNameWithoutExt && $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 的设置有以下两个不同优先级的设置文件，它们之间是继承关系：

  1. User Settings - 用户设置
  2. 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 的操作，可参考官方文档

打赏