在vue项目中使用monaco-editor插件实现代码编辑器功能(以及sql格式化功能)

**

记一次vue-cli2项目中使用monaco-editer编辑器插件

**

1、使用npm安装依赖

npm install monaco-editor --save
npm install monaco-editor-webpack-plugin --save-dev

2、在webpack.base.conf.js如下

在这里插入图片描述在这里插入图片描述

3、在使用过程如下

在vue项目中使用monaco-editor插件实现代码编辑器功能(以及sql格式化功能)_第1张图片
在vue项目中使用monaco-editor插件实现代码编辑器功能(以及sql格式化功能)_第2张图片

格式化功能

使用了sql-formatter插件
https://www.npmjs.com/package/sql-formatter
方法如下:
在vue项目中使用monaco-editor插件实现代码编辑器功能(以及sql格式化功能)_第3张图片

效果图:
在vue项目中使用monaco-editor插件实现代码编辑器功能(以及sql格式化功能)_第4张图片

你可能感兴趣的:(工作记录,monaco-editor,monaco-editor,编辑器插件,sql-formatter)