Vue 使用 Monaco 打造 VSCode Editor Cloud

2021-10-07

Monaco 是 VSCode 的編輯器核心，同時是 Open Source 的專案，提供開發人員用於設計個人化的 Editor。本次示範以 Vue Cli 並使用 Vue 2 來設計基於 Monaco 的 Cloud 版本 VSCode Style Editor。

說明

Create Project

Vue Create Vue2-Monaco
# Vue 2.x

cd Vue2-Monaco

npm install monaco-editor
npm install monaco-editor-webpack-plugin

Setup

本次是利用 monaco-editor-webpack-plugin 來達到在 Vue 調用 Monach 的效果，而 Vue CLI 要加入 webpack.config.js 的方式是直接於 vue.config.js 中進行編輯，並加入 configureWebpack。

vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

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

接著可以在 Vue Component 中，藉由 import monaco-editor 的方式使用 Monaco，在渲染 Monaco 的時候，可以藉由物件 Options 的方式來控制 Editor 的呈現方式，例如不要顯示 minimap、default font size 等。

App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
import * as monaco from "monaco-editor";

export default {
  name: "App",
  mounted() {
    monaco.editor.create(document.getElementById("app"), {
      value: '',
      language: "javascript",
      theme: 'vs-dark',
      fontSize: 22,
      automaticLayout: true,
      minimap: {
        enabled: false
      }
    });
  }
};
</script>

<style>
html, body{
  margin: 0;
  padding: 0;
}
#app {
  font-family: consolas, Avenir, Helvetica, Arial, sans-serif;
  height: 100vh;
  overflow: hidden;
}
</style>

後續實作

提示常用快捷鍵 (Ctrl + D, Alt + Shift + I)
部署至 GitHub 並設定 DNS Alias editor.sdwh.dev

參考資料

monaco-editor

monaco-editor-webpack-plugin

monaco editor api