在 vite-vue3.x 中的使用 vscode monaco-editor 方法

# 开始安装

安装 monaco-editor 依赖

npm install monaco-editor --save

安装 vite-plugin-monaco-editor 插件，这个必须安装，不然会报错,vite-plugin-monaco-editor是一个简化 Monaco Editor 加载过程的 Vite 插件。

它使用了Vite 特定的 plugin hooks： configResolved, configureServer, transformIndexHtml。
它使用 esbuild 来绑定 node_modules/.monaco 目录中的Worker，通过server.middlewares http代理服务器为 bundle worker。

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

# 配置文件

在 vite.config.js 文件中配置如下：

import { defineConfig } from "vite";
import monacoEditorPlugin from "vite-plugin-monaco-editor"
export default defineConfig({
    plugins: [
        monacoEditorPlugin()
    ],
})

1
2
3
4
5
6
7

或者

// 强制预构建插件包
optimizeDeps: {
  include: [
    `monaco-editor/esm/vs/language/json/json.worker`,
    `monaco-editor/esm/vs/language/css/css.worker`,
    `monaco-editor/esm/vs/language/html/html.worker`,
    `monaco-editor/esm/vs/language/typescript/ts.worker`,
    `monaco-editor/esm/vs/editor/editor.worker`
  ], 
}

1
2
3
4
5
6
7
8
9
10

# 在 vue 中使用

添加容器

<div ref="main"></div>

导入所有功能

// import * as monaco from "monaco-editor";
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'

1
2
3

导入部分功能 import * as monaco from 'monaco-editor'是导入Monaco Editor的所有功能和支持语言。如果你只需要部门功能和支持语言：

// import * as monaco from "monaco-editor";
import "monaco-editor/esm/vs/editor/editor.all.js";
//import "monaco-editor/esm/vs/language/json/monaco.contribution";
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

1
2
3
4
5
6
7
8
9
10

使用部分

// 使用 - 创建 monacoEditor 对象
const editor = monaco.editor.create(this.$refs.main, {
  theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
  // value: '', // 默认显示的值
  autoIndex: true,
  language: "json", // 语言类型
  tabCompletion: "on",
  cursorSmoothCaretAnimation: true,
  minimap: {
    enabled: false,
  },
  formatOnPaste: true,
  mouseWheelZoom: true,
  folding: true, //代码折叠
  selectOnLineNumbers: true, // 显示行号
  wordWrap: "on", // 代码超出换行
  folding: true, // 是否折叠
  overviewRulerBorder: false, // 不要滚动条的边框
  foldingHighlight: true, // 折叠等高线
  foldingStrategy: 'indentation', // 折叠方式  auto | indentation
  showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
  disableLayerHinting: true, // 等宽优化
  emptySelectionClipboard: false, // 空选择剪切板
  selectionClipboard: false, // 选择剪切板
  automaticLayout: true, // 自动布局
  codeLens: false, // 代码镜头
  scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
  colorDecorators: true, // 颜色装饰器
  accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
  lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
  lineNumbersMinChars: 5, // 行号最小字符   number
  enableSplitViewResizing: false,
  readOnly: true //是否只读  取值 true | false
})

//Unexpected usage at EditorSimpleWorker.loadForeignModule 报错问题处理
//self.MonacoEnvironment = {
//  getWorker: function (_, label) {
//    console.log(label);
//    if (label === "json") {
//      return new jsonWorker();
//    }
//    new editorWorker();
//  },
//};
self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker()
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker()
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker()
    }
    if (['typescript', 'javascript'].includes(label)) {
      return new tsWorker()
    }
    return new EditorWorker()
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

常用方法


// 获取 编辑框中当前的值
const value = this.monacoEditor.getValue()

// 编辑 监听内容变化
this.monacoEditor.onDidChangeModelContent(() => {
  console.log('目前内容为：', this.monacoEditor.getValue())
})

editor.onDidChangeLanguage　　//语言改变事件

// 设置 data：想更新进去的值
this.monacoEditor.setModel(monaco.editor.createModel(data,'json'))

// 设置字体大小
editor.updateOptions({ fontSize: 12 });

// 设置语言
monaco.editor.setModelLanguage(editor.getModel(), 'html');

//设置主题
monaco.editor.setTheme('vs-light'); //"vs-light", "vs-dark", "hc-black"

// 强制刷新一次
editor.setValue(editor.getValue());

//其他
editor.trigger("anyString", "undo");

editor.trigger("anyString", "redo");

//格式化代码
editor.trigger("anyString", "editor.action.format");
//或者
editor.trigger("anyString", "editor.action.formatDocument");
//或者
editor.getAction('editor.action.formatDocument').run()  

editor.trigger("anyString", "actions.find");

//注销
editor.dispose();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 所有配置

官网API地址：https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html (opens new window)

    this.editor = monaco.editor.create(this.$refs.editor, {
      acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
      acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart" 
      accessibilityPageSize: 10, // 辅助功能页面大小 Number 说明：控制编辑器中可由屏幕阅读器读出的行数。警告：这对大于默认值的数字具有性能含义。
      accessibilitySupport: 'on', // 辅助功能支持 控制编辑器是否应在为屏幕阅读器优化的模式下运行。
      autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
      autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
      autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
      autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
      autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
      automaticLayout: true, // 自动布局
      codeLens: false, // 是否显示codeLens 通过 CodeLens，你可以在专注于工作的同时了解代码所发生的情况 – 而无需离开编辑器。 可以查找代码引用、代码更改、关联的 Bug、工作项、代码评审和单元测试。
      codeLensFontFamily: '', // codeLens的字体样式
      codeLensFontSize: 14, // codeLens的字体大小
      colorDecorators: false, // 呈现内联色彩装饰器和颜色选择器
      comments: {
        ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
        insertSpace: true // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
      }, // 注释配置
      contextmenu: true, // 启用上下文菜单
      columnSelection: false, // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
      autoSurround: 'never', // 是否应自动环绕选择
      copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
      cursorBlinking: 'Solid', // 光标动画样式
      cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
      cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标样式
      cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
      cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
      cursorWidth: 2, // <=25 光标宽度
      minimap: {
        enabled: false // 是否启用预览图
      }, // 预览图设置
      folding: true, // 是否启用代码折叠
      links: true, // 是否点击链接
      overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
      renderLineHighlight: 'gutter', // 当前行突出显示方式
      roundedSelection: false, // 选区是否有圆角
      scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
      readOnly: false, // 是否为只读模式
      theme: 'vs'// vs, hc-black, or vs-dark
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 参考资料

官方參考地址：https://microsoft.github.io/monaco-editor/ (opens new window)
GitHub地址：https://github.com/microsoft/monaco-editor (opens new window)

#Vue

上次更新: 2024/01/30, 00:35:17

← 国际化插件 vue-i18n 使用方法在 Vue 中如何使用 jsencrypt 实现 Rsa 进行加密→