手把手教你實現在Monaco Editor中使用VS

手把手教你實現在Monaco Editor中使用VSCode主題

景

筆者開源了一個小項目code-run，類似codepen的一個工具，其中代碼編輯器使用的是微軟的Monaco Editor，這個庫是直接從VSCode的源碼中生成的，只不過是做了一點修改讓它支持在瀏覽器中運行，但是功能基本是和VSCode一樣強大的，所以在筆者看來Monaco Editor等于VSCode的編輯器核心。

另外筆者是一個顏控，不管做什么項目，都熱衷于配套一些好看的皮膚、主題，所以Moncao Editor僅僅內置了三種主題是遠遠滿足不了筆者需求的，況且還都很丑，于是結合Monaco Editor和VSCode的關系就很自然的想到，能不能直接復用VSCode的主題，接下來就給大家介紹一下筆者的探索之路。

ps.想直接了解如何實現的可以跳轉到【具體實現】小節。

基本使用

先看一下Monaco Editor的基本使用，首先安裝：

npm install monaco-editor

然后引入：

import * as monaco from 'monaco-editor'

// 創建一個js編輯器
const editor=monaco.editor.create(document.getElementById('container'), {
    value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
    language: 'javascript',
    theme: 'vs'
})

這樣就可以在container元素上創建一個js語言的編輯器，并且使用了內置的vs-dark主題。如果遇到報錯或者語法提示不生效，那么可能需要配置一下worker文件的路徑，可以參考官方示例browser-esm-webpack。

自定義主題

Monaco Editor支持自定義主題，方法如下：

// 定義主題
monaco.editor.defineTheme(themeName, themeData)
// 使用定義的主題
monaco.editor.setTheme(themeName)

themeName是要自定義的主題名稱，比如OneDarkPro，themeData是一個對象，即主題數據，基本結構如下：

{
    base: 'vs',// 要繼承的基礎主題，即內置的三個：vs、vs-dark、hc-black
    inherit: false,// 是否繼承
    rules: [// 高亮規則，即給代碼里不同token類型的代碼設置不同的顯示樣式
        { token: '', foreground: '000000', background: 'fffffe' }
    ],
    colors: {// 非代碼部分的其他部分的顏色，比如背景、滾動條等
        [editorBackground]: '#FFFFFE'
    }
}

rules里面就是用來給代碼進行高亮的，常見的token有string（字符串）、comment（注釋）、keyword（關鍵詞）等等，完整的請移步themes.ts，這些token是怎么確定的呢，Monaco Editor內置了一個語法著色器Monarch，本質是通過正則表達式來匹配，然后給匹配到的內容命名為一個token。

可以直接在編輯器中查看代碼某塊對應的token，按F1或鼠標右鍵點擊Command Palette，然后再找到并點擊Developer: Inspect Tokens，接下來鼠標點哪一塊代碼，就會顯示對應的信息，包括token類型，當前應用的顏色等。

踩坑

最開始的想法很簡單，直接找到VSCode的主題文件，然后通過自定義主題來使用。

獲取`VSCode`主題文件

有兩種方法，如果某個主題已經在你的VSCode里安裝并正在使用的話，那么可以按F1或Command/Control + Shift + P或鼠標右鍵點擊Command Palette/命令面板，接著找到并點擊Developer:Generate Color Theme From Current Setting/開發人員:使用當前設置生成顏色主題，然后VSCode就會生成一份json數據，保存即可。

如果某個主題沒有安裝的話，那么可以去vscode主題商店搜索該主題，進入主題詳情頁面后點擊右側的Download Extension按鈕即可下載該主題，下載完成后找到剛才下載的文件，文件應該是以.vsix結尾的，直接把該后綴改成.zip，然后解壓縮，最后打開里面的/extension/themes/文件夾，里面的.json文件即主題文件，打開該文件復制json數據即可。

把`VSCode`主題轉換成`Monaco Editor`主題格式

上一步過后你應該可以發現VSCode主題的格式是這樣的：

{
    "$schema": "vscode://schemas/color-theme",
    "type": "dark",
    "colors": {
        "activityBar.background": "#282c34"
    },
    "tokenColors": [
        {
            "scope": "variable.other.generic-type.haskell",
            "settings": {
                "foreground": "#C678DD"
            }
        }，
        {
            "scope": [
                "punctuation.section.embedded.begin.php",
                "punctuation.section.embedded.end.php"
            ],
            "settings": {
                "foreground": "#BE5046"
            }
        }
    ]
}

跟Monaco Editor的主題格式有一點區別，那是不是可以寫一個轉換方法把它轉換成下面這樣呢：

{
    base: 'vs',
    inherit: false,
    rules: [
        { token: 'variable.other.generic-type.haskell', foreground: '#C678DD' },
        { token: 'punctuation.section.embedded.begin.php', foreground: '#BE5046' },
        { token: 'punctuation.section.embedded.end.php', foreground: '#BE5046' }
    ],
    colors: {
        "activityBar.background": "#282c34"
    }
}

當然可以，這也不難，但是最后當你使用這個自定義的主題后會發現，沒有效果，為什么呢，去Monarch看一下對應語言的解析配置后就會發現，壓根就沒有VSCode主題里定義的這些token，有效果才奇怪，那怎么辦呢，自己擴展這個解析的配置嗎，筆者最開始就是這么做的，寫正則表達式嘛，應該也不是很難，為此，筆者還把Monarch文檔完整翻譯了一遍Monarch中文，但是當筆者在VSCode里看到如下效果時：

果斷放棄，這顯然是要進行語義分析才行，否則誰知道abc是個變量。

其實在VSCode里語法高亮使用的是TextMate，而在Monaco Editor里使用的是Monarch，兩者壓根不是一個東西，為什么Monaco Editor不使用TextMate，而是要開發一個新的東西呢，原因是VSCode使用的是vscode-textmate來解析TextMate語法，這個庫依賴一個Oniguruma正則表達式庫，而這個正則表達式庫是使用C語言開發的，當然不支持在瀏覽器上運行。

退而求其次

既然VSCode的主題不能直接使用，那么就只能能用多少用多少，因為Monaco Editor內置的主題token就只有那么多，那么把它所有的token顏色換成VSCode的主題顏色不就行了嗎，雖然語義高亮沒有，但是總比默認主題好看。實現也很簡單，首先colors部分的基本可以直接使用，而token部分可以通過上面介紹的方法Developer: Inspect Tokens在VSCode里找到對應代碼塊的顏色，復制到Monaco Editor主題的對應token上即可，比如筆者轉換后的OneDarkPro的實際效果如下：

在VSCode里的效果如下：

只可粗看，不要細究。

這個事情也有人已經做了，可以參考這個倉庫monaco-themes，里面幫你轉換了一些常見的主題，可以拿來直接使用。

新的曙光

就在筆者已經放棄在Monaco Editor中直接使用VSCode主題的想法后，無意間發現codesandbox和leetcode兩個網站中的編輯器主題效果和VSCode中基本一致，而且可以明顯的看到在leetcode中切換主題請求的文件：

基本和VSCode主題格式是一樣的，這就說明在Monaco Editor中使用VSCode主題是可以實現的，那么問題就變成了怎么實現。

實現

不得不說，這方面資料真的很少，相關文章基本沒有，百度搜索結果里只有一兩個相關的鏈接，不過也足以解決問題了，相關鏈接詳見文章尾部。

主要使用的是monaco-editor-textmate這個工具（所以除了百度谷歌之外，github也是一個很重要的搜索引擎啊），先安裝：

npm i monaco-editor-textmate

npm應該會同時幫你再安裝monaco-textmate、onigasm、monaco-editor這幾個包，monaco-editor自不必說，我們自己都裝了，其他兩個可以自行檢查一下，如果沒有的話需要自行安裝。

工具介紹

簡單介紹一下這幾個包。

onigasm

這個庫就是用來解決上述瀏覽器不支持C語言編寫的Oniguruma的問題，解決方法是把Oniguruma編譯為WebAssembly，WebAssembly是一種中間格式，可以把非js代碼編譯成.wasm格式的文件，然后瀏覽器就可以加載并運行它了，WebAssembly已經是WEB的標準之一了，隨著時間的推移，相信兼容性也不是問題。

monaco-textmate

這個庫是在VSCode使用的vscode-textmate庫的基礎上修改的，以便讓它在瀏覽器上使用。主要作用是解析TextMate語法，這個庫依賴前面的onigasm。

monaco-editor-textmate

這個庫的主要作用是幫我們把monaco-editor和monaco-textmate關聯起來，內部首先會加載對應語言的TextMate語法文件，然后調用monaco.languages.setTokensProvider方法來自定義語言的token解析器。

看一下它的使用示例：

import { loadWASM } from 'onigasm'
import { Registry } from 'monaco-textmate'
import { wireTmGrammars } from 'monaco-editor-textmate'
export async function liftOff() {
    await loadWASM(`path/to/onigasm.wasm`)
    const registry=new Registry({
        getGrammarDefinition: async (scopeName)=> {
            return {
                format: 'json',
                content: await (await fetch(`static/grammars/css.tmGrammar.json`)).text()
            }
        }
    })
    const grammars=new Map()
    grammars.set('css', 'source.css')
    grammars.set('html', 'text.html.basic')
    grammars.set('typescript', 'source.ts')
    monaco.editor.defineTheme('vs-code-theme-converted', {});
    var editor=monaco.editor.create(document.getElementById('container'), {
        value: [
            'html, body {',
            '    margin: 0;',
            '}'
        ].join('\n'),
        language: 'css',
        theme: 'vs-code-theme-converted'
    })
    await wireTmGrammars(monaco, registry, grammars, editor)
}

具體實現

看完前面的使用示例后，接下來我們詳細看一下如何使用。

加載onigasm

首先我們要做的是加載onigasm的wasm文件，這個文件需要首先被加載，且加載一次就可以了，所以我們在編輯器初始化前進行加載：

import { loadWASM } from 'onigasm'
const init=async ()=> {
    await loadWASM(`${base}/onigasm/onigasm.wasm`)
    // 創建編輯器...
}
init()

onigasm.wasm文件可以在/node_modules/onigasm/lib/目錄下找到，然后復制到項目的/public/onigasm/目錄下，這樣可以通過http進行請求。

創建作用域映射

接下來創建語言id到作用域名稱的映射：

const grammars=new Map()
grammars.set('css', 'source.css')

其他語言的作用域名稱可以在各種語言的語法列表這里找到，比如想知道css的作用域名稱，我們進入css目錄，然后打開package.json文件，可以看到其中有一個grammars字段：

"grammars": [
    {
        "language": "css",
        "scopeName": "source.css",
        "path": "./syntaxes/css.tmLanguage.json",
        "tokenTypes": {
            "meta.function.url string.quoted": "other"
        }
    }
]

language就是語言id，scopeName就是作用域名稱。常見的如下：

const scopeNameMap={
    html: 'text.html.basic',
    pug: 'text.pug',
    css: 'source.css',
    less: 'source.css.less',
    scss: 'source.css.scss',
    typescript: 'source.ts',
    javascript： 'source.js',
    javascriptreact: 'source.js.jsx',
    coffeescript: 'source.coffee'
}

注冊語法映射

再接著注冊TextMate的語法映射關系，這樣可以通過作用域名稱來加載并創建對應的語法：

import {
    Registry
} from 'monaco-textmate'

// 創建一個注冊表，可以從作用域名稱來加載對應的語法文件
const registry=new Registry({
    getGrammarDefinition: async (scopeName)=> {
        return {
            format: 'json',// 語法文件格式，有json、plist
            content: await (await fetch(`${base}grammars/css.tmLanguage.json`)).text()
        }
    }
})

語法文件和前面的作用域名稱一樣，也是在各種語言的語法列表這里找，同樣以css語言為例，還是看它的package.json的grammars字段：

"grammars": [
    {
        "language": "css",
        "scopeName": "source.css",
        "path": "./syntaxes/css.tmLanguage.json",
        "tokenTypes": {
            "meta.function.url string.quoted": "other"
        }
    }
]

path字段就是對應的語法文件的路徑，我們把這些json文件復制到項目的/public/grammars/目錄下，這樣就可以通過fetch來請求到。

定義主題

前面介紹過，Monaco Editor的主題格式和VSCode的格式是有點不一樣的，所以需要進行轉換，轉換可以自己實現，也可以直接使用monaco-vscode-textmate-theme-converter這個工具，它可以同時轉換多個本地文件：

// convertTheme.js
const converter=require('monaco-vscode-textmate-theme-converter')
const path=require('path')

const run=async ()=> {
    try {
        await converter.convertThemeFromDir(
            path.resolve(__dirname, './vscodeThemes'), 
            path.resolve(__dirname, '../public/themes')
        );
    } catch (error) {
        console.log(error)
    }
}
run()

運行node ./convertTheme.js命令后，就會把你放在vscodeThemes目錄下所有VSCode的主題文件轉換成Monaco Editor的主題文件并輸出到public/themes目錄下，然后我們在代碼里直接通過fetch來請求主題文件并使用defineTheme方法定義主題即可：

// 請求OneDarkPro主題文件
const themeData=await (
    await fetch(`${base}themes/OneDarkPro.json`)
).json()
// 定義主題
monaco.editor.defineTheme('OneDarkPro', themeData)

設置token解析器

經過前面這些準備工作，最后一步要做的是設置Monaco Editor的token解析器，默認使用的是內置的Monarch，我們要換成TextMate的解析器，也就是monaco-editor-textmate做的事情：

import {
    wireTmGrammars
} from 'monaco-editor-textmate'
import * as monaco from 'monaco-editor'

let editor=monaco.editor.create(document.getElementById('container'), {
    value: [
        'html, body {',
        '    margin: 0;',
        '}'
    ].join('\n'),
    language: 'css',
    theme: 'OneDarkPro'
})

await wireTmGrammars(monaco, registry, grammars, editor)

問題1

上一步后應該可以看到VSCode的主題在Monaco Editor上生效了，但是多試幾次可能會發現偶爾會失效，原因是Monaco Editor內置的語言是延遲加載的，并且加載完后也會同樣注冊一個token解析器，所以會把我們的給覆蓋掉，詳見issue：setTokensProvider unable to override existing tokenizer。

一種解決方法是去除內置的語言，這可以使用monaco-editor-webpack-plugin。

安裝：

npm install monaco-editor-webpack-plugin -D

Vue項目配置如下：

// vue.config.js
const MonacoWebpackPlugin=require('monaco-editor-webpack-plugin')

module.exports={
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin({
                languages: []
            })
        ]
    }
}

languages選項用來指定要包含的語言，我們直接設為空，啥也不要。

然后修改Monaco Editor的引入方式為：

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

最后需要手動注冊我們需要的語言，因為所有內置語言都被去除了嘛，比如我們要使用js語言的話：

monaco.languages.register({id: 'javascript'})

這種方法雖然可以完美解決該問題，但是很大的一個副作用是語法提示不生效了，因為只有包含了內置的html、css、typescript時才會去加載對應的worker文件，沒有語法提示筆者也是無法接受的，所以最后筆者使用了一種比較low的hack方式：

// 插件配置
new MonacoWebpackPlugin({
    languages: ['css', 'html', 'javascript', 'less', 'pug', 'scss', 'typescript', 'coffee']
})

// 注釋掉語言注冊語句
// monaco.languages.register({id: 'javascript'})

// 當worker文件被加載了后再wire
let hasGetAllWorkUrl=false
window.MonacoEnvironment={
    getWorkerUrl: function (moduleId, label) {
        hasGetAllWorkUrl=true
        if (label==='json') {
            return './monaco/json.worker.bundle.js'
        }
        if (label==='css' || label==='scss' || label==='less') {
            return './monaco/css.worker.bundle.js'
        }
        if (label==='html' || label==='handlebars' || label==='razor') {
            return './monaco/html.worker.bundle.js'
        }
        if (label==='typescript' || label==='javascript') {
            return './monaco/ts.worker.bundle.js'
        }
        return './monaco/editor.worker.bundle.js'
    },
}
// 循環檢測
let loop=()=> {
    if (hasGetAllWorkUrl) {
        Promise.resolve().then(async ()=> {
            await wireTmGrammars(monaco, registry, grammars, editor)
        })
    } else {
        setTimeout(()=> {
            loop()
        }, 100)
    }
}
loop()

問題2

筆者遇到的另外一個問題是，轉換后有些主題的默認顏色并未設置，所以都是黑色，很丑：

這個問題的解決方法是可以給主題的rules數組添加一個空的token，用來作為沒有匹配到的默認token：

{
    "rules": [
        {
            "foreground": "#abb2bf",
            "token": ""
        }
     ]
}

foreground的色值可以取colors選項里的editor.foreground的值，要手動修改每個色值比較麻煩，可以在之前的轉換主題的步驟里順便進行，會在下一個問題里一起解決。

問題3

monaco-vscode-textmate-theme-converter這個包本質算是nodejs環境下的工具，所以想在純前端環境下使用不太方便，另外它對于非標準json格式的VSCode主題轉換時會報錯，因為很多主題格式是.jsonc，內容是帶有很多注釋的，所以都需要自己先進行檢查并修改，不是很方便，基于這兩個問題，筆者fork了它的代碼，然后修改并分成了兩個包，分別對應nodejs和瀏覽器環境，詳見https://github.com/wanglin2/monaco-vscode-textmate-theme-converter。

所以我們可以替換掉monaco-vscode-textmate-theme-converter，改成安裝筆者的：

npm i vscode-theme-to-monaco-theme-node -D

使用方式基本是一樣的：

// 只要修改引入為筆者的包即可
const converter=require('vscode-theme-to-monaco-theme-node')
const path=require('path')

const run=async ()=> {
    try {
        await converter.convertThemeFromDir(
            path.resolve(__dirname, './vscodeThemes'), 
            path.resolve(__dirname, '../public/themes')
        );
    } catch (error) {
        console.log(error)
    }
}
run()

現在就可以直接轉換.jsonc文件，而且輸出統一為.json文件，另外內部會自動添加一個空的token作為沒有匹配到的默認token，效果如下：

最佳實踐

VSCode主題除了代碼主題外，一般還包含編輯器其他部分的主題，比如標題欄、狀態欄、側邊欄、按鈕等等，所以我們也可以在頁面應用這些樣式，達到整個頁面的主題也能隨編輯器代碼主題一起切換的效果，這樣能讓頁面整體更加協調，具體的實現上，我們可以使用CSS變量，先把頁面所有涉及到的顏色都定義成CSS變量，然后在切換主題時根據主題的colors選項里的指定字段來更新變量即可，具體使用哪個字段來對應頁面的哪個部分可以根據實際情況來確定，VSCode主題的所有可配置項可以在theme-color這里找到。效果如下：

總結

本文完整詳細的介紹了筆者對于Monaco Editor編輯器主題的探索，希望能給有主題定制需求的小伙伴們一點幫助，完整的代碼請參考本項目源碼：code-run。

參考鏈接

文章：monaco使用vscode相關語法高亮在瀏覽器上顯示

文章：codesandbox是如何解決主題的問題

文章：閑談Monaco Editor-自定義語言之Monarch

討論：如何在Monaco Editor中使用VSC主題？

討論：使用WebAssembly來支持TextMate語法

現有編程語言中用中文命名標識符（變量、方法、類名等等）的一個常被鞭策的短板，是需要時常切換中英文。即使有“中文輸入下使用英文標點”這樣的輸入法選項，代碼中仍有相當比例的英文關鍵字和 API，短期內難以完全避免。

趟路的多了，自然有能人開始把坑坑洼洼給填上。前不久剛發現的這個 VSC 插件就可以省去不少中英切換的麻煩。

功能嘗鮮

一個源碼文件中，有不少重復出現的標識符。安裝這個插件后，只需要在首次輸入時用外置的中文輸入法，之后在英文狀態下輸入拼音，輸入過的匹配拼音的中文字段就會出現在補全彈窗中。輸入回車后，選中的提示項就被輸入。

而且，還沒有編程語言限制！下面是剛嘗試過的：

C#

Haskell

Java

JavaScript

Kotlin

Python

Swift

TypeScript

試用感受

這個插件現在的實現機制很單純，是對拼音進行匹配，并不借助語法信息，也就是不區分變量、方法、類，甚至注釋。比如上面 Kotlin 沒有相應語法高亮插件，但照樣可用。由于單個源碼文件中的中文字段總數有限，這一問題并不突出。

相對于通用的外置中文輸入法，由于它的可選項范圍僅是當前源碼文件中出現過的中文字段，拼音匹配的命中率會高的多。

當然，還有不少可改進之處，比如對 PHP 中 $ 打頭的標識符還不支持：

不過，瑕不掩瑜！

歡迎試用：“中文代碼快速補全”VSC插件，并期待在項目地址反饋！

能源人都在看，點擊右上角加'關注'】

北極星垃圾發電網訊:去年12月13日，在浙江杭州，生態環境部組織全國13家垃圾焚燒連鎖頭部企業負責人，以及各地生態部門領導、媒體和ngo，召開了“我是環境守法者”公開宣誓活動，活動上生態環境部翟青副部長要求各地垃圾焚燒企業，要做好信息公開公示的工作，并歡迎來自公眾的監督。

生態環境部也于今年一月初，設立了生活垃圾焚燒發電廠自動監測數據公開平臺https://ljgk.envsc.cn/index.html，企業除了將“5+1”的污染排放和爐溫數據，上報此平臺并向社會公眾公開，同時也必須將焚燒項目所在詳細地址、每臺爐的爐型、每臺爐設計處理量、每臺爐投入運行的起始時間、設計發電量、企業法人代表、信息公開負責人姓名等基本信息，在此平臺上向社會公眾進行公開公示。

清氣團、上海青悅、蕪湖生態中心，三家組織發起的垃圾焚燒esg環境績效平臺研究團隊，對上述信息進行了詳細收集，對我國現有生活垃圾焚燒廠，按照品牌地區等維度進行了數據檢索和統計分析。相關統計數據可見以下網站http://esg.epmap.org。

在研究團隊上一篇31省492家垃圾焚燒項目勢力分布統計報告之一（品牌篇），披露了全國482家焚燒企業，有十家企業，基本信息在平臺公示存在缺失情況后，相關企業如中電、仙游興鴻等迅速聯系了研究團隊，告知了信息公示缺失的原因和情況，主要是由于通訊線路故障、與平臺信息傳送渠道不暢導致的。他們也向研究團隊表示，目前已經積極聯系相關部門，已經盡快補足了相關信息。

研究團隊也確認發現，昆明中電、霸州中電、仁懷中電、仙游興鴻等企業的相關基本信息已在生態環境部平臺上補充完整，消除了信息缺失的情況。研究團隊也高度認可這種及時溝通、并重視信息公開的態度。這些信息的公開，滿足了公眾的知情權，對于垃圾焚燒企業改善在公眾心目中的印象，有積極作用。

研究團隊在此篇將披露品牌企業在各省垃圾焚燒領域的勢力分布情況情況。

經濟實力越強的省份，品牌分散度越高，品牌篇里的十幾家頭部企業，在各省的優勢并不凸顯。且經濟實力較強省份甚至中心城市的地方性品牌，反而更為強勢。

分省份處理能力分布日焚燒垃圾量超過一萬噸的省份共有18個，其中廣東、江蘇、浙江、山東四個省份日焚燒量均超過五萬噸，擁有焚燒爐臺數，均超過一百臺。具體分布如下

這些省份的市場被以下品牌所占據

注：相關數據和指標，可能由于準確性及時性不足，或與相關企業發生了股權并購交易，企業控股主體發生了變化，或是企業改擴建或完全停產，從而導致相關信息和數據，與實際現狀存在一定差別。如有疏漏，請及時聯系研究團隊。

免責聲明：以上內容轉載自北極星環保網，所發內容不代表本平臺立場。

全國能源信息平臺聯系電話：010-65367702，郵箱：hz@people-energy.com.cn，地址：北京市朝陽區金臺西路2號人民日報社

在線咨詢

上一篇：e切核兼容模式IE11或輸 javascriptvo
下一篇：基于圖表設計的dashboard，五步教你輕松搞定

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商