花里胡哨的 VS Code 插件推荐

上一篇地表最强编辑器中说到 VS Code 作为一个编辑器,拥有非常便捷且丰富的功能。

今天还有一些东西要补充:VS Code 也是支持 Emmet 语法的,需要在首选项配置中将emmet.triggerExpansionOnTab设置为 true 值,可以使用图示的两种方式打开此功能:



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板

vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_02

VS Code 默认不会保存对文件所做的修改,需要手动保存。可以在设置里面更改保存的方式,如下图:



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_03

以及 VS Code 是默认不会对粘贴进来的文本进行转义,但 WebStorm 可以。(VS Code 自动转义的插件小编没有找到,欢迎找到了小伙伴在评论区留言)

md 插件篇

日常工作大家写文档免不了会使用 markdown 语言,除了简洁易用的 Typora,VS Code 也是支持写 md 文件的。VS Code 自带 md 文件的预览,但是看起来有一丢丢费劲~

Markdown Preview Enhanced



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_04

其功能就是预览 md 文件,但是还支持更多高阶 idea:支持数学公式排版写 PPT生成流程图code chunk 等。



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_05

图片来自官网

code chunk 是一个比较强大的功能,可以支持执行代码块内的代码!(感兴趣同学自行百度)

官网中文说明在这里(https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/)

Markdown PDF

一个能把 md 文件转为 pdf、html、png、jpeg 等格式的插件。



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_06

安装好此插件之后,在需要操作的 md 文件中,右键选择需要转出的格式:



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_07

转出的文件在当前 md 文件存在的文件夹里,此插件与上面那个插件结合,四舍五入可以用 VS Code 写毕业论文了,直接输出 pdf 版本发给老师。(忘了说,上面那个插件还支持文档目录)

花里胡哨Rainbow篇

Rainbow Tags



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_08

顾名思义就是彩虹色的标签。包括三种模式:文字颜色模式背景颜色模式边框颜色模式



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_09

使用:安装此插件,在setting.json文件加上:

"rainbowTags.allowEverywhere":

颜色可以自定义哦,模式也可以的哈~

Rainbow Brackets



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_10

顾名思义就是彩虹色的括号,在写 js 文件的时候很适合用,不用特别去检查每一层的包裹关系。



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_11

indent-rainbow



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_12

一个便于对齐缩进的插件,强迫症友好~



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_13

Image preview



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_14

预览图片的工具,假如图片是一个链接,可以从侧边栏预览图片(或者鼠标悬浮的时候也会显示):



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_15

SVG Viewer



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_16

一个预览 svg 文件的插件,安装之后在 setting.json 文件中设置:

// Show Transparency Grid

如虎添翼 JS 篇

Path Intellisense



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_17

一个可以帮你记住路径名的便捷工具。这个插件将为你节省大量的时间,不再浪费时间在寻找正确的目录上。

Live Server



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_18

实现静态、动态页面的实时预览,保存就能看见页面更新,不需要手动去刷新。

JavaScript (ES6) Code Snippets



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_19

为空闲的开发人员提供了一些非常有用的 JavaScript 代码片段。它将标准的 JavaScript 调用绑定到简单的热键中。提高工作效率~

一个小技巧:在扩展里面搜索snippets,无论使用哪种技术栈,都会有对应的代码片段插件,例如ES7 React/Redux/GraphQL/React-Native snippets

Visual Studio Intellicode



vscode MongoDB 显示工具 vscode emmet插件_vscode emmet默认模板_20

Visual Studio IntelliCode 扩展为 Visual Studio Code 中的 Python,TypeScript / JavaScript 和 Java 开发人员提供了 AI 辅助的开发功能,并基于对代码上下文的理解和机器学习的结合获得了见解。

小结:上文说到用VS Code写论文,也不是不可以,配合Latex系列插件,你值得拥有~