APP开发:前端类的15个必备 VSCode 插件

2018-05-20 12:44:04 APP开发网 5896

Visual Studio Code 是由微软开发一个运行于 Mac OS X、Windows Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。微软公司的开发者事业部总裁说过,”我们想让他们能够在他们习惯的平台上使用我们公司的产品,而不是非要迁徙到 Windows 上“。

   Visual Studio Code 提供了丰富的快捷键 [3]  。用户可通过快捷键 [Ctrl] + [K] + [S] (按住Ctrl键不放,再按字母K键和S键)调出快捷键面板,查看全部的快捷键定义。也可在面板中双击任一快捷键,为某项功能指定新的快捷键。一些预定义的常用快捷键包括:格式化文档(整理当前视图中的全部代码),[Shift] + [Alt] + [F];格式化选定内容(整理当前视图中被选定部分代码),[Ctrl] + [K] + [F];放大视图,[Ctrl] + [Shift] + [=];缩小视图,[Ctrl] + [Shift] + [-];打开新的外部终端(打开新的命令行提示符):[Ctrl] + [Shift] + [C]下面就来给大家介绍一下一些有趣的插件。

1. Quokka

Quokka是一个调试工具插件,它能根据正在编写的代码为用户提供实时的反馈。他的优点有:1.在使用 JSX TypeScript 项目中,它可以很快地运用起来2.配置很简单,并且能够预览变量的函数和计算值的结果。

2. Minify

    这是一款主要是用来压缩与合并的,包括JavaScript CSS 文件的应用程序该插件为用户提供了大量的自定义设置,以及自动压缩保存并导出为.min文件的选项它可以分别通过clean-css ,uglify-js html-minifier,与 JavaScriptCSS HTML 协同工作。

3. CSS Peek

   该插件可以用来追踪至样式表中 CSS 类和 ids 定义的地方具体的使用方法就是在 HTML 文件中右键单击选择器时,选择“ Go to Definition Peek definition ”选项,之后他就能给用户发送样式设置的 CSS 代码

4. Open-In-Browser

  这款插件是用来弥补VSCode 没有直接提供在浏览器中打开文件的内置界面的不足。该插件可以在在客户端(FirefoxChromeIE)中打开命令面板选项以及在快捷菜单里添加在默认浏览器查看文件选项,

5. SVG Viewer

  该插件是用于 Visual Studio 代码中添加了许多实用的 SVG 程序这样一来,用户就不需要离开编辑器,可以直接打开 SVG 文件查看它们并且,该插件中还包括用来转换为PNG 格式和生成数据 URI 模式的选项。

6. HTML Boilerplate

   使用HTML 模版插件可以解决用户在 HTML 新文件中需要重新编写头部和正文标签的麻烦。使用这个插件的时候,用户只需要在空文件中输入 html,并按 Tab 键,以直接生成干净的文档结构。

7. Faker

   该插件可以帮助使用者快速的插入用例数据,faker能够随机生成地址、姓名图像、电话号码,或者经典的乱数假文段落,并且每个类别还包含了各种子类别,使用起来十分方便,用户可以根据自己的需要来使用这些数据。

8.Prettier

 该插件是目前web开发中最受欢迎的代码格式化程序在用户安装了这个插件之后,就能够自动的运用Prettier并且可以将整个 JS CSS 文档快速格式化为统一的代码样式还有一个插件叫Prettier – Eslint他可以用来使用ESLint

9. Language and Framework Packs

  这个插件是用来扩充大量主流编程语言之外的编程语言。同时,用户还可以使用一些别的插件,比如React Native Vue 的相关 Web 开发插件包。

 

10. Color Info

这个插件是用于颜色的一个便捷插件,可以为用户提供在 CSS 中使用颜色的相关信息具体的使用方法就是在想要了解的颜色那里悬停光标,就可以预览色块中色彩模型的相关信息,比如HEXRGBHSL CMYK

11. Regex Previewer

   是一个用来进行实时测试正则表达式的实用工具使用该插件可以将其运用在任何打开的文件里,并且会标亮所有的匹配项。

12. TODO Highlight

   该插件可以在用户的代码里标记处所有的 TODO 注释这样对于用户来说就可以很容易的追踪任何一个没有完成的业务。在默认的情况下,该插件可以查找TODO FIXME 关键字用户也可以根据自己的需要,添加自定义表达式。

13. Change Case

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

14. Themes

   这是一个美化插件,该插件是一个主题插件,可以让用户选择自己喜欢的主题。

15. Icon Fonts

该插件能够在项目中添加图标字体支持超过 20 个热门的图标集,包括了 Font AwesomeIoniconsGlyphicons Material Design Icons

   以上就是对Visual Studio Code15个有趣插件的介绍


电话咨询
邮件咨询
在线地图
QQ客服