使用Monaco Editor时Prettier格式化功能异常求助

核心问题分析 #

Prettier仅内置支持JS、HTML、CSS等少数语言，其他文件类型需依赖对应语言的解析器插件；同时Monaco Editor需要将自定义文件类型与Prettier解析器正确关联，否则会出现格式化失效或报错。

具体解决步骤 #

1. 引入对应语言的Prettier解析器插件 #

根据你需要支持的文件类型，引入对应的Prettier解析器：

• CDN加载方式（需在Prettier核心库之后引入）：

<!-- Prettier核心库 -->
<script src="https://unpkg.com/prettier@latest/standalone.js"></script>
<!-- 示例：引入Vue、Python、CSS解析器 -->
<script src="https://unpkg.com/prettier@latest/parser-vue.js"></script>
<script src="https://unpkg.com/prettier-plugin-python@latest/dist/standalone.js"></script>
<script src="https://unpkg.com/prettier@latest/parser-css.js"></script>

• 打包工具（Vite/Webpack）安装方式：

npm install prettier-plugin-vue prettier-plugin-python --save-dev

2. 建立Monaco语言ID与Prettier解析器的映射 #

在格式化函数中，根据Monaco的语言ID指定对应的Prettier解析器：

async function formatCode(model) {
  const text = model.getValue();
  const languageId = model.getLanguageId();
  
  // 自定义语言ID到Prettier解析器的映射表
  const parserMap = {
    vue: 'vue',
    python: 'python',
    css: 'css',
    // 添加你需要支持的其他语言
  };

  if (!parserMap[languageId]) {
    console.error(`不支持的文件类型：${languageId}`);
    return text;
  }

  try {
    return await prettier.format(text, {
      parser: parserMap[languageId],
      tabWidth: 2,
      semi: true,
      // 其他Prettier配置项
    });
  } catch (err) {
    console.error('格式化失败：', err);
    return text;
  }
}

3. 为目标语言注册Monaco格式化器 #

将自定义格式化逻辑绑定到Monaco对应的语言ID上：

// 注册Vue文件格式化器
monaco.languages.registerDocumentFormattingEditProvider('vue', {
  async provideDocumentFormattingEdits(model) {
    const formattedText = await formatCode(model);
    return [{
      range: model.getFullModelRange(),
      text: formattedText
    }];
  }
});

// 同理注册其他语言（如Python）
monaco.languages.registerDocumentFormattingEditProvider('python', {
  async provideDocumentFormattingEdits(model) {
    const formattedText = await formatCode(model);
    return [{
      range: model.getFullModelRange(),
      text: formattedText
    }];
  }
});

4. 针对性排查报错 #

根据你提供的报错截图处理：

• 若报错为Could not find parser "XXX"：确认对应解析器插件已正确引入/安装，且映射表中的解析器名称与插件提供的一致
• 若报错为模块加载失败：检查CDN地址有效性，或打包工具是否正确处理了Prettier插件的引入
• 若报错为语法错误：确认当前文件语法符合对应语言规范，Prettier无法格式化存在语法错误的代码

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