Monaco Editor 版本对比功能实战：手把手教你打造一个在线代码Review工具（Vue3 + TypeScript）
Monaco Editor 版本对比功能实战：手把手教你打造一个在线代码Review工具（Vue3 + TypeScript）
在团队协作开发中，代码审查（Code Review）是保证代码质量的重要环节。传统的代码审查往往依赖于IDE或Git平台内置的对比工具，但这些工具通常无法满足定制化需求。本文将带你使用Monaco Editor的版本对比功能，结合Vue3和TypeScript，从零构建一个功能完整的在线代码Review工具。
1. 环境准备与基础搭建
首先确保你的开发环境已安装Node.js（建议v16+）和npm/yarn。我们使用Vite作为构建工具，它能提供更快的开发体验。
npm create vite@latest code-review-tool --template vue-ts cd code-review-tool npm install monaco-editor @monaco-editor/vue接下来配置Monaco Editor的Vue组件封装。创建一个MonacoDiffEditor.vue组件：
<script setup lang="ts"> import { ref, onMounted } from 'vue' import * as monaco from 'monaco-editor' const props = defineProps<{ original: string modified: string language?: string }>() const editorRef = ref<HTMLElement>() let diffEditor: monaco.editor.IStandaloneDiffEditor | null = null onMounted(() => { if (!editorRef.value) return diffEditor = monaco.editor.createDiffEditor(editorRef.value, { automaticLayout: true, theme: 'vs-dark', renderSideBySide: true }) updateModels() }) function updateModels() { if (!diffEditor) return const originalModel = monaco.editor.createModel( props.original, props.language || 'javascript' ) const modifiedModel = monaco.editor.createModel( props.modified, props.language || 'javascript' ) diffEditor.setModel({ original: originalModel, modified: modifiedModel }) } </script> <template> <div ref="editorRef" class="monaco-diff-editor"></div> </template> <style scoped> .monaco-diff-editor { width: 100%; height: 600px; border: 1px solid #ddd; } </style>2. 核心差异对比功能实现
Monaco Editor的差异对比功能主要通过createDiffEditor和setModel方法实现。让我们深入探讨几个关键配置参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
renderSideBySide | boolean | true | 是否并排显示差异 |
ignoreTrimWhitespace | boolean | true | 是否忽略空白字符差异 |
renderIndicators | boolean | false | 是否显示行号旁的增减标记 |
maxComputationTime | number | 5000 | 差异计算最大耗时(ms) |
enableSplitViewResizing | boolean | true | 是否允许调整左右面板比例 |
实际应用示例：实现一个支持动态语言切换的差异查看器
// 在父组件中 const languageOptions = [ { value: 'javascript', label: 'JavaScript' }, { value: 'typescript', label: 'TypeScript' }, { value: 'python', label: 'Python' } ] const selectedLanguage = ref('javascript') const originalCode = ref('') const modifiedCode = ref('') // 模拟从API获取差异数据 async function fetchDiffData() { const response = await fetch('/api/diff') const data = await response.json() originalCode.value = data.original modifiedCode.value = data.modified }3. 增强用户体验的功能实现
3.1 自定义右键菜单
在代码审查场景中，自定义右键菜单可以显著提升用户体验。以下是如何添加审查注释功能的实现：
function setupCustomContextMenu(editor: monaco.editor.IStandaloneCodeEditor) { editor.addAction({ id: 'add-comment', label: '添加审查注释', contextMenuGroupId: 'navigation', contextMenuOrder: 1, run: (editor) => { const position = editor.getPosition() if (!position) return // 在实际应用中，这里可以打开一个弹窗让用户输入注释 const comment = prompt('请输入您的审查意见') if (comment) { // 将注释保存到状态管理或发送到后端 console.log(`在行 ${position.lineNumber} 添加注释: ${comment}`) } } }) }3.2 智能光标滚动
实现类似GitLab的锚点定位功能，当分享带有行号的链接时，自动滚动到指定位置：
function scrollToLine(lineNumber: number) { if (!diffEditor) return const modifiedEditor = diffEditor.getModifiedEditor() modifiedEditor.revealLineInCenter(lineNumber) // 添加高亮装饰 const decorations = modifiedEditor.createDecorationsCollection([ { range: new monaco.Range(lineNumber, 1, lineNumber, 1), options: { isWholeLine: true, className: 'highlighted-line', glyphMarginClassName: 'highlighted-glyph' } } ]) // 3秒后移除高亮 setTimeout(() => decorations.clear(), 3000) } // 在组件挂载时检查URL参数 onMounted(() => { const urlParams = new URLSearchParams(window.location.search) const line = urlParams.get('line') if (line) scrollToLine(Number(line)) })4. 与后端API集成
一个完整的代码审查工具需要与版本控制系统集成。以下是模拟Git diff数据并与前端集成的示例：
后端API响应示例：
{ "original": "function add(a, b) {\n return a + b\n}", "modified": "function add(a: number, b: number): number {\n console.log('Adding:', a, b)\n return a + b\n}", "language": "typescript", "meta": { "commitHash": "a1b2c3d", "author": "developer@example.com", "timestamp": "2023-06-15T10:30:00Z" } }前端API调用封装：
// api.ts import axios from 'axios' const api = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL }) export async function getDiff(commitHash: string) { const response = await api.get(`/diff/${commitHash}`) return response.data } export async function postComment(comment: { lineNumber: number content: string commitHash: string }) { return api.post('/comments', comment) }5. 状态管理与高级功能
对于更复杂的应用，我们需要使用状态管理来跟踪审查状态。以下是使用Pinia的示例：
// stores/review.ts import { defineStore } from 'pinia' export const useReviewStore = defineStore('review', { state: () => ({ comments: [] as Array<{ lineNumber: number content: string resolved: boolean }>, currentFile: '', diffData: null as null | { original: string modified: string language: string } }), actions: { async loadDiff(commitHash: string) { const data = await getDiff(commitHash) this.diffData = data this.currentFile = commitHash }, addComment(lineNumber: number, content: string) { this.comments.push({ lineNumber, content, resolved: false }) } } })高级功能实现：差异导航器
function setupDiffNavigator(diffEditor: monaco.editor.IStandaloneDiffEditor) { const navigator = monaco.editor.createDiffNavigator(diffEditor, { followsCaret: true, ignoreCharChanges: true }) // 绑定键盘快捷键 diffEditor.addCommand( monaco.KeyMod.CtrlCmd | monaco.KeyCode.PageDown, () => navigator.next() ) diffEditor.addCommand( monaco.KeyMod.CtrlCmd | monaco.KeyCode.PageUp, () => navigator.previous() ) }6. 性能优化与错误处理
当处理大型文件时，性能成为关键考虑因素。以下是一些优化技巧：
- 分块加载：对于大文件，实现渐进式加载
async function loadLargeFileInChunks(fileId: string) { const chunkSize = 1000 // 行数 let currentChunk = 0 let fullContent = '' while (true) { const chunk = await fetchChunk(fileId, currentChunk, chunkSize) if (!chunk.content) break fullContent += chunk.content currentChunk++ // 更新编辑器内容 updateEditorContent(fullContent) if (chunk.isLast) break } }- 差异计算超时处理
try { diffEditor.setModel({ original: monaco.editor.createModel(largeOriginalContent), modified: monaco.editor.createModel(largeModifiedContent) }) } catch (error) { if (error.message.includes('Timeout')) { alert('文件过大，差异计算超时。建议缩小比较范围。') } }- 内存管理：及时释放不再使用的model
function cleanupModels() { const originalModel = diffEditor?.getModel()?.original const modifiedModel = diffEditor?.getModel()?.modified if (originalModel) originalModel.dispose() if (modifiedModel) modifiedModel.dispose() }7. 部署与生产环境优化
最后，我们需要考虑如何优化生产环境构建：
- 按需加载Monaco Editor功能：
// vite.config.ts import { defineConfig } from 'vite' import monacoEditorPlugin from 'vite-plugin-monaco-editor' export default defineConfig({ plugins: [ monacoEditorPlugin({ languageWorkers: ['editorWorkerService', 'typescript'] }) ] })- CDN配置：
<!-- index.html --> <script> window.MonacoEnvironment = { getWorkerUrl: function (moduleId, label) { if (label === 'json') { return './json.worker.js' } if (label === 'typescript' || label === 'javascript') { return './ts.worker.js' } return './editor.worker.js' } } </script>- 性能监控：
// 添加编辑器性能监控 const perfMetrics = { diffComputationTime: 0, renderTime: 0 } const startTime = performance.now() diffEditor.setModel(models) const endTime = performance.now() perfMetrics.diffComputationTime = endTime - startTime // 可以定期上报这些指标 setInterval(() => { trackPerfMetrics(perfMetrics) }, 60000)