Molerose

强大如你 Visual Studio Code
给大家介绍一款IDE(集成开发环境) - VSCode,个人感觉用起来不仅强大,而且还比较方便,VSCode 默认...
扫描右侧二维码阅读全文
14
2018/06

强大如你 Visual Studio Code

给大家介绍一款IDE(集成开发环境) - VSCode,个人感觉用起来不仅强大,而且还比较方便,VSCode 默认支持大量的主流编程语言,但如果你所使用的编程语言不包括在内,也可以通过下载扩展包来自动添加,下面就来大致的介绍下 VSCode 及其中一些好用的扩展~


多的介绍就不说了,如果想了解VSCode的发展史,可以自己去问度娘。

应用下载及环境介绍

博客中介绍的是 Visual Studio Code - Insiders ,我觉得除了扩展页面有点点不一样以外,其余的和蓝标应该差的不是很多吧(反正我一开始用的就是绿标,好像)

扩展推荐

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

这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。

  • HTML Snippets

超级实用且初级的 H5代码片段以及提示

  • HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式,新版已经支持scss文件检索

  • vscode-icon

让 vscode 资源树目录加上图标,必备良品!

  • beautify

格式化代码的工具

  • Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。

  • filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

  • Path Intellisense

自动路劲补全

  • HTMLHint

html代码检测

  • View In Browser

在浏览器中查看,只支持html文件,默认的快捷键Ctrl+F1,可以自定义修改

  • Easy LESS

LESS保存自动编译

  • Settings Sync

设置同步到github的插件(不多说,你们都懂的,插件随身携带还是很方便的)

主题推荐

此外,如果你所使用的编程语言不包括在内,也可以通过下载扩展包(Language and Framework Packs)来自动添加。

同时,你还可以添加一些像 React NativeVue 的相关 Web 开发插件包。

Last modification:June 15th, 2018 at 08:51 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 缝纫机

    我不强大,强大如我,就完了都混不下去了http://www.apolloshopnow.com/qd

  2. 一朵时光红

    好文章大家喜欢吗?

Leave a Comment