1.什么是Monaco Editor？Monaco Editor

微軟之前有個項目叫做Monaco?Workbench，后來這個項目變成了VSCode，而Monaco Editor（就是從這個項目中成長出來的一個web編輯器，他們很大一部分的代碼（monaco-editor-core）都是共用的，所以monaco和VSCode在編輯代碼，交互以及UI上幾乎是一摸一樣的。

VS Code(基于electron) 包含了文件管理、版本控制、插件等功能，是一款桌面軟件。

Monaco Editor （基于瀏覽器）可以看作是一個編輯器控件，只提供了基礎的編輯器與語言相關的接口，可以被用于任何基于 Web 技術構建的項目中(不支持移動瀏覽器/移動 Web 框架)。

2.基礎部件

Monaco Editor 的核心功能與組件和 VS Code 基本一致，它們基本上都包含下圖中這些小部件。

行號

Overlay Widget(覆蓋窗口部件)，可以渲染任意的內容小部件，能選擇放置在頂部、底部或編輯器中間

ViewLine，每一行都表示一個 ViewLine

Decorations 裝飾塊，可以指定某個位置的代碼塊以何種樣式呈現，例如修改其背景色、前景色等

Content Widget（內容部件），與 Overlay Widget 類似，但可以基于行、列指定其位置。

View Zone（查看區域）,?與 Overlay、Content Widget 不同，它可以插入到特定的行之間將其撐開.

除了這些標配的部件之外，Monaco 還支持通過 Decorations API 來添加更多的裝飾，例如版本控制中為修改過的行號添加一個色塊，又或者在調試狀態下顯示斷點信息等。

3.基礎編輯功能

基本語法著色，多光標（ctr +shift + alt）

列框選擇（shift + alt）

高級查找和替換(ctr + f),

格式化（shift + alt + F),

代碼折疊

代碼導航： 轉到定義（ctr），類型定義, 查看引用等。

智能感知： 代碼提示，補全， 驗證功能

diff Editor: 差異編輯器

4. 語言支持

內置語言：javascript, css , dart, less, markdown, typescript, mysql, objective-c, python,? scheme, shell,sql,vb, xml,json,等

自定義：

Monaco 本身只是一個文本編輯器，對于不同編程語言的基礎支持（即高亮）則需要通過注冊語言規則的方式來實現，Monaco 默認使用了名為?Monarch?的高亮系統（而 VS Code 使用的則是?Textmate?）（支持設置與vs code 一致的高亮方案， 參考 monaco-editor-textmate）

Monarch 規定了語言需要包含的關鍵字、類型、操作符，以及 Tokenizer。Tokenizer 是一組正則表達式，表示以何種規則來識別這些關鍵字以及括號、注釋塊，Monarch 將會依照正則表達式的配置來匹配每個 Token，并為之渲染對應的主題色。

5. 項目使用

• 安裝依賴

npm install monaco-editor

• ?組件引入 (按需引入， 全量引入)

// 按需引入 import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'; // 引入javascript 語言 import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController' // 搜索控件// 全量引入 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api' // vue2 項目中 import * as monaco from 'monaco-editor' // vue3 項目中

• ?實例化

let options: monaco.editor.IStandaloneEditorConstructionOptions = {value: '', // 初始顯示文字language: 'typescript', // 語言支持theme: 'vs', // 主題色官方自帶： vs, hc-black , vs-darkautomaticLayout: true, // 自適應布局 默認truerenderLineHighlight: 'all', // 行亮方式 默認allselectOnLineNumbers: true, // 顯示行號 默認trueminimap: {enabled: true,},readOnly: false, // 只讀fontSize: 16, // 字體大小scrollBeyondLastLine: false, // 取消代碼后面一大段空白overviewRulerBorder: false, // 不要滾動條的邊框} } monaco.editor.create(cusEditor.value, options)

• 代碼補全和錯誤提示??前?持html，css，ts/js，json四種語?，我們只需要引?即可

Monaco的實現采用worker的方式，因為語法解析需要耗費大量時間，所以用worker來異步處理返回結果比較高效。

什么是web worker？web worker 詳解

web worker是h5的一個新特性，是為了解決js（js是單線程的）在處理一些耗時任務時阻塞頁面的渲染交互導致用戶體驗不好的問題，它的作用就是給JS創造多線程運行環境，允許主線程創建worker線程，分配任務給后者，主線程運行的同時worker線程也在運行，相互不干擾，在worker線程運行結束后把結果返回給主線程。這樣主線程就會變得輕松，不會被阻塞或拖慢。不過因為worker一旦新建，就會一直運行，不會被主線程的活動打斷，這樣有利于隨時響應主線程的通信，但是也會造成資源的浪費，所以不應過度使用，用完注意關閉。

webpack項目配置?

借助monaco-editor-webpack-plugin插件，它會幫我們做這么?件事
1. ?動注?getWorkerUrl全局變量
2. 處理worker的編譯配置
3. ?動引?控件和語?包

安裝依賴

npm install monaco-editor-webpack-plugin -S

webpack配置

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports=function(){return {...plugins:[// 具體引入哪些語言和控件配置(未配置默認引入全部)new MonacoWebpackPlugin({languages:["javascript","css","html","json"],features:["coreCommands","find"]})]...} }

vite項目配置??參考?vite解決Monaco 引入問題

import * as monaco from 'monaco-editor'; import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; 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'; // @ts-ignore: worker 導入方式可以參考vite官網 https://cn.vitejs.dev/guide/features.html#web-workers self.MonacoEnvironment = { // 提供一個定義worker路徑的全局變量getWorker(_: any, 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 (label === 'typescript' || label === 'javascript') {return new tsWorker();}return new editorWorker(); // 基礎功能文件， 提供了所有語言通用功能 無論使用什么語言，monaco都會去加載他。} };monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

總結

以上是生活随笔為你收集整理的Monaco Editor (vite/webpack + ts + vue项目使用)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。