vue3-ace-editor使用记录

vue3-ace-editor 是一个基于 Ace Editor（流行的 web 前端代码编辑器）封装的 Vue 3 组件库，它允许在 Vue 程序中轻松集成和自定义 Ace 编辑器的功能。

支持多种编程语言的语法高亮、自动补全、主题切换、多语言支持等高级特性，使得开发者能够构建功能丰富的在线代码编辑器或 JSON 格式查看与编辑器等功能。

适用于开发IDE、在线代码编辑器、JSON编辑器等多种应用场景。

一、安装

npm i vue3-ace-editor

二、使用

1、新增配置文件 aceConfig.js

// ace配置，使用动态加载来避免第一次加载开销
import ace from "ace-builds";

// 导入不同的主题模块，并设置对应 URL
import themeGithubUrl from "ace-builds/src-noconflict/theme-github?url";
ace.config.setModuleUrl("ace/theme/github", themeGithubUrl);

import themeChromeUrl from "ace-builds/src-noconflict/theme-chrome?url";
ace.config.setModuleUrl("ace/theme/chrome", themeChromeUrl);

import themeMonokaiUrl from "ace-builds/src-noconflict/theme-monokai?url";
ace.config.setModuleUrl("ace/theme/monokai", themeMonokaiUrl);

// 导入不同语言的语法模式模块，并设置对应 URL (所有支持的主题和模式：node_modules/ace-builds/src-noconflict)
import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
ace.config.setModuleUrl("ace/mode/json", modeJsonUrl);

import modeJavascriptUrl from "ace-builds/src-noconflict/mode-javascript?url";
ace.config.setModuleUrl("ace/mode/javascript", modeJavascriptUrl);

import modeHtmlUrl from "ace-builds/src-noconflict/mode-html?url";
ace.config.setModuleUrl("ace/mode/html", modeHtmlUrl);

import modePythonUrl from "ace-builds/src-noconflict/mode-python?url";
ace.config.setModuleUrl("ace/mode/yaml", modePythonUrl);

// 用于完成语法检查、代码提示、自动补全等代码编辑功能，必须注册模块 ace/mode/lang _ worker，并设置选项 useWorker: true
import workerBaseUrl from "ace-builds/src-noconflict/worker-base?url";
ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);

import workerJsonUrl from "ace-builds/src-noconflict/worker-json?url"; // for vite
ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);

import workerJavascriptUrl from "ace-builds/src-noconflict/worker-javascript?url";
ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);

import workerHtmlUrl from "ace-builds/src-noconflict/worker-html?url";
ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);

// 导入不同语言的代码片段，提供代码自动补全和代码块功能
import snippetsJsonUrl from "ace-builds/src-noconflict/snippets/json?url";
ace.config.setModuleUrl("ace/snippets/json", snippetsJsonUrl);

import snippetsJsUrl from "ace-builds/src-noconflict/snippets/javascript?url";
ace.config.setModuleUrl("ace/snippets/javascript", snippetsJsUrl);

import snippetsHtmlUrl from "ace-builds/src-noconflict/snippets/html?url";
ace.config.setModuleUrl("ace/snippets/html", snippetsHtmlUrl);

import snippetsPyhontUrl from "ace-builds/src-noconflict/snippets/python?url";
ace.config.setModuleUrl("ace/snippets/javascript", snippetsPyhontUrl);

// 启用自动补全等高级编辑支持，
import extSearchboxUrl from "ace-builds/src-noconflict/ext-searchbox?url";
ace.config.setModuleUrl("ace/ext/searchbox", extSearchboxUrl);

// 启用自动补全等高级编辑支持
import "ace-builds/src-noconflict/ext-language_tools";
ace.require("ace/ext/language_tools");

2、在页面使用（json示例）

<template>
  <v-ace-editor
    v-model:value="content"
    lang="json"
    theme="github"
    :options="options"
    class="vue-ace-editor"
  />
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

import { VAceEditor } from "vue3-ace-editor";
import "./aceConfig.js";
import type { Ace } from "ace-builds";

const content = ref(''); // 显示的内容

const options: Partial<Ace.EditorOptions> = reactive({
  useWorker: true, // 启用语法检查,必须为true
  enableBasicAutocompletion: true, // 自动补全
  enableLiveAutocompletion: true, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: true, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 4, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  readonly: false, // 是否可编辑
  // minLines: 10, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  // maxLines: 50, // 最大行数
});
</script>

<style scoped>
.vue-ace-editor {
  /* ace-editor默认没有高度，所以必须设置高度，或者同时设置最小行和最大行使编辑器的高度自动增高 */
  height: 300px;
  width: 10%;
  font-size: 16px;
  border: 1px solid;
}
</style>

页面展示如下：

三、配置模块说明

theme 模块

用于定义不同的主题。

mode 模块

用于定义不同语言的语法规则，包括语法高亮、代码折叠、缩进等。

导入不同语言的 mode 模块可以让 Ace 编辑器支持对应的语言语法。

worker 模块

用于完成语法检查、代码提示、自动补全等代码编辑功能。
其中：base worker 提供最基本的编辑功能。语言特定的 worker，可以提供对应的智能语法功能。
注：Worker 模块需要结合对应的 mode 模块才能发挥作用。

snippets 模块

提供代码自动补全和代码块功能。代码片段为不同语言提供了常用代码块，用户可以通过触发关键字快速插入预定义的代码模板。

例如：在 JavaScript 代码中输入 “for” 并触发补全,可以自动插入一个 for 循环代码块。

主要作用包括:

• 提高编程效率，通过代码片段可以快速插入常用代码块，不用每次都重新编写重复代码。

• 减少编码错误，代码片段已定义好语法结构，使用后可以避免语法错误。

• 标准化代码风格，开发团队可以定义统一的代码片段，维持一致的代码风格。

• 支持不同语言，导入 html、js、yaml 等语言的片段可以分别编写对应的文件类型。

• 方便新手学习编程语言，可以通过代码片段查看语言代码结构和语法样例。

• 可以自定义代码片段，开发者可以根据项目需要自行定义额外的代码片段。

ext-language_tools 模块

ext-language_tools 基于语法模式和 Worker 模块展示出自动补全、构建语法树等高级功能。

它们之间的关系是:

• 语法（snippets）模块提供基础的语法和编辑能力。
• worker 模块基于语法模式实现智能编辑功能。
• ext-language_tools 模块利用语法模式和 worker 提供的能力，呈现自动补全等高级功能。