17 - Visual Studio Code - 代码编辑器与它的插件

一般功能丰富的 IDE ，都会针对它所支援的语言提供许多强大的辅助功能，例如 PyCharm ，但它们所需的容量与资源会较单纯的编辑器大上许多，并且因为只支援特定语言的关系，如果有其他语言的专案时，则需要另外安装其他的 IDE 才能进行开发。

而所谓的 Editor （例如： Sublime Text ），虽然与 IDE 相比相当的轻量，但大部分都只支援语法高亮等简单的开发辅助，在浏览文件或程序码时较为适合，但真正到了开发时，还是必须藉由 IDE 才能提高产能。

例如在使用 Visual Studio 作为 IDE ， Notepad++ 作为 Editor 。

程序码编辑器 - Visual Studio Code

Visual Studio Code 是由 Microsoft 主导开发的开源程序码编辑器，在这个轻量的编辑器中包进了自动完成、 debug 、版本控制等功能，并藉由其丰富的外挂插件的帮助，实现了大部分语言的专用 IDE 所能做到的事情。

作为一个免费的开源软件， Visual Studio Code 在 IDE 与 Editor 间取得了一个微妙的平衡，就本身来说，它是一个优秀的 Editor ，它支援语法高亮、自动完成、缩排、程序码片段等丰富的编辑功能，而当你安装了特定语言的开发插件後，搭配它的 Debug 与任务执行器，使它可以接近（甚至超越）IDE 所给予的开发效率。

安装 Visual Studio Code

使用 Homebrew 安装 Visual Studio Code ：

brew install visual-studio-code

使用 code 指令，就可以开启 Visual Studio Code 。

介面介绍

Visual Studio Code 介面分为：

• 编辑器：位於中间区块，可以将档案分群，放於不同的位置。
• 侧边栏：位於左边区块，显示档案浏览器、搜寻、 Git 等资讯。
• 状态栏：位於最下方行，显示当前档案状态，例如编码、档案格式、错误、警告等资讯。
• Panels ：位於下方区块，显示各套件 logs 、 terminal 等资讯。

设置

Visual Studio Code 的设定分为两种：

• 使用者设定：此设定会影响所有 Visual Studio Code 所开启的专案。
• 专案设定：此设定只会被特定专案使用。

专案设定是在专案的根目录下建立 .vscode 的目录，并在目录内使用 settings.json 做设定：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.markdownlint": true
  }
}

Key 是设定的属性，可以在官网中找到属性的说明以及它的预设值 。

插件介绍

VS Code 的扩充插件十分多元，其中也有许多很实用的插件，有些甚至会影响整个开发的流程，这里简单介绍几个便利的插件，帮助开发者在工作时更加地顺利。

接下来的介绍会分为下面几个使用面向：

• 主题类：编辑器外观与显示方式的优化。
• 编辑类：为开发者在编辑时带来便利。
• 开发类：优化程序开发时的效率。

主题类之一： vscode-icons

插件页面连结。

VS Code 预设只会判断少部分的档案来给予不同的图示，对於开发上的辨识度较低。 vscode-icons 不仅会用副档名判断，还以档名来辨识不同的类型，给予特殊的图示，例如像是 .editorconfig 这样的设定档，它就可以显示出专属的图示，让使用者可以快速找到想要的档案。

使用 code 指令进行安装：

code --install-extension vscode-icons-team.vscode-icons

安装完成後，将设定中的 workbench.iconTheme 改为 vscode-icons 。

{
  "workbench.iconTheme": "vscode-icons"
}

储存後就可以看到效果。

主题类之二： GitHub Theme

插件页面连结。

GitHub 主题插件让使用者在使用 VS Code 时，也能拥有与 GitHub 上相同的风格。

使用 code 指令进行安装：

code --install-extension GitHub.github-vscode-theme

安装完成後，开启 VS Code 的设定，将 workbench.colorTheme 改为 GitHub Dark Dimmed 。

{
  "workbench.colorTheme": "GitHub Dark Dimmed"
}

GitHub Theme 总共有提供下列主题：

• GitHub Light Default
• GitHub Dark Default
• GitHub Dark Dimmed
• GitHub Dark High Contrast

使用者可以依据喜好做调整。

编辑类之一： Code Spell Checker

插件页面连结。

在写程序时，偶尔会因输入过快而导致拼写的错误， Code Spell Checker 可以给予使用者拼写错误的提醒，避免错字进入我们的程序码库中。

使用 code 指令进行安装：

code --install-extension streetsidesoftware.code-spell-checker

安装完成後，当输入的字有拼写错误时，会有蓝色线条做提醒，使用者可以使用 Command ＋ . 开启建议清单做选择。

编辑类之二： Bookmarks

插件页面连结。

Bookmarks 可以让我们在不同的档案与行中留下记号，并且经由指令跳转，省下许多的时间。

使用 code 指令进行安装：

code --install-extension alefragnani.bookmarks

在想要标记的行按下 Command-Option-K 就可以建立标记，在已标记的行再次按下 Command-Option-K 就可以删除标记。

并且可以使用 Command-Option-L/J 在各个标记间切换。

要观看全部的标记状态时，可以开启 Bookmarks 的侧边栏总览专案中的所有标记。

编辑类之三： Markdown All in One

插件页面连结。

Markdown 是个语法简单，但是功能强大的文档格式，可以单纯依靠输入的语法产生各式各样的样式。

Markdown All in One 套件是个使用 VS Code 撰写文件时的好帮手，它提供了很多的快捷键，来加速各种样式的插入，藉以提升整体的效率。

使用 code 指令进行安装：

code --install-extension yzhang.markdown-all-in-one

其所提供的快捷键有很多，像是 Ctrl-B 可以让选取得字串变为 Bold ，在列表内按下 Enter 会自动插出列表行等。

编辑类之四： shell-format

插件页面连结。

shell-format 是个格式化工具，它可以格式化 hellscript 、 Dockerfile 、 properties 、 gitignore 、 dotenv 、hosts 、 jvmoptions 等。

使用 code 指令进行安装：

code --install-extension foxundermoon.shell-format

将 shell-format 设定预设的格式化工具：

{
  "editor.defaultFormatter": "foxundermoon.shell-format"
}

然後使用 shift-option-f 就可以对当前的档案进行格式化。

如果想要在储存时格式化的话，可以设定：

{
  "editor.formatOnSave": true
}

由於 shell-format 并不适合用在所有的档案中（例如： .js ），因此我们可以将它从全域的格式化工具中改为特定格式的工具：

{
  "[ignore]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  }
}

开发类之一： GitLens

插件页面连结。

GitLens 为 VS Code 提供了完整的预览功能，我们可以使用 GitLens 在 VS Code 中浏览 Commit 、 Change 、 Blame 等资讯。

使用 code 指令进行安装：

code --install-extension eamodio.gitlens

安装完成後，可以直接看到当前档案最近的 Commit 资讯，并且所在行也有最近修改的资讯。

并且可以在档案的右边状态列开启 GitLens 的各种功能，包括档案的 Blame 、 History 等。

开发类之二： Docker

插件页面连结。

Docker 插件可以在编辑 Docker File 与 Docker Compose 时提供提示、自动补全。

使用 code 指令进行安装：

code --install-extension ms-azuretools.vscode-docker

本文重点整理

• Visual Studio Code 作为一个轻量的程序码编辑器，藉由插件的帮助，可以达到接近 IDE 的开发效率，在纯编辑器与 IDE 之间取得一个平衡。
• 因为插件的弹性，开发者不需要再使用不同的 IDE ，只需要针对专案的语言，选择适合的插件，就可以拥有与 IDE 相同的功能，减少需要安装与适应复数个开发工具的麻烦。
• 常用的插件主要为三类：
  • 主题类：外观优化，例如 vscode-icons 与 GitHub Theme 。
  • 编辑类：更有效率的编辑，例如 Code Spell Checker 、 Bookmarks 、 shell-format 与 Markdown All in One 。
  • 开发类：提供开发上的帮助，例如 GitLens 与 Docker 。

参考资料

• Visual Studio Code Docs
• Visual Studio Code Extensions Marketplace