VSCode 开发插件 推荐

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

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

VSCode 的基本使用能够参考个人原创视频教程「VSCode 高效开发必装插件」。

 

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

至关于视频教程的补充更新，这里再次给你们整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装能够直接参考上面的视频教程。

2.1 文件图标 vscode-icons

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

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

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

 

2.2 暗色主题 One Dark Pro

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

长时间的编码，暗色调的编码环境更不容易让视力疲劳，并且也可让本身更加专一。

安装了 One Dark Pro 插件后，能够一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加温馨。

 

2.3 代码美化 Beautify

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

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

插件支持的语言很是多，基本堵盖了目前全部的语言，并且你还能够自定义代码格式化的结构。

 

2.4 代码检查工具 ESLint

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

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

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

2.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 中进行单步调试。

 

2.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, 以及一些自定义的命令。

 

2.7 快速注释 Document This

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

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

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

 

2.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 类名的提示。

2.9 代码拼写检查 Code Spell Checker

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

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

 

2.10 备忘插件 TODO Highlight

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

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

 

3. 总结

固然，这里介绍的插件只是必备插件中的 10 个，其实根据你开发的语言，还有不少很是能提升开发效率的工具须要安装，你能够自行在 VSCode 的插件中心查询下载安装。