VSCode 必装的 10 个高效开发插件

た入场券 2023-08-17 17:45 141阅读 0赞

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

VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」。

![截图][b_56c77e9d9ca46a5761e1cd65195bd5a6.png]

VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。

官网为：[https://code.visualstudio.com/][https_code.visualstudio.com]

# 1. VSCode 的基本使用视频教程 #

在我们的[知识星球社区][Link 1]中给大家分享过我原创的 10 集视频教程「VSCode 高效开发必装插件」。

> 此课程为 VSCode 编辑器系列课程。VSCode 强大的插件库使得其在提升开发效率方面更加的无敌，系列课程给大家分享了必装插件的安装、配置与使用技巧相关的知识。

**视频教程课程大纲**

*  001 - 课程简介
 *  002 - 如何让你的文件类型一目了然
 *  003 - 如何更加高效地管理项目
 *  004 - 自动格式化你的代码
 *  005 - 如何一键搭建各类语言的学习测试环境
 *  006 - 如何和 Chrome 联动调试
 *  007 - 如何实时自动检测你的代码规范与代码中的错误
 *  008 - 如何提升 React 等前端开发的效率
 *  009 - 如何集成并美化你的终端到 VSCode 中
 *  010 - Visual Studio 重度使用者如何迁移到 VSCode

视频教程地址：[https://devopen.club/course/vscode][https_devopen.club_course_vscode]。

# 2. 10 个必装的编辑器插件 #

相当于视频教程的补充更新，这里再次给大家整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。

## 2.1 文件图标 vscode-icons ##

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

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

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

![截图][b_d4fd0a952b275f236d293e04751bae38.png]

## 2.2 暗色主题 One Dark Pro ##

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

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

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

![截图][b_2d13764e36b27c08add6faf6988848c8.png]

## 2.3 代码美化 Beautify ##

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

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

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

![截图][b_f6333d5f4323b535be9101b92d363793.png]

## 2.4 代码检查工具 ESLint ##

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

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

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

![截图][b_463ae13d0e7a94265302fa1ebde5850a.png]

## 2.5 必备调试工具 Debugger for Chrome ##

*  插件名称：Debugger for Chrome
 *  插件地址：[https://marketplace.visualstudio.com/items?itemName=msjsdiag.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 必备技巧」][50 _ Chrome Developer Tools]，课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧，这些知识是你成为合格的前端开发人员必备技能。

![截图][b_6232601c63f91a5705a8d7a73cab7479.png]

## 2.6 万能语言运行环境 Code Runner ##

*  插件名称：Code Runner
 *  插件地址：[https://marketplace.visualstudio.com/items?itemName=formulahendry.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, 以及一些自定义的命令。

![截图][b_86ac5037d975e2cc748e85cbc8c9ac26.png]

## 2.7 快速注释 Document This ##

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

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

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

![截图][b_008ea52a5d01ad021bfee5e03c3f493e.png]

## 2.8 CSS 类名智能提示 ##

*  插件名称：IntelliSense for CSS class names in HTML
 *  插件地址：[https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion][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 类名的提示。

![截图][b_a7546c9593b533d3e2eb5a148a762693.png]

## 2.9 代码拼写检查 Code Spell Checker ##

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

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

![截图][b_1c89ea12f1ea5f1b88d9239ddbc99127.png]

## 2.10 备忘插件 TODO Highlight ##

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

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

# 3. 总结 #

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

转载于:https://www.cnblogs.com/ryxiong-blog/p/11314208.html

[b_56c77e9d9ca46a5761e1cd65195bd5a6.png]: https://oindk07nf.qnssl.com/b_56c77e9d9ca46a5761e1cd65195bd5a6.png
[https_code.visualstudio.com]: https://code.visualstudio.com/
[Link 1]: https://devopen.club/pro
[https_devopen.club_course_vscode]: https://devopen.club/course/vscode
[https_marketplace.visualstudio.com_items_itemName_robertohuertasm.vscode-icons]: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
[b_d4fd0a952b275f236d293e04751bae38.png]: https://oindk07nf.qnssl.com/b_d4fd0a952b275f236d293e04751bae38.png
[https_marketplace.visualstudio.com_items_itemName_zhuangtongfa.Material-theme]: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
[b_2d13764e36b27c08add6faf6988848c8.png]: https://oindk07nf.qnssl.com/b_2d13764e36b27c08add6faf6988848c8.png
[https_marketplace.visualstudio.com_items_itemName_HookyQR.beautify]: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
[b_f6333d5f4323b535be9101b92d363793.png]: https://oindk07nf.qnssl.com/b_f6333d5f4323b535be9101b92d363793.png
[https_marketplace.visualstudio.com_items_itemName_dbaeumer.vscode-eslint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
[b_463ae13d0e7a94265302fa1ebde5850a.png]: https://oindk07nf.qnssl.com/b_463ae13d0e7a94265302fa1ebde5850a.png
[https_marketplace.visualstudio.com_items_itemName_msjsdiag.debugger-for-chrome]: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
[50 _ Chrome Developer Tools]: https://devopen.club/course/chromedevtools
[b_6232601c63f91a5705a8d7a73cab7479.png]: https://oindk07nf.qnssl.com/b_6232601c63f91a5705a8d7a73cab7479.png
[https_marketplace.visualstudio.com_items_itemName_formulahendry.code-runner]: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
[b_86ac5037d975e2cc748e85cbc8c9ac26.png]: https://oindk07nf.qnssl.com/b_86ac5037d975e2cc748e85cbc8c9ac26.png
[https_marketplace.visualstudio.com_items_itemName_joelday.docthis]: https://marketplace.visualstudio.com/items?itemName=joelday.docthis
[b_008ea52a5d01ad021bfee5e03c3f493e.png]: https://oindk07nf.qnssl.com/b_008ea52a5d01ad021bfee5e03c3f493e.png
[https_marketplace.visualstudio.com_items_itemName_Zignd.html-css-class-completion]: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
[b_a7546c9593b533d3e2eb5a148a762693.png]: https://oindk07nf.qnssl.com/b_a7546c9593b533d3e2eb5a148a762693.png
[https_marketplace.visualstudio.com_items_itemName_streetsidesoftware.code-spell-checker]: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
[b_1c89ea12f1ea5f1b88d9239ddbc99127.png]: https://oindk07nf.qnssl.com/b_1c89ea12f1ea5f1b88d9239ddbc99127.png
[https_marketplace.visualstudio.com_items_itemName_wayou.vscode-todo-highlight]: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight