VSCode 和它的插件们

时间  2020-03-21
标签 vscode 插件 繁體版
原文   原文链接

1. Visual Studio Code 简介

工欲善其事，必先利其器。软件开发者不只须要提高本身的软实力，也须要找到趁手的工具。今天要介绍的主角是 Visual Studio Code，简称 VSCode，来自微软。前端

VSCode 是一款代码编辑器，核心用户群就是软件开发者。固然也有人把 VSCode 称为轻量 IDE，彷佛也没什么错。怎么说呢，来看一张经典截图。这个截图来自 2017 SpringOne 大会上，Erich Gamma 的主题演讲。java

image.png

📚 Erich Gamma 介绍 VSCode 定位偏向于编辑器node

Erich Gamma 介绍 VSCode 的定位时表示，VSCode 的定位是一个编辑器，可是主要是针对程序员，因此它要能理解代码，并提供必定的调试能力。git

普通的编辑器能力你们都理解，无非就是平常编辑功能。而代码理解能力则须要根据用户当前编辑的内容对用户进行提示（好比函数参数提示），以及帮助用户快速完成代码编码（如自动完成），甚至能提供一些代码静态检查和重构的功能。为此 VSCode 与 TypeScript 联合研发了 LSP（Lanuage Service Protocol），基于 LSP，任何语言均可以实现符合协议的语言服务，任何编辑器均可以经过 LSP 使用这些服务为用户提供基于语言理解的编辑体验。程序员

一款好用的编辑器，不只须要有实用的功能，优雅的界面，舒服的操做体验，还应该具备良好的生态和活跃的社区支持。我之前曾经看到不少人以一己之力开发出来的初见锋芒的编辑器都只是昙花一现，很快就消失了。若是他们有良好的生态和社区支持，必定会发展得更好。有一篇博文叫《VS Code为何能这么牛？》从产品和技术的角度讲解了 VSCode 为何会发展得这么好，有兴趣的朋友能够去找找看。github

因为VSCode 有良好的生态和强大的社区支持，因此有不少插件能够加强其编辑能力，这些插件在 https://marketplace.visualstu... 能够找到。若是以为这个地址很差记，能够简单的记住 VSCode 的主页 https://code.viusalstudio.com/，进去以后在上方“Extensions”处进入。typescript

下面就是我在平常工做中精挑细选的一些插件，推荐给你们。不过首先声明，插件的使用跟我的的工做环境有很大关系，我主要工做在 C#、.NET 和 JavaScript 相关技术上，对于较大型的 .NET 项目通常使用 Visual Studio。因此 VSCode 在我这里主要起到三个方面的做用：express

  • 前端开发主要工具。
  • 其余单个代码的编辑工具，好比单个 .cs、.java、.groovy、.json、.md 等。由于若是源文件是以项目组织的，一般会使用专业的 IDE，好比 Visual Studio，Eclipse 等。
  • Git 客户端。

所以，插件也是跟这些做用相关的。下面开始正式推荐插件 —— 表面上是在推荐 VSCode 的插件，实际上也是在推荐一些工具。npm

2. EditorConfig for VS Code

https://marketplace.visualstu...

在团队协做开发时，可使用 EditorConfig (https://editorconfig.org/) 同步编辑器设置，统一开发规范。目前不少知名编辑器、IDE 都原生或经过插件支持 EditorConfig。EditorConfig 在官网上列举支持这一标准的编辑器和IDE，看看你习惯使用的编辑器和 IDE 是否在列。json

项目中使用 .editorconfig 配置文件来配置编辑选项，具体的配置说明能够参阅官方文档 (https://editorconfig.org/#file-format-details)。下面来看一个简单的配置示例：

[*]                     # 对全部文件进行配置
charset = utf-8         # 使用 UTF-8 编码
indent_style = space    # 使用空格缩进
end_of_line = lf        # 统一使用 Unix 换行符

[*.js]
indent_size = 4         # JS 文件缩进为 4 个单位（前面配置为空格）

[*.{json,xml}]
indent_size = 2         # JSON 和 XML 文件缩进为 2 个单位

因为 EditorConfig 容许扩展，因此甚至有 IDE 为语言定制了专门的配置项，好比 Visual Studio 2019：

[*.cs]
# 空检查相关的配置
csharp_style_throw_expression = true:suggestion
csharp_style_conditional_delegate_call = true:suggestion

# 甚至能够配置在编辑器里不提示某些警告
[*.cs]
# CS1591: Missing XML comment for publicly visible type or member
dotnet_diagnostic.CS1591.severity = silent

使用 EidtorConfig 后，团队协做开发时再也不用担忧代码格式不统一了。因为 EditorConfig 像 LSP 同样有一个跨编辑器的标准，因此即便团队成员喜欢使用不一样的编辑器或 IDE，也能使用相同的代码格式标准。

3. Bracket Pair Colorizer 2

https://marketplace.visualstu...

这个插件可使用彩色高亮匹配括号，加强代码阅读。来看看花里胡哨但很实用的的括号配对：

image.png

📚 Bracket Pair Colrizer 2 的多彩匹配

此外，还能够有一些连线来显示括号之间的关系。注意下图中光标在不一样的位置时，匹配的括号和辅助连线的区别。

image.png

📚 使用连线表示光标所在且离光标最近的一对括号

写代码时保持良好的缩进和简洁的代码是个好习惯。虽然这个插件在良好的代码风格做用会有一些折扣，可是现在函数式代码横行，找到正确匹配的括号仍是蛮重要的。

4. ESLint

https://marketplace.visualstu...

ESLint 是一个 JavaScript 和 TypeScript 代码的静态检查工具，能够检查出代码中不符合编写规范的地方，也能够检查出一些从语法上识别可能存在逻辑错误的地方，几乎是前端开发的必备工具。VSCode 使用 ESLint 插件来支持编辑期间对代码进行检查，高亮检查出来的问题，并对可自动修改的问题提供快速修复功能。

在使用 VSCode 开发 npm 项目的时候，该插件会自动使用 node_modues/eslint 来进行检查。项目内使用以下命令安装 esling：

my-project> npm install --save-dev eslint

若是是编辑项目外的 .js 或 .ts 文件，则须要使用 npm 全局安装的 eslint。以下安装全局 eslint：

npm install -g eslint

若是项目内有 ESLint 配置文件（.eslintrc、.eslintrc.json、.eslintrc.js 等），该插件会按照这个配置来进行检查。若是没有，则按照全局配置进行检查。全局配置在

  • Windows: %userprofile%\.eslintrc.*
  • Linux: ~/.eslintrc.*

要特别说明的一点是，TypeScript 官方宣布全面支持 ESLint，

原本还有一个叫 TSLint 的插件，不过其 Github 项目主页 README 说得明白：TSLint is deprecated.。

image.png

📚 TSLint 已声明过时，使用 ESLint 代替

TypeScript 代码如今由 ESLint 负责检查，TSLint 的 typescript-eslint (https://github.com/typescript-eslint/typescript-eslint) 插件就是干这个事情的。

5. Git Graph & GitLens

Git 是现代开发经常使用的工具之一，默认安装的 Git 提供命令行操做。Git Windows 也能够以安装的时候安装一个默认的 GUI 客户端。除此以外，Git 在 GUI Client 页面 (https://git-scm.com/download/gui/windows) 也介绍了很多 Git 的 GUI 客户端。不过怎么说呢，对我来讲，不收费的用不惯，用得惯的要收费。因此最后干脆直接用 VSCode 内置的 Git 功能吧。配合插件，平常操做彻底没问题。

这里主要推荐两个 Git 插件，Git Graph 和 GitLens。

Git Graph: https://marketplace.visualstu...
GitLens: https://marketplace.visualstu...

Git Graph 就是一个漂亮的提交历史查看工具，同时还支持在历史提交记录上进行一些快捷操做，好比建立分支、建立标签、合并分支、Cherry Pick 等。不用过多介绍，直接看效果图就能了解：

image.png

📚 Git Graph 很是漂亮的呈现了提交历史

GitLens 的官方介绍很是详细，因此这里不用多说，只说我经常使用的两个功能就好：

  1. 在 Compare 界面直接比较两个分支，参与比较的能够是本地分支，也能够是远程分支。

    image.png

    📚 GitLens 比较两个分支

  2. 基于 Git 的代码管理，每每须要将任务分支推到服务器以后，经过 PR 合并，再删除任务分支。远端虽然删除了，但本地 origin 还保存着记录，须要使用 git remote prune origin 命令清理。说实在的，这个命令若是没用惯还真记不住，不过 GitLens 的 Repositories 界面，Git 库下面的 “Remotes ⇒ orign”上右键，能够直接清理 origin，免得去写命令行的麻烦。

    image.png

    📚 GitLens 清理 origin

6. Todo Tree

https://marketplace.visualstu...

不知道你们有没有在代码注释中写任务的习惯，好比 TODO，NOTE，FIXME 之类的任务标记。Todo Tree 就是一个检索并管理这些任务标记的工具。

image.png

📚 Todo Tree

支持哪些任务标记，每种标记用什么样的颜色和图标表示，均可以在用户配置中设置：

"todo-tree.general.tags": [                 // 这里配置支持的任务标记
    "TODO",
    "FIXME",
    "DEBUG",
    "NOTE"
],
"todo-tree.highlights.customHighlight": {   // 这里配置颜色和图标
    "DEBUG": {
        "foreground": "#909090",
        "icon": "tools",
        "type": "text-and-comment"
    },
    "FIXME": {
        "foreground": "#f33958",
        "icon": "bug",
        "type": "text-and-comment"
    },
    "NOTE": {
        "foreground": "#4375cd",
        "icon": "pencil"
    },
    "TODO": {
        "foreground": "#ffca28",
        "icon": "checklist"
    }
},
"todo-tree.highlights.defaultHighlight": {  // 这是默认的颜色（上面的配置匹配不到的状况）
    "foreground": "#dcd079",
    "opacity": 50,
    "type": "tag"
},

7. Live Share

https://marketplace.visualstu...

这个是协同开发的重量级工具。若是团队不在一块儿，又须要进行一些协做，这个工具就很是有用。

  • 又须要一块儿讨论代码的时候，靠截图吗？
  • 当你审查代码看到一团糟又很难跟对方说清楚如何改的时候，难道要选择从“渔”退而求“鱼”？
  • 当团员程序出 BUG 半天调不出来，须要帮助的时候，怎么整？
  • ……

团队不在一块儿，协做基本上靠截图、视频和远程协助。截图效率低，视频看不清，远程运行卡……那么这个时候就可使用 Live Share 了。主持方开始 Live Share Session 以后能够邀请使用 Live Share 的团员加入，而后你们能够

  • 看到同一套代码，并根据主持人受权进行编辑；
  • 能够看到对方的操做，包括光标移动，代码编辑等；
  • 调试的时候甚至能够看到各变量的值。注意这不是主持人正在看的变量值，是想看哪一个点哪一个哦！

Visual Studio 也有 Live Share 插件。VS 和 VSCode 之间能够共同 Share，不须要双方使用相同的编辑器或 IDE。对于远程协做团队来讲，这个插件真是太太太好用了！

8. Visual Studio IntelliCode

https://marketplace.visualstu...

你们都知道代码提示好用， 自动完成好用。可是，基于 LSP 的这些功能毕竟是死的，配置好的，根据 SDK 无差异提示的。若是能智能一点就行了，好比当初写 Java 程序时，IDEA 会根据类型自动推荐变量名……

那么，你须要 IntelliCode。这款插件叫 Visual Studio IntelliCode，是由于它来源于 Visual Studio。它带来了智能代码提示功能，包括加强代码提示、推荐经常使用方法、属性等。听说推荐信息来源于对网络上大量代码的大数据分析。

image.png

📚 Visual Studio IntelliCode 智能提示

图中，打星星的就是智能提示的内容。你看，输入 console. 弹出建议时，经常使用的方法都列在了前端，选起来快多了。

不过遗憾的是，目前 VSCode 的这款插件只支持 Python，JavaScript/TypeScript 和 Java。若是须要对 C#、C++ 等语言的支持，请使用 Visual Studio。

9. 其余插件

VSCode 插件不少，须要什么直接去市场上找，下载量大的，投票数高的，符合要求直接拿来用。用了不顺手卸载了再找下一个；用了顺手发篇博文分享一下。

除了上面介绍的插件外，我还使用了不少其余插件，由于篇幅有限，就不展开介绍了。这些插件包括（按字母序，没给连接，直接去插件市场搜就行）：

  • Ascii Tree Generator，可根据目录结构或缩进结构生成 ASCII 字符表示的树。
  • change-case，用来改变变量的大小写风格太好用了。
  • Code Runner，临时跑段代码。
  • Insert GUID，生成 UUID/GUID 用的。
  • Makrdown All in One，Markdown 扩展功能全家桶。不过最近喜欢用 Typora 编辑 Markdown，因此用得少了。
  • Markdown TOC，按标题编号，生成目录等功能。Markdown All in One 不含这些，Typora 也不含按标题编号的功能，因此这个插件仍是颇有用。
  • Material Icon Theme，是个文件图标集。VSCode 图标集不少，看我的喜欢的选用吧。
  • Partial Diff，用来比较部分文本。VSCode 提供文件之间的比较，可是若是想只比较部分文本，甚至想拿选中的文本跟剪贴板中的比较，就须要这个插件了。
  • REST Client，轻量级的 REST 测试工具，不用启动 Postman 了。
  • Sort JSON objects，适合强迫症朋友，对 JSON 属性排序用。

本次分享到此结束，若是朋友们知道其余好用的插件，不妨留言/评论分享一下！

边城客栈

请关注公众号边城客栈⇗

看完了先别走，点个赞啊 ⇓，赞扬 ⇘ 也行！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程