之前开发的过程中造了个轮子，后来才发现市面上已经有非常成熟的工具了，纯属重复造轮子，因此写下这篇文章，收集一些需求开发可以用到的工具库，避免大家重复造轮子。
1. 代码展示工具
如果想要实现代码展示/代码对比，可以采用 [@monaco-editor](Monaco Editor) ,简单的几行代码就可以实现代码预览/代码对比。其中可以生成右边的预览图、以及根据不同的语言生成类似于编辑器的效果，并具有不同的风格。
使用示例：
<ExtendedEditor
defaultValue={content}
theme="vs-dark"
height="600px"
defaultLanguage="json"
options={{
tabSize: 2,
fontSize: 14,
minimap: {
enabled: false,
},
readOnly: true,
}}
/>
另外如果只是想实现简单的代码预览，不需要有复杂的编辑/代码对比等待功能，可以直接带用<pre>[code]</pre> 去实现。
2. 图表工具
最近实现了 highcharts 跟 echarts 的迁移，仅此尽管echarts以及传播度很广了，这里对这两个图表库还是做个对比。
值的注意的是，我在使用的时候觉得 highcharts 对于图表缩放的功能是支持得很好的。
eCharts 缩放需要依赖工具库，比起 highcharts直接在图表上操作进行缩放，eCharts需要点击右上角的小工具才能进行缩放，我觉得相比起来是没那么方便的。
当然了，可以自己封装工具进行功能的实现，但我这里只是对官网示例的功能做比较。
可以highCharts对商用是需要授权的，为避免侵权，还是使用echarts吧。
其他方面暂时没发现有什么区别，等发现了再补充吧。
| highcharts | echarts | |
|---|---|---|
| 费用 | 非商业免费，商业需授权，代码开源。 | 可以免费使用，没有任何收费项 |
| 缩放功能的支持 | 较好 | 支持 |
通过这篇文章，希望大家在开发过程中能够尽量避免重复造轮子，选择已经成熟的工具库来提升开发效率。以上推荐的工具库只是开发过程中常用的一部分，未来我会继续补充其他实用的库和工具。如果你有其他好的工具推荐，欢迎留言分享！
