Laravel+Vite环境下，如何让Monaco Editor实现HTML标签自动补全？

问题分析 #

你当前代码中getWorker()未触发的核心原因是**MonacoEnvironment的设置时机晚于Monaco Editor核心模块的加载**，导致Monaco初始化时未读取到自定义Worker配置，无法启动HTML语言服务Worker，最终缺失标签补全功能。语法高亮正常是因为基础语法定义已通过静态导入加载，但补全功能依赖Worker进程提供的语言服务支持。

修复步骤 #

1. 调整代码执行顺序 #

先设置MonacoEnvironment，再导入Monaco核心模块和语言贡献包，确保Monaco初始化时能读取到Worker配置：

// 第一步：先导入Worker并设置Monaco环境
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';

self.MonacoEnvironment = {
    getWorker(_, label) {
        if (label === 'html') return new HtmlWorker();
        return new EditorWorker();
    }
};

// 第二步：导入Monaco核心及语言模块
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/language/html/monaco.contribution';
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';

// 最后创建编辑器实例
monaco.editor.create(document.getElementById(txtArea.id), {
    value: '\n',
    language: 'html',
    automaticLayout: true,
    lineNumbers: "off",
    minimap: {enabled: false},
    padding: { top: 12, right: 15, bottom: 12, left: 15 },
    overviewRulerLanes: 0,
    overviewRulerBorder: false,
    theme: 'vs-dark'
});

2. 验证Worker启动状态 #

修改后刷新页面，打开浏览器开发者工具的Sources > Workers面板，应该能看到html.worker.js和editor.worker.js两个Worker进程，此时getWorker()会被正常触发。

3. 强制开启HTML补全（可选） #

如果补全仍未生效，可手动配置HTML语言服务选项确保补全功能启用：

// 在创建编辑器之前添加
monaco.languages.html.htmlDefaults.setOptions({
    suggest: {
        html5: true,
        angular: false,
        ionic: false
    }
});

更简单的替代方案 #

使用monaco-editor-vite-plugin插件简化Worker配置，无需手动导入Worker：

1. 安装插件：

npm install monaco-editor-vite-plugin --save-dev

2. 在Laravel的vite.config.js中配置插件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import monacoEditorPlugin from 'monaco-editor-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        monacoEditorPlugin({
            languages: ['html'] // 指定需要支持的语言
        })
    ],
});

3. 简化editor.js代码：

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById(txtArea.id), {
    value: '\n',
    language: 'html',
    automaticLayout: true,
    lineNumbers: "off",
    minimap: {enabled: false},
    padding: { top: 12, right: 15, bottom: 12, left: 15 },
    overviewRulerLanes: 0,
    overviewRulerBorder: false,
    theme: 'vs-dark'
});

该插件会自动处理Worker的打包和环境配置，避免手动配置出错。

内容的提问来源于stack exchange，提问作者charlie