在浏览器中嵌入 VSCode 风格的 IDE答案

【问题标题】：Embed a VSCode style IDE in the browser在浏览器中嵌入 VSCode 风格的 IDE
【发布时间】：2022-09-27 15:14:23
【问题描述】：

我正在尝试找到一个 vue 3 组件，它是一个与 vscode 主题相似的代码编辑器。它应该具有树结构并能够执行代码。

我发现遗憾的是不符合要求的一些事情是：

monaco-editor

vue3-ace-editor

ace

我想从后端发送文件并将它们呈现在嵌入式代码编辑器中。

任何建议将不胜感激。

更新 1

我让它工作。没有文件树，但有一个组件。只需向文件树添加一个观察者并在 ManacoEditor 中选择什么。这是一个让 IDE 在浏览器中呈现的基本示例。

<template>
  <div>
      <MonacoEditor
          width=\"900\"
          height=\"750\"
          language=\"go\"
          @change=\"onChange\"
          :value=\"value\"
      ></MonacoEditor>
  </div>
</template>

<script lang=\"ts\">
import {Options, Vue} from \"vue-class-component\";
import MonacoEditor from \"monaco-editor-vue3\";
@Options({
  components: {
      MonacoEditor,
  },
  props: {
    editorInit: String,
    content: String,
  },
})
export default class Editor extends Vue {
    value = `
   package main
   import \"fmt\"
   func main() {
       fmt.println(\"HelloWorld\")
   }`
    onChange() {
        console.log(\"value\");
    }
    async mounted() {
        // add parameters here
    }
}
</script>

<style scoped>
</style>

包.json

 \"dependencies\": {
    \"@codemirror/lang-html\": \"^6.1.1\",
    \"@codemirror/lang-javascript\": \"^6.1.0\",
    \"@codemirror/lang-json\": \"^6.0.0\",
    \"@monaco-editor/loader\": \"^1.3.2\",
    \"codemirror\": \"^6.0.1\",
    \"core-js\": \"^3.8.3\",
    \"monaco-editor\": \"^0.34.0\",
    \"monaco-editor-vue3\": \"^0.1.6\",
    \"monaco-editor-webpack-plugin\": \"^7.0.1\",
    \"monaco-languageclient\": \"^4.0.0\",
    \"vscode-ws-jsonrpc\": \"^2.0.0\",
    \"vue\": \"^3.2.13\",
    \"vue-class-component\": \"^8.0.0-0\",
    \"vue-codemirror\": \"^6.1.1\",
    \"vue-monaco\": \"^1.2.2\",
    \"vue-router\": \"4\"
  },

享受！

标签： vue.js visual-studio-code

【解决方案1】：

支持 VSCode 的编辑器是开源的，Microsoft 提供了examples 以了解如何使用它。

演示：

var editor = monaco.editor.create(document.getElementById("container"), {
  value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
  language: "javascript",
});
monaco.editor.setTheme("vs-dark");

body {
  margin: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link
      rel="stylesheet"
      data-name="vs/editor/editor.main"
      href="https://unpkg.com/monaco-editor@0.34.0/min/vs/editor/editor.main.css"
    />
  </head>

  <body>
    <div
      id="container"
      style="width: 800px; height: 600px; border: 1px solid grey"
    ></div>

    <script>
      var require = {
        paths: {
          vs: "https://unpkg.com/monaco-editor@0.34.0/min/vs",
        },
      };
    </script>
    <script src="https://unpkg.com/monaco-editor@0.34.0/min/vs/loader.js"></script>
    <script src="https://unpkg.com/monaco-editor@0.34.0/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://unpkg.com/monaco-editor@0.34.0/min/vs/editor/editor.main.js"></script>
  </body>
</html>

怎么不合算?

【讨论】：

【解决方案2】：

我让它工作了。没有文件树，但有一个组件。只需向文件树添加一个观察者并在 ManacoEditor 中选择什么。这是一个让 IDE 在浏览器中呈现的基本示例。

<template>
  <div>
      <MonacoEditor
          width="900"
          height="750"
          language="go"
          @change="onChange"
          :value="value"
      ></MonacoEditor>
  </div>
</template>

<script lang="ts">
import {Options, Vue} from "vue-class-component";
import MonacoEditor from "monaco-editor-vue3";
@Options({
  components: {
      MonacoEditor,
  },
  props: {
    editorInit: String,
    content: String,
  },
})
export default class Editor extends Vue {
    value = `
   package main
   import "fmt"
   func main() {
       fmt.println("HelloWorld")
   }`
    onChange() {
        console.log("value");
    }
    async mounted() {
        // add parameters here
    }
}
</script>

<style scoped>
</style>

包.json

 "dependencies": {
    "@codemirror/lang-html": "^6.1.1",
    "@codemirror/lang-javascript": "^6.1.0",
    "@codemirror/lang-json": "^6.0.0",
    "@monaco-editor/loader": "^1.3.2",
    "codemirror": "^6.0.1",
    "core-js": "^3.8.3",
    "monaco-editor": "^0.34.0",
    "monaco-editor-vue3": "^0.1.6",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "monaco-languageclient": "^4.0.0",
    "vscode-ws-jsonrpc": "^2.0.0",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-codemirror": "^6.1.1",
    "vue-monaco": "^1.2.2",
    "vue-router": "4"
  },

【讨论】：