vite monaco-editor 使用记录

什么是Monaco Editor？

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，

而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，

他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，

交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，

monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

 

1、安装npm包：npm i monaco-editor

 

2、xx.vue:

<script setup lang="ts">
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';

// 
// MonacoEditor start
//

// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_: string, label: string) {
    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()
  },
}
let editor: monaco.editor.IStandaloneCodeEditor;

const editorInit = () => {
    nextTick(()=>{
        monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
            noSemanticValidation: true,
            noSyntaxValidation: false
        });
        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
            target: monaco.languages.typescript.ScriptTarget.ES2016,
            allowNonTsExtensions: true
        });
        
        !editor ? editor = monaco.editor.create(document.getElementById('codeEditBox') as HTMLElement, {
            value: state.insertArea, // 编辑器初始显示文字
            language: 'html', // 语言支持自行查阅demo
            automaticLayout: true, // 自适应布局  
            theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
            foldingStrategy: 'indentation',
            renderLineHighlight: 'all', // 行亮
            selectOnLineNumbers: true, // 显示行号
            minimap:{
                enabled: false,
            },
            readOnly: false, // 只读
            fontSize: 16, // 字体大小
            scrollBeyondLastLine: false, // 取消代码后面一大段空白 
            overviewRulerBorder: false, // 不要滚动条的边框  
        }) : 
        editor.setValue("");
        // 监听值的变化
        editor.onDidChangeModelContent((val:any) => {
            state.insertArea = editor.getValue();
        })
    })
}
//
// MOnacoEditor end
//
</script>

 

3、vite.config.ts

  // 强制预构建插件包
  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`
    ], 
  },

 

4、常用方法

editor.setValue(newValue)

editor.getValue()

editor.onDidChangeModelContent((val)=>{ //监听值的变化  })

editor.getAction('editor.action.formatDocument').run()    //格式化代码

editor.dispose()    //销毁实例

editor.onDidChangeOptions　　//配置改变事件

editor.onDidChangeLanguage　　//语言改变事件

 

 

 5、package.json

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^0.2.6",
    "@types/node": "^17.0.23",
    "axios": "^0.24.0",
    "element-plus": "^1.3.0-beta.9",
    "monaco-editor": "^0.33.0",
    "path": "^0.12.7",
    "sortablejs": "^1.14.0",
    "unplugin-auto-import": "^0.6.6",
    "unplugin-vue-components": "^0.18.3",
    "vant": "^3.4.1",
    "vite": "^2.7.13",
    "vite-plugin-style-import": "^1.4.1",
    "vue": "^3.2.25",
    "vue-router": "^4.0.12",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "typescript": "^4.4.4",
    "vue-tsc": "^0.29.8"
  }
}