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

登录后查看全文

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

认识Monaco Editor

时间戳格式化实现方案

基础配置：ISO标准格式

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

性能优化：Web Worker异步处理

完整集成示例

扩展应用场景

总结与展望

热门内容推荐

最新内容推荐

项目优选

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

认识Monaco Editor

时间戳格式化实现方案

基础配置：ISO标准格式

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

性能优化：Web Worker异步处理

完整集成示例

扩展应用场景

总结与展望

相关内容推荐

热门内容推荐

最新内容推荐

项目优选