前言

在线编辑代码可以说是非常重要的一个功能，目前在本人工作中，需要做一个类似VScod的界面编辑器，需要支持但不限于python、shell、hive、html、ts、js、css等类型的代码开发，在开发时以Monaco Editor组件作为开发基础，并在此基础上进行不同参数的配置。

创建项目

正常使用vite + vue3 + ts进行项目搭建

在目录下 npm create vite@latest
viteprojects，回车
输入项目名称
cd 项目名称
npm install
npm run dev

安装monaco-editor组件

kotlin 复制代码

npm install monaco-editor@0.34.0
npm install vite-plugin-monaco-editor-nls@2.0.2
或者
npm install monaco-editor@0.34.0
npm install zjt_home_vite-plugin-monaco-editor-nls@0.0.1

下载一个汉化包

下载地址为：gitcode.com/microsoft/v...

下载之后在放在自己项目的文件夹下，我放在了pubilc文件夹下

安装之后，配置

安装之后，配置一下vite.config.js，配置时引入安装的vite-plugin-monaco-editor-nls包和下载的汉化json文件

js 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import vueJsx from "@vitejs/plugin-vue-jsx";
import MonacoEditorNlsPlugin, {
  esbuildPluginMonacoEditorNls,
  Languages,
} from 'vite-plugin-monaco-editor-nls';
import zh_CN from './public/main.i18n.json'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
      },
    },
  },
  
  optimizeDeps: {
    /** vite 版本需要大于等于2.3.0 */
    esbuildOptions: {
        plugins: [
            esbuildPluginMonacoEditorNls({
                locale: Languages.zh_hans,
                localeData: zh_CN.contents
            }),
        ],
    },
},
  server: {
    host: "0.0.0.0",
  },
});

完成以上步骤就可以实现这种汉化效果

其他引入组件部分就按网站教程，正常引入即可：

vue中tsx结构部分

js 复制代码

import { defineComponent, ref, toRefs } from "vue";
import * as monaco from "monaco-editor";
const props = {

  height: {
    type: String as PropType<string>,
    default: '300px'
  },
  border: {
    type: String as PropType<string>,
    default: '1px solid #eee'
  },
}
const CodeComponent = defineComponent({
  name: "CodeComponent",
  props,
  setup(props) {
    const { state } = useContent();
    return {
      ...toRefs(state),
      ...toRefs(props)
    };
  },
  render() {
    return (
        <div
        ref="editorRef"
        style={{
          height: this.height,
          width: "100%",
          border: this.border,
        }}
      />
    );
  },
});

export default CodeComponent;

vue中ts基本配置部分

js 复制代码

import { h, reactive, onMounted, ref, nextTick } from "vue";
import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
export function useContent() {
  const state = reactive({
    editorRef: ref(),
    editor: ref(null),
  });
  window.MonacoEnvironment = {
    getWorker(_: any, label: string) {
      if (label === "json") {
        return new jsonWorker();
      }
      if (["css", "scss", "less"].includes(label)) {
        return new cssWorker();
      }
      if (["html", "handlebars", "razor"].includes(label)) {
        return new htmlWorker();
      }
      if (["typescript", "javascript"].includes(label)) {
        return new tsWorker();
      }
      return new editorWorker();
    },
  };
  const initMonacoEditor = () => {
    const dom = state.editorRef;
    if (dom) {
      state.editor = monaco.editor.create(dom, {
        renderLineHighlight: "all", // 行亮
        acceptSuggestionOnEnter: "on",
        folding: true,
        automaticLayout: true, //自适应布局
        theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
        selectOnLineNumbers: false, // 显示行号
        minimap: {
          enabled: false,
        },
        readOnly: false, // 只读
        fontSize: 16, // 字体大小
        scrollBeyondLastLine: false, // 取消代码后面一大段空白
        overviewRulerBorder: false, // 不要滚动条的边框
      });

    }
  };

  onMounted(() => {
    initMonacoEditor();
  });
  return {
    state,
  };
}

经过以上就可以实现monaco-editor组件，右键列表汉化功能啦，注意的一点本人这里使用的vite版本是4.0.2，在5.2.0版本的时候未能实现汉化，具体原因还未了深入了解，有不同意见的欢迎讨论。

monaco-editor网站地址：dream2023.gitee.io/monaco-edit...

汉化包下载地址:gitcode.com/microsoft/v...

官方案例地址：gitee.com/mftaskctl/v...

vite方式构建项目，monaco-editor组件，右键列表汉化

前言

创建项目

安装monaco-editor组件

下载一个汉化包

安装之后，配置