我最喜欢的 12 个VSCode 插件！

àì夳堔傛蜴生んèń 2022-11-04 14:24 20阅读 0赞

> 原者：Katherine Peterson  
> 译者：前端小智  
> 来源：dev

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

VSCode 之所以是如此出色的代码编辑器，其原因之一是由社区创建的庞大的插件库，从而提高了开发人员的工作效率。 以下是一些我最喜欢的VSCode 插件。

### [1. Rainbow Brackets][] ###

地址：https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

![da99b588af47d32a78842d4a71f60335.png][]

这个插件让我们的括号变成五颜六色，这样很容易就能找到匹配的对。

### [2. Auto Rename Tag][] ###

地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

![9654683e19ad9ea1542d3cd7f56b28e6.gif][]

重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签。

### [3. Relative Path][] ###

地址：https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

![d46d24d1a2e99747da0494924016cbf9.gif][]

此插件节省了我很多时间来编写导入语句。 使用简单的键盘快捷键即可轻松获取工作区中任何文件的相对路径。

[4. Prettier][]

地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

![067bf9dfcd7e4546675486a25ca820be.gif][]

和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)。而 `Prettier` 只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给 `Prettirer` 再合适不过了。和 Eslint 配合使用，风味更佳。

### [5. htmltagwrap][] ###

地址：https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

![1018f2b05a4be067dc2dbd99dbd3c722.gif][]

可以在选中HTML标签中外面套一层标签。

[6. Markdown Preview Enhanced][]

地址：ttps://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

![bc7c974b0b09de3ab55ebdc6713ceee9.png][]

如果你写过markdown文件，有一个实时预览是非常有用的。

### [7. Polacode][] ###

地址：https://marketplace.visualstudio.com/items?itemName=pnp.polacode

![2b0d64f0be2268d7c44339d6aa511612.png][]

这个插件可以将你的代码保存成图片分享给别人！

### [8. Random Everything][] ###

地址：https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything

![44dae268709a2994def0acd53b35bd06.png][]

这个插件可以根据数据类型自动生成随机数据，特别适合生成测试数据。

### [9. CSS Peek][] ###

地址：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

![e463061ddaa9bd26a0d35a9747b68527.png][]

CSS Peek插件扩展了HTML和ejs代码编辑功能，支持在源代码中的字符串中找到css/scss/less(类和id)。这在很大程度上是受方括号中称为CSS内联编辑器的类似功能的启发。

### [10. Turbo Console Log][] ###

地址：https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

![2b22257256268e5eba85d00d929a8c55.png][]

快捷添加 console.log，一键 注释 / 启用 / 删除 所有 `console.log`。

简单说下这个插件要用到的快捷键:

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
    alt + shift + c 注释所有 console.log
    alt + shift + u 启用所有 console.log
    alt + shift + d 删除所有 console.log

### [11. Simple React Snippets][] ###

地址：https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

![c06fc1acfbb64a0051bf801e8fa8e088.png][]

快速生成 React 模板片段~

### [12. Snippet Creator][] ###

地址:ttps://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator

![9b325ba6375151ee604effae79a61692.png][]

有许多代码段扩展，如上面的React，但有时我们可能想要制作自己的自定义代码段，这个插件可以让你轻松做到这一点。

完，我是小智，我要去刷碗了~

--------------------

原文：https://dev.to/katherinecodes/my-12-favorite-vscode-extensions-cld

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

## 交流 ##

文章每周持续更新，可以微信搜索\*\*【大迁世界 】**第一时间阅读，回复**【福利】\*\*有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[1. Rainbow Brackets]: https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
[da99b588af47d32a78842d4a71f60335.png]: /images/20221023/9199c9ab8f22473fae2d6ffd9f0947ba.png
[2. Auto Rename Tag]: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
[9654683e19ad9ea1542d3cd7f56b28e6.gif]: /images/20221023/2562d29091684eb6bdb623e8f08de1f9.png
[3. Relative Path]: https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath
[d46d24d1a2e99747da0494924016cbf9.gif]: /images/20221023/c1572fd5210e4a55a7eb95b7b41437eb.png
[4. Prettier]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
[067bf9dfcd7e4546675486a25ca820be.gif]: /images/20221023/cee4eee039174550ba747e519fabb1c7.png
[5. htmltagwrap]: https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
[1018f2b05a4be067dc2dbd99dbd3c722.gif]: /images/20221023/9e486351ea7d41ca8e10fb374eb701ec.png
[6. Markdown Preview Enhanced]: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
[bc7c974b0b09de3ab55ebdc6713ceee9.png]: /images/20221023/3b4cabb0135943b3ba86527049e5977a.png
[7. Polacode]: https://marketplace.visualstudio.com/items?itemName=pnp.polacode
[2b0d64f0be2268d7c44339d6aa511612.png]: /images/20221023/b1544cd4a7ae4f838d67a4043ca5594d.png
[8. Random Everything]: https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything
[44dae268709a2994def0acd53b35bd06.png]: /images/20221023/2e44ec6ee0e94f5d97cc4baa2ab55d9b.png
[9. CSS Peek]: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
[e463061ddaa9bd26a0d35a9747b68527.png]: /images/20221023/5de8395ae76641f5ba83ad9bb2f5bcf5.png
[10. Turbo Console Log]: https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
[2b22257256268e5eba85d00d929a8c55.png]: /images/20221023/5135e6a3f6084255be70bc36f7bdb156.png
[11. Simple React Snippets]: https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
[c06fc1acfbb64a0051bf801e8fa8e088.png]: /images/20221023/11ca84ca950d45c1ab5d3f9ae13a54ae.png
[12. Snippet Creator]: https://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator
[9b325ba6375151ee604effae79a61692.png]: /images/20221023/aa36f124367e404eab20e31f9935a001.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi