TUIEditor插件扩展

Posted 2023-04-28

参考技术A 前言
随着markdown越来越受欢迎，也出现了很多不错的工具，比如本篇文章就是使用了markdown写法。
tui.editor就是一款不错的markdown编辑器；由于之前项目里已经集成了tui.editor，但是仅仅靠自带的一些功能还不足以算得上强大，所以就在tui.editor基础之上再次集成了markMap插件和mermaid插件；
markMap：是一款思维导图插件，当然也是支持markdown写法的，除此之外还支持json、字符串等写法；
mermaid ：主要是看中了它在图表上的能力，比如精美的流程图、甘特图、时序图等；包括印象笔记都在用；

首先在需要的页面引入,这部分不多说了，具体可参考 tui.editor

需要注意的是这边的扩展有3个，即 exts = ['mermaid','mindmap','uml']；

可参考 markMap 配置；

其实这部分真的是很尴尬很尴尬，tui.editor官方文档明明说 addButton()这个API已经弃用，所以我就准备使用最新提供的insertItem(),但是非常奇怪的是控制台报错不能插入item，后来还是使用了被弃用的API，而且连官方示例使用的也是被弃用的addButton(),,尴尬！如果你有更好的办法，请在评论告诉我一下哦！

请忽略一下这个反斜杠，真的不知道怎么转义了😢

属于第几级别，就在前一级别后面加一个#即可，很容易上手。

效果图类似于：

以上只是流程图的写法，其实mermaid真的很强大，具体写法就参考 mermaid官方文档 吧
最后再啰嗦一句，该篇tui.editor的版本有点老，好像是1.3.x;
升版本的话可参考： 有关于tui.editor升版

八个提高效率的VSCode必备扩展插件

参考技术A

Visual Studio Code 是用于构建当前 Web 应用程序的源代码编辑器。它是一个免费的开源管理器。它支持可用于 Web 应用程序改进的各种增强功能。这里是提高工作效率的10个必备VSCode 扩展：

1. 代码拼写检查器

一个基本的拼写检查器，适用于驼峰式代码。

此拼写检查器的目标是帮助捕获常见的拼写错误，同时将误报数量保持在较低水平。

2. Compareit

Compareit 扩展可帮助您比较两个文件，您可以从当前项目和计算机或剪贴板上的其他目录中进行选择。

3. stepsize

有时您会遇到技术债务或其他应该修复的技术问题。您可能没有时间立即修复它，但您想让它可见并提出问题。

Stepsize 允许您为代码添加书签、直接从编辑器跟踪技术债务以及创建 TODO。它还允许您与您的团队成员协作进行维护和重构工作。

直接从 VSCode 报告技术债务

4. WakaTime

WakaTime 允许您查看从您的编程活动自动生成的指标、见解和时间跟踪。

您将准确了解编码花费的时间，因为它会在您开始和停止输入时自动跟踪，并提供项目、文件、分支、提交/PR、功能等的详细指标。

5. Quokka.js

Quokka.js 是用于快速 JavaScript / TypeScript 原型设计的开发人员生产力工具。运行时值会在您键入时更新并显示在您的代码旁边。它使 JavaScript / TypeScript 的原型设计、学习和测试速度更快。

6. Chrome 调试器

在 Chrome 浏览器或任何其他支持 Chrome 调试器协议的目标中调试您的 JavaScript 代码

7. 剪贴板 历史

保留复制项目的 历史 记录，并在需要时重新粘贴。

8. 配置文件切换器

允许您在您创建的不同配置文件之间切换。此扩展允许您表征各种设置配置文件，而无需在它们之间进行太多拉伸切换。

以上插件下载：八个提高效率的VSCode必备扩展插件