插件，亦成为扩展。使VSCode 如虎添翼。

本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件，用于大大提高软件开发的效率。

相关文章推荐：Visual Studio Code（目录篇）：如何熟练使用 Visual Studio Code目录

文件图标 vscode-icons

暗色主题 One Dark Pro

代码美化 Beautify

代码检查工具 ESLint

必备调试工具 Debugger for Chrome

万能语言运行环境 Code Runner

特征

用法

快速注释 Document This

CSS 类名智能提示

特征

代码拼写检查 Code Spell Checker

备忘插件 TODO Highlight

总结

文件图标 vscode-icons

插件名称：vscode-icons
插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。

演示操作：

暗色主题 One Dark Pro

插件名称：One Dark Pro
插件地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

长时间的编码，暗色调的编码环境更不容易让视力疲劳，而且也可以让自己更加专注。

安装了 One Dark Pro 插件后，可以一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加舒适。

演示操作：

代码美化 Beautify

插件名称：Beautify
插件地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。

插件支持的语言非常多，基本堵盖了目前所有的语言，而且你还可以自定义代码格式化的结构。

演示操作：

代码检查工具 ESLint

插件名称：ESLint
插件地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好，安装后即可使用，对于代码格式与规范的细节还可以自定义，并且一个团队可以共享同一个配置文件，这样一个团队所有人写出的代码就可以使用同一个代码规范，在代码签入前每个人可以完成自己的代码规范检查。

演示操作：

安装完提示不能使用，如图需要安装：

按着官方说明，找到文件夹，并且 install

等待安装完成，如果安装插件之前务必安装 Node.js 以及npm，详情请点击：Node.js（安装篇）：Windows下安装及配置Node.js

好了，看到版本号，以及 in 35.366s 就说明安装成功，接下来进行测试：

综述：极其与 Alibaba Java Code Guidelines插件差不多，都是为了检测程序编码异常，以及程序规范。

必备调试工具 Debugger for Chrome

插件名称：Debugger for Chrome
插件地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

此工具简直就是前端开发必备，将大大地改变你的开发与调试模式。

以往的前端调试，主要是 JavaScript 调试，你需要在 Chrome 的控制台中找到对应代码的部分，添加上断点，然后在 Chrome 的控制台中单步调试并在其中查看值的变化。

而在使用了 Debugger for Chrome 后，当代码在 Chrome 中运行后，你可以直接在 VSCode 中加上断点，点击运行后，Chrome 中的页面继续运行，执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试。

关于 Chrome 调试工具的使用，你可以参考我在我们的知识星球中分享的原创视频教程「50 个 Chrome Developer Tools 必备技巧」，课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧，这些知识是你成为合格的前端开发人员必备技能。

演示操作：

万能语言运行环境 Code Runner

插件名称：Code Runner
插件地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

如果你需要学习或者接触各种各样的开发语言，那么 Code Runner 插件可以让你不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码，非常适合学习或测试各种开发语言。

支持的语言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。我去，吓坏了，这么多。

特征

运行当前活动文本编辑器的代码文件
通过文件资源管理器的上下文菜单运行代码文件
在文本编辑器中运行选定的代码段
每个Shebang运行代码
每个文件名glob运行代码
运行自定义命令
停止代码运行
在输出窗口中查看输出
设置要运行的默认语言
选择要运行的语言
通过在集成终端中运行代码来支持REPL

用法

要运行代码：
- 使用快捷方式 Ctrl+Alt+N
- 或者按F1，然后选择/输入Run Code，
- 或右键单击文本编辑器，然后单击Run Code编辑器上下文菜单
- 或单击Run Code编辑器标题菜单中的按钮
- 或单击Run Code文件资源管理器的上下文菜单中的按钮
要停止正在运行的代码：
- 使用快捷方式 Ctrl+Alt+M
- 或按F1，然后选择/输入Stop Code Run
- 或右键单击输出通道，然后单击Stop Code Run上下文菜单

要选择要运行的语言，请使用快捷方式Ctrl+Alt+J，或按F1，然后选择/键入Run By Language，然后键入或选择要运行的语言：例如php, javascript, bat, shellscript...

要运行自定义命令，请使用快捷方式Ctrl+Alt+K，或按F1，然后选择/键入Run Custom Command

快速注释 Document This

插件名称：Document This
插件地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

优秀的代码除了优秀的性能、规范的格式，注释也是不可或缺的，而且注释也应该有一套标准的注释方法，特别对于 JavaScript 这种语言。

Document This 可以快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。

操作演示：

CSS 类名智能提示

插件名称：IntelliSense for CSS class names in HTML
插件地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

在 HTML 中调用定义好的样式名时，有时需要经常在 HTML 与 CSS 文件之间切换，来回地查看你已定义好的 CSS 类名。

而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要调用 CSS 类名的地方，此插件会智能地给你已定义 CSS 类名的提示。

特征

为您提供可在工作区中找到的CSS类定义的自动完成（在CSS文件中定义或在“支持的语言模式”部分中列出的文件类型中定义）
支持通过linkHTML文件中的元素引用的外部样式表
用于手动重新缓存自动完成中使用的类定义的命令
用户设置覆盖应在缓存过程中考虑或排除哪些文件夹和文件

演示操作：

代码拼写检查 Code Spell Checker

插件名称：Code Spell Checker
插件地址：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。

演示操作：

备忘插件 TODO Highlight

插件名称：TODO Highlight
插件地址：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

在很多的其他代码编辑器中都有 TODO 标注功能的，如你写到某一部分的代码时，其中部分的功能需要稍后再来实现，这是就可以在对应的代码处添加一个 TODO 类型的注释，那么后期就可以快速地跳转到这部分继续写，而且当项目很大的时候，TODO 就变得更加有用，因为有时候 TODO 可能有几十个，帮助你标注那些功能需要继续实现或优化。

演示操作：

总结

当然，这里介绍的插件只是必备插件中的 10 个，其实根据你开发的语言，还有很多非常能提高开发效率的工具需要安装，你可以自行在 VSCode 的插件中心查询下载安装。

乞讨：

写作不易，纯属整理。如有不足，希望指正。可以留言，遇急事请搜索微信号：

Visual Studio Code（插件篇）：Visual Studio Code 必装的 10 个高效开发插件（扩展）相关推荐

VSCODE 10个高效开发插件
首先介绍如何安装插件下面介绍目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效 ...
VS Code 大佬高效开发插件
插件名称功能 Chinese (Simplified) Language 中文菜单界面 ESLint 代码检查工具 vetur Vue.js智能提示 Git History Diff Git版本记录 ...
wordpress插件_您应该知道的2018年10个高级WordPress插件
必须明智地选择WordPress插件. 它可以确保您的WordPress网站性能最佳. 您正在构建的网站也将这样做. 您可以为访问者提供他们所需要的确切功能. 这样,您正在为客户,网站用户以及您自己创 ...
android+好用插件推荐,安卓插件推荐：安卓手机必装插件推荐
--SwitchPro Widget 售价:约6元 SwitchPro Widget曾经是第一款可以在Android主屏上添加快捷开关的小插件,虽然现在竞争者众多,但它仍值得一试(即便它是付费软件). ...
转发一篇非常好的文章,什么是docker.....和高效开发
做个存档. 快照地址:地址作者地址:青牛什么是docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 ...
Trac 经验谈之（6完）插件篇补遗
Trac 经验谈之(1)杂谈篇 Trac 经验谈之(2)杂谈篇补遗 Trac 经验谈之(3)工作流篇 Trac 经验谈之(4)报表篇 Trac 经验谈之(5)插件篇 Trac 经验谈之(6 完)插件篇 ...
eclipse java开发插件_10大Java开发必备的Eclipse插件
原标题:10大Java开发必备的Eclipse插件今天小编来给大家介绍10个Java开发人员必备的Eclipse 插件,它们有各自的优势,你可以从中选择适合你的那款. 1. EGit EGit是 J ...
typescript语法高亮插件_JavaScript开发者必备的10个Sublime Text插件
Sublime Text几乎是任何开发者在其工具箱的必备应用程序.Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器 ...
wordpress必装的插件 wp最常用的十个插件
wordpress是世界上著名的博客系统,简称wp.一般新安装完wordpress以后,往往需要首先安装一些插件,这样才可以使用wordpress的更多功能.wp最常用的十个插件有哪些呢,可能根据每个 ...

Visual Studio Code（插件篇）：Visual Studio Code 必装的 10 个高效开发插件（扩展）

文件图标 vscode-icons

暗色主题 One Dark Pro

代码美化 Beautify

代码检查工具 ESLint

必备调试工具 Debugger for Chrome

万能语言运行环境 Code Runner

特征

用法

快速注释 Document This

CSS 类名智能提示

特征

代码拼写检查 Code Spell Checker

备忘插件 TODO Highlight

总结

Visual Studio Code（插件篇）：Visual Studio Code 必装的 10 个高效开发插件（扩展）相关推荐

最新文章

热门文章