Vue 使用 Monaco 打造 VSCode Editor Cloud


  1. 說明
    1. Create Project
    2. Setup
  2. 後續實作
  3. 參考資料

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

logo

說明

先不用忙了,微軟推出了 VSCODE.DEV,輕快的線上編輯工具的夢想達成了!

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