盘点 12 款让开发效率“飞起”的 VS Code 插件

作者 | 浪里行舟

来源 | 前端工匠（ID：frontendJS）

VS Code，是一个免费的、开源的跨平台编辑器,也是我最满意的编辑器之一。

本文向大家推荐一些我喜欢的VS Code插件，不出意外的话，这些插件将对你的工作效率提升有不小的帮助！

GitLens

VS Code中的 Git 体验在易用性和完整性之间取得了一个不错的平衡，大部分用户都能够使用它完成工作，同时又不会被太多的功能吓到。但是很多硬核的 Git 用户肯定会觉得功能还不够用。包括但不限于：

• 不能查看某个 commit 中的代码改动；

• 不能比较两个 commit 或者 branch，然后阅览代码改动；

• 不能查看代码历史记录。

不过 GitLens 这个插件的出现，就弥补上了上述不足。

类似的 Extension：

• Git History -- 用来查看 Git log 或则一个文件的 Git 历史，比较不同的分支，commits

• Git Blame  - 它允许您在当前选定行的状态栏中看到 Git Blame 信息。GitLens 也提供了类似的功能。

• Git Project Manager --可以一键搜索并打开某个的基于 Git 管理的项目

Quokka.js

Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会在你输入后立即运行您的代码，并在您的代码编辑器中显示各种执行结果。建议你亲自尝试一下。

从上面的动态图，我们就可以知道 Quokka 是一个调试工具，可以为您正在编写的代码提供实时反馈。它能够预览变量的函数和计算值结果。

Visual Studio Intellicode

Visual Studio Intellicode 超过 350 万下载量，是 Visual Studio 上下载次数最多的插件。并且，在我看来，它会是你用过的最有用的插件之一。

这个插件能帮助开发人员生成智能代码补全提示，并且它内置支持很多种编程语言。

Visual Studio Intellicode 使用机器学习技术，通过学习大量 GitHub 项目的代码，能找到一些编码模式，然后在你编程时给予代码提示。

Debugger for Chrome

如果你想调试 JavaScript 程序，你可以不必离开 VSCode 开发环境。

Debugger for Chrome 这款插件就可以做到这点，它由微软发布，允许你在 VSCode 中直接调试网页源文件，该插件主要利用 Chrome 所开放出来的接口来实现对其渲染的页面进行调试。

Auto Rename Tag

无论你选择哪种框架，假如当开始和结束标签间的代码有 50 多行时，你想将一个H2标签更改为H3标签，或者你想将一个div标签更改为span标签，不管要做什么，你都要浪费时间来查找结束标签，这时候就该用这个插件-- Auto Rename Tag

这个插件在你修改某一个标签时会自动匹配结束标签修改为相应的结束标签，反之亦然。

SCSS IntelliSense

在 SCSS 中创建变量，这是很棒的体验。但创建后，你还记得它们吗？可能大多没记住。

有了这个插件，你能在应用的任何位置快速获取你发明的那些 SCSS 变量名。再也不用记住那些名称，也无需进行文件搜索。

ESLint

ESLint 插件将 ESLint 集成进了 Visual Studio Code 中。如果你还不了解这款插件，我简单说一下，这款插件会静态分析你的代码，快速找到代码中的问题。

ESLint 找到的大部分问题都可以由其自动修复。ESLint 会根据当前文件使用的语法进行自动修复，所以就不会像传统的“寻找 - 替换”算法那样产生语法错误。

最重要的是，ESLint 是高度可定制化的。

Prettier

对那些想严格遵守一组编码规则格式的开发者来说，Prettier 是相当有用的插件。

并且，它是一个健壮的、固守成规的代码格式化利器，它可以一键美化你的 JavaScript/TypeScript/CSS 代码。

Vetur

Vetur是一款必备的Vue开发工具。支持多种功能，比如语法高亮、错误检测、Emmet和Snippet等等。

Code Runner

时至今日，Code Runner已经有了超过300万的下载量，代码一键运行，支持超过40种语言。

安装好Code Runner之后，打开你所要运行的文件，有多种方式来快捷地运行你的代码：

• 在编辑区，右键选择 Run Code

• 键盘快捷键 Ctrl+Alt+N

• 快捷键 F1 调出 命令面板, 然后输入 Run Code

• 在左侧的文件管理器，右键选择 Run Code

• 右上角的运行小三角按钮

  

Path Intellisense

Path Intellisense 可以快速提高你的开发效率。如果你同时开发多个项目，并使用很多不同的技术，你肯定想要一个方便的工具，它能帮你记住文件路径。

这款插件就能为你节省很多这方面的时间，帮你省去找到正确文件路径的时间。

Color Picker

在书写 HTML 和 CSS 的时候，你可能经常需要修改元素的颜色。VS Code 为修改颜色，提供了一个图形化的界面，其中包含了颜色相关的属性。

当你打开一段 HTML 或者 CSS 代码时，你可以看到，VS Code 在颜色的前面画了一个方块（即颜色装饰器 Color Decorator），用于展示这段颜色属性所对应的最终效果。然后你把鼠标移动到这段代码上时，一个颜色选择器窗口就显示出来了，根据你需要来调整颜色。

参考：

30个极大提高开发效率的Visual Studio Code插件

这就是我想要的 VSCode 插件！

26 Miraculous VS Code Tools for JavaScript Developers in 2019

10 Extremely Helpful Visual Studio Code Plugins for Programmers

让开发效率“飞起”的 5 个 VS Code 插件

热 文 推 荐 

☞中科院回应木兰语言造假：当事人已停职；中国软件业务收入百强：华为蝉联十八冠；Ionic 5.0.0-beta.5 发布|极客头条

☞15 年老程序员自述：8 个影响我职业生涯的重要技能

☞上海正在夺回互联网 “失落的十年”

☞悲痛！临近年关，一位 IT 创业者自杀，曾卖房给员工发工资

☞回家的票抢上了吗？聊聊12306为什么时不时要崩一下

☞小网站的容器化(上)

☞区块链第一，情商上榜，2020找工作需要哪些技能？

你点的每个“在看”，我都认真当成了喜欢