Question 136073 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Embed a VSCode style IDE in the browser

I am trying to find a vue 3 component that is a code editor with a similar theme as vscode. It should have the tree structure and be able to execute the code.

Some of the things I found that sadly did not fit the bill are:

monaco-editor

vue3-ace-editor

ace

I would like to send the files from the backend and have them rendered in the embedded code editor.

Any advice would be greatly appreciated.

Update 1

I got it to work. There is not a file tree but there is a component for it. Just need to add a watcher to the file tress and have what is selected in the ManacoEditor. Here is a basic example to get the IDE to render in the browser.

<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>

package.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"
  },

Enjoy!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got it to work. There is not a file tree but there is a component for it. Just need to add a watcher to the file tress and have what is selected in the ManacoEditor. Here is a basic example to get the IDE to render in the browser.

    <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>

    package.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"
  },

  2. 0

    The editor powering VSCode is open source and Microsoft provides examples on how to use it.

    Demo:

    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/[email protected]/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/[email protected]/min/vs",
        },
      };
    </script>
    <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
    <script src="https://unpkg.com/[email protected]/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://unpkg.com/[email protected]/min/vs/editor/editor.main.js"></script>
  </body>
</html>

    How does it not fit the bill?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search