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