精选！5 个必备必知必用的前端插件

VSCode：你们说目前市场上最好用的浏览器是哪个？

IE 不敢说话，猎豹，360 相视对瞄，世界之窗竟然动了脚步，这难道是在跃跃欲试？我靠，竟然是往后退了一步。到时火狐在跃跃欲试。这时，说时迟那时快，Chrome 往前大步一迈，自豪的说：当然是我了。

VSCode：为什么你是最好用的浏览器呢？你咋这么自信呢？

Chrome：因为 一、我界面简洁，清爽，非常干净。二、速度快。正所谓，“天下武功唯快不破”，相比于猎豹、IE 等我的加载速度可谓第一。三、插件资源丰富。我拥有强大的第三方插件库，因此使用起来极其方便。最重要的是：升级快、同步性好。

VSCode 窃窃一笑，说：嗯，你说的真对，说的太好了。那你们知道目前市场上最好的前端编辑器是哪个吗？是我，因为以上优点，在所有的前端编辑器中，只有我都有，而且最好。

众浏览器共同发出一声轻蔑的笑声：哼，原来你是在这里等我们的啊！

Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了我们前端开发者的喜爱。 VSCode 最大的优势和特点不仅仅是界面清爽，干净，最重要的是有一个扩展和主题市场，包含了数以千计质量不同的插件。

今天，我们就来给大家推荐 5 个精选的 VSCode 插件。

1、Regex Previewer

Regex Previewer 是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。

插件地址：https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

2、CSS Peek

使用 CSS Peek 插件，我们选中应用的样式名字直接可以追踪到样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择 “Go to Definition 和 Peek definition” 选项，它便会给你发送样式设置的 CSS 代码。

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

3、Open-In-Browser

这个插件的功能其实看名字就知道了，顾名思义：打开到浏览器当中。就是可以在 VSCode 中选择在浏览器中打开该文件。我们都知道由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。

插件地址：https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser

4、Quokka

这个厉害了，Quokka.js 是 JavaScript 和 TypeScript 的快速原型操作平台。 它会在您键入时立即运行代码，并在代码编辑器中显示各种执行结果。说白了就是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。配置简单而且能够预览变量的函数和计算值结果。

插件地址：https://quokkajs.com/

它不仅仅支持 VSCode ，还支持 Atom ，JetBrains IDEs 。

5、Change Case

虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。

插件地址：https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

好了，到这里 VSCode 今天就秀完了，VSCode 作为前端编辑器界的陈独秀你可以坐下了。不知道今天是东哥最陈独秀的日子吗？今天推这篇文章是不是想抢东哥的风头？

VSCode：对不起，东哥，我错了，好在你今天顺利回国了。其实我也想每天都去美国大学深造。