Image placeholder

前端开发必备的15个 Visual Studio Code 插件

Image placeholder
F2EX 2017-07-30

Visual Studio Code 是由微软开发的一款免费的跨平台文本编辑器。由于其卓越的性能和丰富的功能,很快受到开发者的追捧。

就像大多数 IDE 一样,VSCode 同样有一个包含数千种不同功能的插件扩展市场。为了帮助您挑选出值得下载的插件,我们收集了最有用和最有趣的扩展。


1. Open-In-Browser

VSCode 不能通过内置界面来直接在浏览器中打开文件。此扩展将添加一个 [Open With Default Browser] 选项到右键菜单,使您能够在的浏览器(Firefox,Chrome,IE)中打开文件。


2. Quokka

Quokka 是一个调试工具,可以为您正在撰写的代码提供实时反馈。它可以对变量的函数和计算值的结果实时预览。该扩展易于配置,对于使用 JSX 或
TypeScript 的项目可直接使用。


3. Faker

使用流行的 Faker JavaScript 库快速插入占位符数据。您可以生成随机的名称,地址,图像,电话号码或经典的乱数假文段落。每个类别都有各种子类别,因此您可以随心所欲的使用这些数据。


4. CSS Peek

通过此扩展,您可以跟踪样式表中 CSS 类和 id 的样式。当您右键单击 HTML 文件中的选择器时,选择“Go to Definition”和“Peek”将会直接带您跳转到相对应的 CSS 代码。


5. HTML Boilerplate

HTML 模板扩展将不必手动写入新的 HTML 文档的头部和正文标签。只需在空文件中输入 html ,按 Tab 键即可生成干净的文档结构。


6. Prettier

Prettier 是现在 Web 开发中最流行的代码格式化程序。它允许您的团队保持整齐统一的代码结构。此扩展可以自动应用 Prettier 并快速格式化整个 JS
和 CSS 文档。如果你也想混合使用 ESLint ,可使用另外一个插件 Prettier – Eslint


7. Color Info

一个轻量级的小插件,可提供有关 CSS 中使用的颜色的各种信息。通过将鼠标悬停在颜色代码处,就可以看到颜色的预览,以及有关其转换为所有格式(hex,rgb,hsl和cmyk)的信息。


8. SVG Viewer

此扩展是一款可以在 VSCode 中查看 SVG 的实用程序。它可以渲染 SVG 文件,查看预览而无需离开编辑器。还可将 SVG 转换为 PNG 和生成 html 数据方案。


9. TODO Highlight

此工具标记您代码中的所有 TODO 注释,以便在推送到生产环境之前轻松跟踪任何未完成的业务。默认情况下,它会查找 TODO 和 FIXME 关键字,但您也可以添加自定义表达式。


10. Icon Fonts

在您的项目(或从CDN)中添加图标字体,自动对图标本身的类名进行提示。该扩展支持超过20个流行的图标集,包括 Font Awesome ,Ionicons ,
Glyphicons 和 Material Design Icons 。


11. Minify

用于压缩代码的扩展。它提供了大量的自定义设置和自动压缩保存并导出到.min文件的选项。 Minify 分别通过 uglify-js,clean-css 和 html-minifier 对 JavaScript ,CSS 和 HTML 进行压缩。


12. Change Case

此插件用来转换文本。可直接使用,只能进行小写和大写转换。此插件添加了更多用于修改字符串的命令,包括camelCase(骆驼拼写法),kebab-case(短横线命名),snake_case(下划线命名),CONST_CASE(全大写命名)等。


13. Regex Previewer

用于实时测试正则表达式的实用工具。它通过将正则表达式模式应用于任何打开的文本文件,突出显示所有匹配项。


14. Language and Framework Packs

VSCode 支持大量语言。如果您使用的编程语言不包括在内,那么您可以下载这个扩展包,它将添加自动填充,适当的缩进和其他实用功能。还有对 Web 前端框架,如 react nativevue 的语言包支持。


15. Themes

当然,所有扩展中最重要的就是主题。你每天都会看着你的 VSCode 编辑器,为什么不让它更漂亮?有大量的定制插件可以更改配色方案和侧边栏中的图标。

原文:https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code


2017-09-01