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 提供的能力,呈现自动补全等高级功能。