Monaco-Editor配置

呆呆bg

已于 2024-03-20 10:23:20 修改

阅读量1.9k

点赞数

分类专栏： vue vue3 文章标签：前端 vue vue.js javascript

于 2022-08-25 10:27:03 首次发布

本文链接：https://blog.csdn.net/weixin_45551411/article/details/126519316

版权

vue 同时被 2 个专栏收录

14 篇文章 3 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

官方地址
https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html

基础配置

    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
    })

语言

 language: {
  'apex': 'apex',
  'azcli': 'azcli',
  'bat': 'bat',
  'c': 'c',
  'clojure': 'clojure',
  'coffeescript': 'coffeescript',
  'cpp': 'cpp',
  'csharp': 'csharp',
  'csp': 'csp',
  'css': 'css',
  'dockerfile': 'dockerfile',
  'fsharp': 'fsharp',
  'go': 'go',
  'graphql': 'graphql',
  'handlebars': 'handlebars',
  'html': 'html',
  'ini': 'ini',
  'java': 'java',
  'javascript': 'javascript',
  'json': 'json',
  'kotlin': 'kotlin',
  'less': 'less',
  'lua': 'lua',
  'markdown': 'markdown',
  'msdax': 'msdax',
  'mysql': 'mysql',
  'objective-c': 'objective-c',
  'pascal': 'pascal',
  'perl': 'perl',
  'pgsql': 'pgsql',
  'php': 'php',
  'plaintext': 'plaintext',
  'postiats': 'postiats',
  'powerquery': 'powerquery',
  'powershell': 'powershell',
  'pug': 'pug',
  'python': 'python',
  'r': 'r',
  'razor': 'razor',
  'redis': 'redis',
  'redshift': 'redshift',
  'ruby': 'ruby',
  'rust': 'rust',
  'sb': 'sb',
  'scheme': 'scheme',
  'scss': 'scss',
  'shell': 'shell',
  'sol': 'sol',
  'sql': 'sql',
  'st': 'st',
  'swift': 'swift',
  'tcl': 'tcl',
  'typescript': 'typescript',
  'vb': 'vb',
  'xml': 'xml',
  'yaml': 'yaml'
},

主题选择与修改

theme： {
  base:'vs',
  inherit: true,
  colors:{
    "activityBar.background": "#580000", //活动栏背景色
 
    "tab.inactiveBackground": "#300a0a", //非活动选项卡的背景色
 
    "tab.activeBackground": "#490000",//活动选项卡的背景色。
 
    "sideBar.background": "#330000",//侧边栏背景色。
 
    "statusBar.background": "#700000",//工作区打开时状态栏的背景色。
 
    "statusBar.noFolderBackground": "#700000",//没有打开文件夹时状态栏的背景色。
 
    "statusBarItem.remoteBackground": "#c33",//状态栏上远程指示器的背景色。
 
    "editorGroupHeader.tabsBackground": "#330000",//启用选项卡时编辑器组标题的背景颜色。
 
    "titleBar.activeBackground": "#770000",//窗口处于活动状态时的标题栏背景色。
 
    "titleBar.inactiveBackground": "#772222",//窗口处于非活动状态时的标题栏背景色。
 
    "selection.background": "#ff777788",//工作台所选文本的背景颜色。(不适用于编辑器。)
 
    // editor
 
    "editor.background": "#390000",//编辑器背景色。
 
    "editorGroup.border": "#ff666633",//将多个编辑器组彼此分隔开的颜色。
 
    "editorCursor.foreground": "#F8F8F8",//编辑器光标颜色。
 
    "editor.foreground": "#F8F8F8",//编辑器默认前景色。
 
    "editorWhitespace.foreground": "#c10000",//编辑器中空白字符的颜色。
 
    "editor.selectionBackground": "#750000",//编辑器所选内容的颜色。
 
    "minimap.selectionHighlight": "#750000",//编辑器选区在迷你地图中对应的标记颜色。
 
    "editorLineNumber.foreground": "#ff777788",//编辑器行号的颜色。
    
    "editorLineNumber.activeForeground": "#ffbbbb88",//编辑器活动行号的颜色
 
    "editorWidget.background": "#300000",//编辑器组件(如查找/替换)背景颜色。
 
    "editorHoverWidget.background": "#300000",//编辑器悬停提示的背景颜色。
 
    "editorSuggestWidget.background": "#300000",//建议小组件的背景色。
 
    "editorSuggestWidget.border": "#220000",//建议小组件的边框颜色。
 
    "editor.lineHighlightBackground": "#ff000033",//光标所在行高亮内容的背景颜色。
    "editor.hoverHighlightBackground": "#ff000044",//在下面突出显示悬停的字词。
    "editor.selectionHighlightBackground": "#f5500039",//具有与所选项相关内容的区域的颜色。
    "editorLink.activeForeground": "#FFD0AA",//活动链接颜色。
    "peekViewTitle.background": "#550000",//速览视图标题区域背景颜色。
    "peekView.border": "#ff000044",//速览视图边框和箭头颜色。
    "peekViewResult.background": "#400000",//速览视图结果列表背景色。
    "peekViewEditor.background": "#300000",//速览视图编辑器背景色。
    // UI
    "debugToolBar.background": "#660000",//调试工具栏背景颜色。
    "focusBorder": "#ff6666aa",//焦点元素的整体边框颜色。
    "button.background": "#833",//按钮背景色。
 
    "dropdown.background": "#580000",//下拉列表背景色。
 
    "input.background": "#580000",//输入框背景色。
 
    "inputOption.activeBorder": "#cc0000",//输入字段中已激活选项的边框颜色。
 
    "inputValidation.infoBackground": "#550000",//输入验证结果为信息级别时的背景色。
 
    "inputValidation.infoBorder": "#DB7E58",//严重性为信息时输入验证的边框颜色。
 
    "list.hoverBackground": "#800000",//使用鼠标移动项目时，列表或树的背景颜色。
 
    "list.activeSelectionBackground": "#880000",//使用鼠标移动项目时，列表或树的背景颜色。
 
    "list.inactiveSelectionBackground": "#770000",//已选项在列表或树非活动时的背景颜色。
 
    "list.dropBackground": "#662222",//使用鼠标移动项目时，列表或树进行拖放的背景颜色。
 
    "list.focusBackground": "#660000",//焦点项在列表或树活动时的背景颜色。
 
    "list.highlightForeground": "#ff4444",//在列表或树中搜索时，其中匹配内容的高亮颜色。
    
    "pickerGroup.foreground": "#cc9999",//快速选取器分组标签的颜色。
 
    "pickerGroup.border": "#ff000033",//快速选取器分组标签的颜色。
 
    "badge.background": "#cc3333",//Badge 背景色。Badge 是小型的信息标签。
 
    "progressBar.background": "#cc3333",//表示长时间操作的进度条的背景色。
 
    "errorForeground": "#ffeaea",//错误信息的整体前景色。
    
    "extensionButton.prominentBackground": "#cc3333",//扩展中突出操作的按钮背景色
 
    "extensionButton.prominentHoverBackground": "#cc333388"//扩展中突出操作的按钮被悬停时的颜色
  }
}

自动格式化

// 写法1
editor.trigger('anyString', 'editor.action.formatDocument');//自动格式化代码
editor.setValue(editor.getValue());//再次设置
// 写法2
editor.getAction('editor.action.formatDocument').run();//自动格式化代码
editor.setValue(editor.getValue());//再次设置
//写法不同目的是一样的，上面那个自动格式化代码的操作，就是上边方法截图的那个// 这个写法需要注意的情况是

  // MonacoEditord的配置只能是：readOnly: false,
　// 只读状态下无法生效