上手 Visual Studio Code

    Tools

简介

VS Code 是微软开发的一款编辑器,迭代速度很快 ,产品定位是介于 IDE 和纯编辑器(如 vi)之间,更多八卦可收听 Teahour 91 期的介绍


VS Code 安装

安装很简单,从官网下载 App 正常安装即可,实在不懂就看官方教程


立马上手

打开 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 等操作)。

快捷键:
使用 ⇧⌘P 打开 Command Palette 可以搜索各种命令的快捷键,比如注释 / 取消注释某一行代码(光标位于这一行后再按快捷键组合):⌘ + / 。如果是块注释,则是选中代码后按:⇧ + Option + A

运行代码:
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 :
使用 ⇧⌘P 打开 Command Palette,输入 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)就可以让代码调整为这些格式显示。

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


打赏