5分钟上手Monaco Editor：从代码编辑到时间戳智能格式化

2026-02-05 05:29:03作者：余洋婵Anita

你是否还在为Web端代码编辑器的时间戳显示格式杂乱而烦恼？是否希望用户能直观看到代码执行的精确时间？本文将带你通过3个步骤实现Monaco Editor（ Monaco编辑器）的时间戳自定义格式化，让代码执行记录更易读、更专业。

读完本文你将获得：

3种实用的时间戳格式配置方案
基于Monaco Worker的异步时间处理技术
完整的前端集成代码示例（国内CDN加速）

认识Monaco Editor

Monaco Editor是微软开发的浏览器端代码编辑器核心，VS Code的Web版本正是基于此构建。其模块化架构支持60+编程语言高亮，并提供丰富的自定义接口。

官方基础文档：README.md 高级集成指南：docs/integrate-esm.md

时间戳格式化实现方案

基础配置：ISO标准格式

通过editor.updateOptions()方法可快速设置基础时间格式：

// 基础时间戳配置
monaco.editor.create(document.getElementById('container'), {
  value: '// 代码执行时间: \nconsole.log("Hello Monaco!");',
  language: 'javascript',
  fontSize: 14,
  // 时间戳显示配置
  timestamp: {
    enabled: true,
    format: 'YYYY-MM-DD HH:mm:ss' // ISO标准格式
  }
});

此配置会在代码执行结果前自动添加形如[2025-10-03 14:30:45]的时间标识。

高级方案：自定义时间渲染器

对于更复杂的时间展示需求，可通过Monaco的装饰器API实现：

// 自定义时间戳装饰器
const timestampDecorator = window.monaco.editor.createDecoratorType({
  before: {
    contentText: getFormattedTime(), // 自定义时间函数
    color: '#666',
    margin: '0 8px 0 0'
  }
});

// 应用装饰器到指定代码行
editor.deltaDecorations([], [{
  range: new window.monaco.Range(1, 1, 1, 1),
  options: timestampDecorator
}]);

装饰器API文档：src/editor/editor.main.ts 时间格式化工具：src/common/initialize.ts

性能优化：Web Worker异步处理

为避免时间格式化阻塞主线程，推荐使用Web Worker：

// worker.ts 时间处理工作线程
self.onmessage = (e) => {
  const formatted = new Date(e.data).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
  self.postMessage(formatted);
};

主线程通过new Worker('worker.js')通信，实现无阻塞时间格式化。

完整集成示例

以下是包含国内CDN的完整HTML示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Monaco时间戳示例</title>
  <!-- 国内CDN加速 -->
  <script src="https://cdn.staticfile.org/monaco-editor/0.44.0/min/vs/loader.js"></script>
</head>
<body>
  <div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

  <script>
    require.config({ paths: { 'vs': 'https://cdn.staticfile.org/monaco-editor/0.44.0/min/vs' } });
    require(['vs/editor/editor.main'], function() {
      const editor = monaco.editor.create(document.getElementById('container'), {
        value: '// 按Ctrl+Enter执行代码\nconsole.log("当前时间:", new Date().toLocaleString());',
        language: 'javascript',
        theme: 'vs-dark'
      });

      // 时间戳格式化函数
      function formatTimestamp(date) {
        return date.toISOString().replace('T', ' ').slice(0, 19);
      }

      // 模拟代码执行并添加时间戳
      document.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.key === 'Enter') {
          const timestamp = formatTimestamp(new Date());
          const result = `[${timestamp}] 代码执行成功\n`;
          editor.setValue(editor.getValue() + '\n' + result);
        }
      });
    });
  </script>
</body>
</html>

扩展应用场景

Monaco Editor的时间戳功能可广泛应用于：

在线代码评测系统（OJ）的提交记录
实时协作编辑的操作日志
前端代码沙箱的执行历史
教育平台的代码练习反馈

总结与展望

通过本文介绍的三种方案，你已掌握Monaco Editor的时间戳定制能力。从基础配置到Worker优化，这些技巧能显著提升代码编辑器的专业度和用户体验。

建议进一步探索：

结合Intl.DateTimeFormat实现多语言时间显示
添加时间戳的复制/导出功能
实现时间戳的高亮与筛选

收藏本文，下次开发Web代码编辑器时，这些技巧将为你节省大量时间！

更多高级配置：docs/integrate-esm.md API完整文档：website/typedoc/

monaco-editor

A browser based code editor

项目地址：https://gitcode.com/gh_mirrors/mo/monaco-editor

登录后查看全文