| 打造VS Code(支持Markdown/UML/脑图/代码模板) | 您所在的位置：网站首页 › xmind注释 › 打造VS Code(支持Markdown/UML/脑图/代码模板) |
打造VS Code(支持Markdown/UML/脑图/代码模板)
|
文章目录
Markdown脑图UMLMD 中插入 UML代码模板mermaid 语法小结
Visual Studio Code是一个文本编辑器，除了写代码和编辑普通文本外，借助插件还可以实现一些常用的图形化功能。下面介绍下，在 VS Code 中支持以下几种常用的功能： Markdown思维导图UML MarkdownMarkdown 是一种轻量级的文本标记语言，使用简单符号即可编辑出带有丰富格式的内容，让编辑者专注于内容本身，而不用花费太多额外精力去调整文本格式。CSDN、简书、Github等网站都支持 Markdown 格式。语法参考 要在 VS Code 中支持 Markdown 格式，推荐安装以下插件： Markdown All in One文件后缀名保存为.md，会自动预览，也可以用快捷键 ctrl+shift + v 显示预览。 以下内容是在网上找的一篇讲 Markdown 格式的示例文档，文档本身用也的 Markdown 格式，在 VS Code 中的显示效果如下： 为了更好的支持 Markdown 格式，另外推荐两个选装插件： Markdownlint Markdown 语法格式检测和语法错误提示及修复建议Markdown Preview Enhanced 显示功能增强本文也是用 VS Code 书写 2023/6/29补充 Markdown 是 HTML 的子集，不支持的内容还可以直接使用 HTML 写，下面是一个复杂表格的例子。 列名1 列名2 列名3 行首1 合并列2-3 行首2-3 列名2 列名3 列名2 列名3生成的效果如下： 列名1列名2列名3行首1合并列2-3行首2-3列名2列名3列名2列名3 脑图思维导图又叫脑图，是一种图形化思维的工具。百度脑图相信很多人都用过，推荐以下插件，在 VS Code 中画思维导图，体验跟百度脑图一样，这个插件叫： vscode-mindmap文件后缀名以保存为.km，会自动显示，也可以用快捷键ctrl/cmd + m显示。跟 Markdown 不一样，思维导图的编辑，是在图形化的界面中，不需要写文本。下面是我用这个插件整理的算法与数据结构的知识点，也分享出来：
可以导出成图片： UML 即 统一建模语言，是一种面向对象分析和设计的建模工具，广泛使用的有时序图和类图。利用插件，也可以在 VS Code 中画 UML 图。PlanUML是一个开源的 UML 图绘制库，可以使用文本描述，绘制出对应的 UML 图，非常适合程序员使用。在 VS Code 中支持 PlantUML，需要安装插件： PlantUML同时，还必须安装： Java 环境(下载地址)。Graphviz-Dot。配置环境变量如下：
将文件名以 *.pu, *.puml后缀结尾，即可使用PlantUML 语法画图，使用快捷键 Alt+D 编译预览。 下面是一个简单的时序图示例： @startuml test == build == Main -> Builder: createEntity() Builder -> EntityFactory: create() EntityFactory -> Entity: constructor() == run == Main -> Main: update() Main -> Entity: update() Entity -> Entity: render() Entity -> Entity: emitEvent(EVENT_RENDER) Entity --> Main: onRender() @enduml
默认内容是一个简单的示例，参照例子，添加自己的模板，如 { // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "ts file template": { "prefix": "ts", "body": [ "", "", "/**", " * ${2: description}", " *", " * @export", " * @class ${1:ClassName}", " * @author xuld", " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", " */", "", "export class ${1:ClassName} extends $3", "{", " $0", "}", ], "description": "my typescript file template" }, "constructor": { "prefix": "con", "body": [ "constructor()", "{", " $0", "}", ], "description": "my typescript constructor template" }, "ts region template": { "prefix": "re", "body": [ "//#region ${1:setter getter}", "$0", "//#endregion ${1:setter getter}", ], "description": "my typescript region template" }, "getter setter": { "prefix": "gs", "body": [ "public get ${1:attrName}(): ${2:Type}", "{", " return this._${1:attrName};", "}", "public set ${1:attrName}(value: ${2:Type})", "{", " this._${1:attrName} = value;$0", "}", ], "description": "my typescript getter setter template" }, "singleton instance": { "prefix": "ins", "body": [ "private static _instance: ${1:ClassName} = null;", "public static get instance(): ${1:ClassName}", "{", " if (this._instance == null)", " {", " this._instance = new ${1:ClassName}();", " }", " return this._instance;", "}", ], "description": "my typescript singleton instance template" }, }配置说明： json 的 key，简单的功能描述json 的 value，是配置具体的值 prefix ，输入之后弹窗自动补全的文本body，补全的内容，其中 $0 表示 按tab建最后停留的位置$1 表示默认鼠标停留的位置$n 表示按tab键之后依次停留的位置${n-内容}，表示tab键移动时选中的文本，可以有多个，会同时选中支持变量，如： $CURRENT_YEAR 年$CURRENT MONTH 月$CURRENT_DATE 日 description 功能的详细描述 使用示例，比如如上配置，输入 ts 时，会出现提示： 按enter键，自动补全，按tab键可以在配置$n的位置自动切换，如下：
PlantUML 不支持甘特图，饼状图等，脑图也不是很好用，mermaid 可以作为补充，支持： 甘特图：使用 gantt 关键字，具体用法后文有示例饼状图：使用 pie 关键字，具体用法后文示例流程图：使用 graph 关键字，也可以用来画脑图序列图：使用 sequenceDiagram 关键字类图：使用 classDiagram 关键字状态图：使用 stateDiagram 关键字用户旅程图：使用 journey 关键字语法说明 甘特图 2014-01-05 2014-01-12 2014-01-19 2014-01-26 2014-02-02 2014-02-09 2014-02-16 A task Task in sec another task Another task Section Another A Gantt Diagram饼状图 40% 46% 9% 5% Key elements in Product X Calcium Potassium Magnesium Iron脑图（流程图） 语法 graph 方向描述 图表中的其他语句...方向 方向描述 方向意义翻译TBfrom Top to Bottom从上到下BTfrom Bottom to Top从下到上RLfrom Right to Left从右到左TBfrom Left to Right从左到右节点 节点定义 表述说明id[文字]矩形节点id(文字)圆角矩形节点id((文字))圆形节点id>文字]右向旗帜状节点id{文字}菱形节点连线 节点间的连线 表述说明>添加尾部箭头-不添加尾部箭头–单线–text–单线上加文字==粗线==text==粗线加文字-.-虚线-.text.-虚线加文字节点的文字中包含标点符号，需要时用双引号包起来 子图表 subgraph 子图表名称 子图表中的描述语句... end脑图示例 矩形 YES NO 边长是否相等 矩形 正方形 长方形 形状 圆形 小结VS Code 本身只是一个文本编辑工具，通过丰富的插件拓展了很多实用的功能，支持了 Markdwon、思维导图和UML图，基本上能满足日常所需的全部功能。 |
可以切换各种不同的显示样式： 
也可以选择不同的配色： 
缺点是不会自动报错，按快捷键 ctrl/cmd+s保存。
下面是一个类图的示例：
【本文地址】