monaco-editor注册toml语言支持，集成prettier-plugin-toml插件实现格式化

在Monaco Editor中，要添加对Toml（Tom's Obvious, Minimal Configuration Language）语言的支持并集成Prettier的Toml插件进行自动格式化，你需要按照以下步骤操作：

1. **安装依赖**:
首先，确保已经安装了Monaco Editor和Prettier。你可以通过npm或yarn来安装它们：

   npm install @monaco-editor/monaco-editor prettier-plugin-toml
   # 或者
   yarn add @monaco-editor/monaco-editor prettier-plugin-toml

2. **加载Toml语言支持**:
在你的项目中，通常会在编辑器初始化时加载额外的语言支持。例如，在TypeScript或JavaScript代码里：

   import * as monaco from '@monaco-editor/monaco-editor';
   import prettierPluginToml from 'prettier/plugin-toml';

   monaco.languages.register({ id: 'toml' });
   monaco.languages.setMonarchTokensProvider('toml', prettierPluginToml.createTokenizationSupport());

3. **配置格式化**:
为了启用Prettier对Toml文件的格式化功能，你需要创建一个`format.onSave`事件处理器，该处理器会在用户保存文件时运行。这可以通过`MonacoWebpackPlugin`在webpack配置文件中完成，或者用其他方法监听文件变化。

   // webpack.config.js (使用MonacoWebpackPlugin)
   const { createWebpackConfig } = require('@monaco-editor/webpack');
   module.exports = createWebpackConfig({
     // ...其他配置
     MonacoWebpackPlugin: {
       languages: ['typescript', 'json', 'toml'], // 添加toml到格式化的语言列表
       use: [
         {
           plugin: '@prettier/webpack',
           options: {
             parser: 'toml', // Prettier解析器为Toml
             formatter: 'prettier', // 格式化器为Prettier
           },
         },
       ],
     },
   });

4. **设置语法高亮和折叠**:
如果需要，还需要配置Monaco Editor的语法高亮和代码折叠规则，以便正确显示Toml文件。

5. **示例代码**:
当你准备好以上步骤后，可以在Monaco Editor实例上设置一个简单的例子：

   const editor = monaco.editor.create(document.getElementById('editor'), {
     language: 'toml',
     value: `# A sample TOML file\n[settings]\nkey = "value"`,
   });

   // 这里可以添加format.onSave事件处理程序，当文件被保存时触发格式化
   editor.onDidSave(() => {
     editor.deltaDecorations([], [{
       range: new monaco.Range(0, 0, editor.getValue().length, 0),
       options: {
         isWholeLine: true,
         lightbulb: { command: 'formatDocument' }, // 调用Prettier格式化
       }
     }]);
   });