monaco-editor+vue2+ts实现sql编辑器

原创

已于 2023-02-22 15:04:30 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#sql #编辑器 #javascript

于 2023-02-22 15:03:37 首次发布

本文介绍了如何利用MonacoEditor，一个基于VSCode的开源代码编辑器，在浏览器环境中创建一个支持SQL语言的编辑器。文章详细阐述了编辑器的初始化、配置、代码补全功能的实现以及自定义主题和代码格式化的步骤。此外，还提到了在Vue项目中配置MonacoWebpackPlugin来支持SQL语言。

1.简介

Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。目前无可读的中文文档。官网为api和案例。
官网：monaco-editor
github：monaco-editor|github|

2.实现

安装：npm i monaco-editor; // 我使用版本：0.30.1
npm i sql-formatter; // 我使用版本：10.7.2
npm i monaco-editor-webpack-plugin // 我使用版本：6.0.0
如有报错建议更换版本；

import { format } from 'sql-formatter';
import * as monaco from 'monaco-editor';

// 初始化
	init() {
		const _this = this;
		this.monacoEditor = monaco.editor.create(
			this.$refs.sqlCompiler as HTMLElement,
			{
				value: this.code,
				readOnly: this.readOnly, // 是否只读（true：不可编辑，false：可编辑）
				language: 'sql', // 语言
				theme: 'vs', // 主题
				tabSize: 2,
				scrollBeyondLastLine: false,
				automaticLayout: true, // 自动布局
				minimap: {
					// 关闭代码缩略图
					enabled: false, // 是否启用预览图