本文介绍了目前前端开发最受欢迎的开发工具 vscode 必装的 10 个开发插件，用于大大提高软件开发的效率。
vscode（visual studio code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。
官网为：https://code.visualstudio.com/
10 个必装的编辑器插件
相当于视频教程的补充更新，这里再次给大家整理出 10 个必装的 vscode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。
1、文件图标 vscode-icons
插件名称：vscode-icons
插件地址：https://marketplace.visualstudio.com/items?itemname=robertohuertasm.vscode-icons
首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。
vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。
2、暗色主题 one dark pro
插件名称：one dark pro
插件地址：https://marketplace.visualstudio.com/items?itemname=zhuangtongfa.material-theme
长时间的编码，暗色调的编码环境更不容易让视力疲劳，而且也可以让自己更加专注。
安装了 one dark pro 插件后，可以一键将 vscode 编辑器的颜色调整成暗色系，编码起来更加舒适。
3、代码美化 beautify
插件名称：beautify
插件地址：https://marketplace.visualstudio.com/items?itemname=hookyqr.beautify
beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
插件支持的语言非常多，基本堵盖了目前所有的语言，而且你还可以自定义代码格式化的结构。
4、代码检查工具 eslint
插件名称：eslint
插件地址：https://marketplace.visualstudio.com/items?itemname=dbaeumer.vscode-eslint
eslint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
而 vscode 中的 eslint 插件就直接将 eslint 的功能集成好，安装后即可使用，对于代码格式与规范的细节还可以自定义，并且一个团队可以共享同一个配置文件，这样一个团队所有人写出的代码就可以使用同一个代码规范，在代码签入前每个人可以完成自己的代码规范检查。
5、必备调试工具 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 个使用与调试技巧，这些知识是你成为合格的前端开发人员必备技能。
6、万能语言运行环境 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
7、快速注释 document this
插件名称：document this
插件地址：https://marketplace.visualstudio.com/items?itemname=joelday.docthis
优秀的代码除了优秀的性能、规范的格式，注释也是不可或缺的，而且注释也应该有一套标准的注释方法，特别对于 javascript 这种语言。
document this 可以快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。
8、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文件中的元素引用的外部样式表
　●　用于手动重新缓存自动完成中使用的类定义的命令
　●　用户设置覆盖应在缓存过程中考虑或排除哪些文件夹和文件
9、代码拼写检查 code spell checker
插件名称：code spell checker
插件地址：https://marketplace.visualstudio.com/items?itemname=streetsidesoftware.code-spell-checker
此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。
10、备忘插件 todo highlight
插件名称：todo highlight
插件地址：https://marketplace.visualstudio.com/items?itemname=wayou.vscode-todo-highlight
在很多的其他代码编辑器中都有 todo 标注功能的，如你写到某一部分的代码时，其中部分的功能需要稍后再来实现，这是就可以在对应的代码处添加一个 todo 类型的注释，那么后期就可以快速地跳转到这部分继续写，而且当项目很大的时候，todo 就变得更加有用，因为有时候 todo 可能有几十个，帮助你标注那些功能需要继续实现或优化。
总结
当然，这里介绍的插件只是必备插件中的 10 个，其实根据你开发的语言，还有很多非常能提高开发效率的工具需要安装，你可以自行在 vscode 的插件中心查询下载安装。
推荐教程：vscode教程
以上就是10个必装的高效开发vscode插件的详细内容。