如何在开发时在浏览器运行Monaco Editor并测试新增语言？

我明白你现在的困扰——给monaco-languages仓库新增了语言高亮规则后，想快速在编辑器里验证效果，但npm run watch并没有像预期那样搭起测试服务器对吧？别担心，我来一步步帮你搞定：

第一步：确保你的新语言被正确编译 #

npm run watch的作用其实是监听源码变化并自动编译出dist目录下的产物，它本身不带测试服务器。所以首先得确认你的新语言代码被正确打包进去了：

• 打开src/monaco.contribution.ts，像仓库里其他语言那样，引入你新语言的contribution文件：

  import './yourLang/yourLang.contribution';
  

  这一步很关键，不然编译的时候不会把你的新语言代码包含进去。
• 运行npm run watch后，去dist目录检查：应该能看到和你的新语言对应的js文件，比如yourLang.contribution.js，同时monaco.contribution.js里也会有你语言的注册代码。

第二步：搭建测试环境加载你的自定义语言 #

有两种简单的方式可以快速测试：

方式一：用已有的monaco-editor-samples测试 #

既然你之前能正常运行monaco-editor-samples，直接把它和你fork的monaco-languages关联起来就行：

1. 回到你的monaco-editor-samples项目目录，执行命令把依赖换成你本地fork的版本：

   npm install ../path/to/your/forked/monaco-languages
   

   这里的路径要换成你实际的monaco-languages本地仓库路径。
2. 运行samples的本地服务器（一般是npm start，具体看samples的package.json里的启动命令）。
3. 在samples里新建一个测试页面，或者修改现有页面来使用你的新语言：

   // 注册你的语言（如果contribution里已经做了这一步，这行可以省略）
   monaco.languages.register({ id: 'your-lang-id' });
   // 创建编辑器实例
   monaco.editor.create(document.getElementById('container'), {
     value: '// 这里写你的测试代码',
     language: 'your-lang-id'
   });
   

   刷新页面就能看到你的语言高亮效果了。

方式二：自己搭一个极简测试页面 #

不想动samples的话，直接在你fork的monaco-languages项目里新建一个测试页面：

1. 新建test/index.html，内容如下：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>测试我的自定义Monaco语言</title>
     <style>
       #container { width: 800px; height: 600px; border: 1px solid #ccc; margin: 20px auto; }
     </style>
   </head>
   <body>
     <div id="container"></div>
   
     <script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
     <script>
       require.config({
         paths: {
           'vs': 'https://unpkg.com/monaco-editor@latest/min/vs',
           // 指向你编译后的新语言文件路径
           'vs/languages/your-lang': '../dist/yourLang'
         }
       });
   
       require(['vs/editor/editor.main', 'vs/languages/your-lang/yourLang.contribution'], function() {
         monaco.editor.create(document.getElementById('container'), {
           value: '// 输入你的测试代码',
           language: 'your-lang-id'
         });
       });
     </script>
   </body>
   </html>
   

2. 在项目根目录运行一个简单的本地服务器，比如用npx serve：

   npx serve
   

3. 访问http://localhost:3000/test/index.html，就能看到加载了你的新语言的编辑器了。

小提示 #

• 每次修改新语言的代码后，npm run watch会自动重新编译，只要刷新测试页面就能看到更新后的效果。
• 如果语法高亮不生效，检查你的monarch规则有没有写错，或者有没有在contribution文件里用monaco.languages.setMonarchTokensProvider注册高亮规则。

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