您的位置:首页 » 分类: HTML+CSS & JavaScript & 前端工具 & IDE 和 编辑器 » 文章: Visual Studio Code 必备插件,主题及语法提示

Visual Studio Code 必备插件,主题及语法提示

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

Visual Studio Code 是由微软开发的一款免费的,跨平台文本编辑器。由于其出色的性能表现和丰富的功能,它很快成为了开发者的最爱。

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

在浏览器中打开或预览 – Open-In-Browser

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

项目地址:Open-In-Browser

代码调试 – Quokka

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

项目地址:Quokka

Faker

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

项目地址:Faker

跳转到 CSS 定义行 – CSS Peek

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

项目地址:CSS Peek

HTML 模板 – HTML Boilerplate

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

项目地址:HTML Boilerplate

格式化代码 代码美化 – Prettier

Prettier 是现在 Web 开发中最流行的代码格式化程序。它允许您的团队保持整齐统一的代码结构。此扩展可以自动应用 Prettier 并快速格式化整个 JS 和 CSS 文档。

项目地址:Prettier

颜色信息及转换 – Color Info

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

项目地址:Color Info

SVG 预览 – SVG Viewer

此插件是一款可以在 Visual Studio Code 中查看 SVG 的实用程序。它可以渲染 SVG 文件,查看预览而无需离开编辑器。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。

项目地址:SVG Viewer

TODO 高亮 – TODO Highlight

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

项目地址:TODO Highlight

图标字体 – Icon Fonts

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

项目地址:Icon Fonts

代码压缩 – Minify

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

项目地址:Minify

命名格式转换 – Change Case

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

项目地址:Change Case

正则表达式预览 – Regex Previewer

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

项目地址:Regex Previewer

语言和框架 – Language and Framework Packs

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

主题及配色方案 – Themes

当然,所有扩展中最重要的是主题。你每天都在看你的 VSCode 编辑器,为什么不让它变得更漂亮呢?有许多定制插件可以改变颜色方案和侧边栏中的图标。以下是我们的一些最爱:

Visual Studio Code 相关热文

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

6 条评论 - 关于 “Visual Studio Code 必备插件,主题及语法提示

发表评论

电子邮件地址不会被公开。 必填项已用*标注