开箱即用的代码编辑器:Vue-Codemirror 完全使用指南

在 Vue 项目开发中，我们经常需要实现代码编辑、代码高亮、代码格式化、语法校验等功能，比如后台配置页的 JSON 编辑器、前端在线调试工具、SQL 脚本编写、Markdown 编辑等场景。原生实现这些功能成本极高，而vue-codemirror就是解决这类需求的最佳方案 —— 它基于成熟的 CodeMirror 封装，轻量、可扩展、支持几乎所有编程语言，完美适配 Vue2/Vue3 生态。

本文将从基础安装、核心使用、高级配置、实战场景四个维度，带你彻底掌握 vue-codemirror 的使用。

一、vue-codemirror 简介

vue-codemirror 是CodeMirror 代码编辑器的 Vue 封装组件，核心特性：

支持 Vue2 和 Vue3，无侵入式集成；
内置 100+ 种编程语言语法高亮（JavaScript、Python、Java、JSON、SQL、Markdown 等）；
支持代码折叠、行号显示、主题切换、只读模式、代码格式化；
轻量按需引入，避免打包体积过大；
支持双向绑定，无缝对接 Vue 数据响应式。

版本说明：Vue3 推荐使用vue-codemirror@6.x（基于 CodeMirror 6），Vue2 推荐使用vue-codemirror@5.x（基于 CodeMirror 5），本文以Vue3 + vue-codemirror 6为核心讲解。

二、快速安装

首先在 Vue3 项目中安装依赖，执行命令：

# 核心组件npm install vue-codemirror# 核心依赖（CodeMirror6 原生包）npm install @codemirror/state @codemirror/view# 按需安装语言包、主题包（根据需求选择）npm install @codemirror/lang-javascript @codemirror/lang-json @codemirror/lang-sqlnpm install @codemirror/theme-one-dark

三、基础使用（全局注册 + 局部使用）

1. 全局注册（推荐）

在main.js中全局注册组件，项目内直接使用，无需重复引入：

import { createApp } from 'vue'import App from './App.vue'// 引入 vue-codemirror 核心import { Codemirror } from 'vue-codemirror'// 引入基础样式import 'codemirror/lib/codemirror.css'const app = createApp(App)// 全局注册组件app.component('Codemirror', Codemirror)app.mount('#app')

2. 基础代码编辑器（JSON 示例）

在页面中直接使用标签，实现双向绑定、行号显示、JSON 语法高亮：

<template>  <divclass="editor-container">    <h3>基础 JSON 代码编辑器</h3>    <!-- codemirror 组件 -->    <Codemirror      v-model="code"      :extensions="extensions"      placeholder="请输入 JSON 代码"    />    <!-- 实时预览编辑内容 -->    <divclass="preview">      <h4>实时预览：</h4>      <pre>{{ code }}</pre>    </div>  </div></template><scriptsetup>import { ref } from 'vue'// 引入语言包import { json } from '@codemirror/lang-json'// 编辑器配置（语法高亮、行号、基础功能）const extensions = [  json(), // JSON 语法高亮]// 双向绑定的代码数据const code = ref('{"name":"vue-codemirror","version":"6.x","usage":"code editor"}')</script><stylescoped>.editor-container {  max-width: 800px;  margin: 20px auto;}/* 编辑器高度 */:deep(.cm-editor) {  height: 300px;  border: 1px solid #eee;}.preview {  margin-top: 20px;  padding: 10px;  background: #f5f5f5;}</style>

四、核心配置与高级功能

vue-codemirror 的核心能力来自extensions（扩展配置），我们可以通过扩展实现主题、只读、代码折叠、自动格式化、行数限制等功能。

1. 切换编辑器主题

CodeMirror6 提供多种官方主题，以One Dark 深色主题为例：

// 引入主题包import { oneDark } from '@codemirror/theme-one-dark'// 引入主题样式import '@codemirror/theme-one-dark/style.css'// 扩展配置中加入主题const extensions = [  json(),  oneDark // 启用深色主题]

2. 只读 / 禁用编辑模式

适用于代码展示、日志查看场景，禁止用户编辑：

import { EditorState, Compartment } from '@codemirror/state'import { editable } from '@codemirror/view'// 定义只读配置const editableComp = new Compartment()const extensions = [  json(),  oneDark,  // 禁用编辑：editableComp.of(editable.of(false))  // 可编辑：editableComp.of(editable.of(true))  editableComp.of(editable.of(false))]

3. 显示行号、代码折叠

默认已开启行号，如需强化配置（代码折叠、行号高亮）：

import { lineNumbers, foldGutter } from '@codemirror/view'import { foldKeymap } from '@codemirror/language'const extensions = [  json(),  oneDark,  lineNumbers(), // 显示行号  foldGutter(), // 代码折叠  foldKeymap // 折叠快捷键]

4. 多语言支持（JavaScript/SQL/Markdown）

只需切换对应的语言包，即可实现不同语法高亮：

// JavaScript 语法import { javascript } from '@codemirror/lang-javascript'// SQL 语法import { sql } from '@codemirror/lang-sql'// Markdown 语法import { markdown } from '@codemirror/lang-markdown'// 按需切换const extensions = [javascript()] // JS 编辑器// const extensions = [sql()] // SQL 编辑器// const extensions = [markdown()] // Markdown 编辑器

5. 自定义事件监听

支持监听编辑、聚焦、失焦、滚动等事件，满足业务交互需求：

<Codemirror  v-model="code"  :extensions="extensions"  @change="handleChange"  @focus="handleFocus"  @blur="handleBlur"/><scriptsetup>const handleChange = (value) => {  console.log('代码变化：', value)}const handleFocus = () => {  console.log('编辑器聚焦')}const handleBlur = () => {  console.log('编辑器失焦')}</script>

五、企业级实战场景

场景 1：后台 JSON 配置编辑器

后台管理系统中，常需要编辑 JSON 格式的配置文件，需求：语法高亮、自动格式化、校验、只读切换：

<template>  <divclass="json-editor">    <el-button @click="formatCode">格式化代码</el-button>    <el-button @click="toggleEditable">{{ isEditable ? '禁用编辑' : '启用编辑' }}</el-button>    <Codemirror      v-model="jsonCode"      :extensions="extensions"      placeholder="请输入合法 JSON"    />  </div></template><scriptsetup>import { ref, computed } from 'vue'import { json } from '@codemirror/lang-json'import { oneDark } from '@codemirror/theme-one-dark'import { editable } from '@codemirror/view'import { Compartment } from '@codemirror/state'const jsonCode = ref('{}')const isEditable = ref(true)const editableComp = new Compartment()// 格式化 JSON 代码const formatCode = () => {  try {    jsonCode.value = JSON.stringify(JSON.parse(jsonCode.value), null, 2)  } catch (err) {    alert('JSON 格式不合法')  }}// 切换编辑状态const toggleEditable = () => {  isEditable.value = !isEditable.value}// 动态扩展配置const extensions = computed(() => [  json(),  oneDark,  editableComp.of(editable.of(isEditable.value))])</script>

场景 2：SQL 脚本编辑器

适用于数据平台、运维工具，支持 SQL 语法高亮、关键字提示、多行编辑：

// 核心配置import { sql } from '@codemirror/lang-sql'const extensions = [  sql(), // SQL 语法高亮  lineNumbers(),  foldGutter()]

六、常见问题与优化

打包体积过大：按需引入语言包 / 主题包，不要全量引入；

编辑器不显示：检查是否引入codemirror.css基础样式，设置编辑器固定高度；

双向绑定失效：确保使用v-model绑定，数据为ref响应式对象；

语法不高亮：确认语言包安装正确，且加入extensions配置。

七、总结

vue-codemirror 是 Vue 生态中最成熟、最轻量的代码编辑器解决方案，从简单的代码展示到复杂的在线 IDE 功能都能轻松实现。核心优势：

开箱即用，零门槛集成到 Vue 项目；

按需扩展，体积可控，支持 100+ 种语言；

双向绑定 + 事件系统，完美适配 Vue 开发习惯；

企业级稳定，支持生产环境复杂场景。

无论你是开发后台配置工具、在线调试平台，还是代码展示页面，vue-codemirror 都是最优选择。