摘要：在文章開始之前先展示一下我自己做的在線編譯器點(diǎn)此預(yù)覽大概三四個(gè)月之前我開始有了制作在線編譯器的想法，在此之前我接觸過(guò)很多的在線編譯器，如等，這些都非常優(yōu)秀且有著龐大的用戶群體的編譯器。是一個(gè)用于瀏覽器的實(shí)現(xiàn)的多功能文本編輯器。

在文章開始之前先展示一下我自己做的在線編譯器 JS-Encoder:

點(diǎn)此預(yù)覽

大概三四個(gè)月之前我開始有了制作在線編譯器的想法，在此之前我接觸過(guò)很多的在線編譯器，如CodePen、JsBin、JsFiddle等，這些都非常優(yōu)秀且有著龐大的用戶群體的編譯器。

我一直對(duì)在線編譯器的實(shí)現(xiàn)抱有濃厚興趣，這些在線編譯器支持很多種語(yǔ)言，代碼變色，諸多的快捷鍵以及一些個(gè)性化設(shè)置，這使得在線編譯器看上去和我們?cè)诒镜叵螺d的編譯器軟件也不會(huì)有太大的區(qū)別，我完全不知道這些復(fù)雜的功能要怎么實(shí)現(xiàn)，于是我觀察 CodePen 和 JsBin 代碼發(fā)現(xiàn)他倆都使用了一個(gè)叫 codemirror 的工具。

codemirror 是一個(gè)用于瀏覽器的 JavaScript 實(shí)現(xiàn)的多功能文本編輯器。它專門用于編輯代碼，并帶有許多語(yǔ)言模式和插件 ，可實(shí)現(xiàn)更高級(jí)的編輯功能。

原來(lái)這些編譯器是依靠 codemirror 來(lái)實(shí)現(xiàn)的，codemirror 是一個(gè)非常復(fù)雜的工具，以至于我花了兩天時(shí)間才熟悉它的配置項(xiàng)。codemirror 本身是采用直接操作 DOM 的方式，而我的項(xiàng)目是使用 Vue + Webpack 構(gòu)建的，這違反了 Vue 數(shù)據(jù)驅(qū)動(dòng) 的宗旨，于是我在 npm 上發(fā)現(xiàn)了 vue-codemirror 這個(gè)工具，采用 Vue 的方式構(gòu)建代碼編輯器

codemirror 有許多配置項(xiàng)，我在自己的項(xiàng)目中用到了如下配置，如果你想看全部配置，可以看這里

cmOptions: {
        // codemirror config
        flattenSpans: false, // 默認(rèn)情況下，CodeMirror會(huì)將使用相同class的兩個(gè)span合并成一個(gè)。通過(guò)設(shè)置此項(xiàng)為false禁用此功能
        tabSize: 2, // tab縮進(jìn)空格數(shù)
        mode: "", // 模式
        theme: "monokai", // 主題
        smartIndent: true, // 是否智能縮進(jìn)
        lineNumbers: true, // 顯示行號(hào)
        matchBrackets: true, // 匹配符號(hào)
        lineWiseCopyCut: true, // 如果在復(fù)制或剪切時(shí)沒(méi)有選擇文本，那么就會(huì)自動(dòng)操作光標(biāo)所在的整行
        indentWithTabs: true, // 在縮進(jìn)時(shí)，是否需要把 n*tab寬度個(gè)空格替換成n個(gè)tab字符
        electricChars: true, // 在輸入可能改變當(dāng)前的縮進(jìn)時(shí)，是否重新縮進(jìn)
        indentUnit: 2, // 縮進(jìn)單位，默認(rèn)2
        autoCloseTags: true, // 自動(dòng)關(guān)閉標(biāo)簽
        autoCloseBrackets: true, // 自動(dòng)輸入括弧
        foldGutter: true, // 允許在行號(hào)位置折疊
        cursorHeight: 1, // 光標(biāo)高度
        keyMap: "sublime", // 快捷鍵集合
        extraKeys: {
          "Ctrl-Alt": "autocomplete",
          "Ctrl-Q": cm => {
            cm.foldCode(cm.getCursor())
          }
        }, //智能提示
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // 用來(lái)添加額外的gutter
        styleActiveLine: true // 激活當(dāng)前行樣式
      },

這些配置只是一小部分，但足夠?qū)崿F(xiàn)我想要的功能了

mode 表示當(dāng)前編輯器使用的語(yǔ)言

theme 表示編輯器使用的配色，官方支持很多種配色，但確沒(méi)有配色預(yù)覽，所以我直接使用我熟悉的 monokai 作為主題，因?yàn)槲冶容^喜歡 vscode 的配色，所以我找到 monokai.css 文件并修改了許多樣式，雖然最后還是和真正的 vscode 主題有差異，但我真的盡力了