强大的代码编辑器【vue3-ace-editor的使用】

vue3-ace-editor网站地址

 Ace官网：Ace - The High Performance Code Editor for the Web

vue3-ace-editor仓库地址：https://github.com/CarterLi/vue3-ace-editor?tab=readme-ov-file

vue3-ace-editor的使用

1，安装vue3-ace-editor库 和相关 Vue 组件

如果你还没有安装 Ace Editor 或其 Vue 封装组件，你需要先安装它们。例如，如果你使用的是 vue-ace-editor，你可以通过 npm 或 yarn 安装：

npm i vue3-ace-editor ace-builds
yarn add vue3-ace-editor ace-builds
pnpm i vue3-ace-editor ace-builds

如果你需要sql的代码格式化，那么你还需要安装下面的库：

npm install sql-formatter
# 或者
yarn add sql-formatter

2 , 导入 Ace Editor 和相关模块

import { VAceEditor } from "vue3-ace-editor";

import "ace-builds/src-noconflict/theme-chrome"; //编辑器的主题

import "ace-builds/src-min-noconflict/ext-language_tools"; // 这将加载语言工具，sql自动补全功能
import "ace-builds/src-min-noconflict/mode-sql"; // 确保导入了 SQL 模式

import { format } from "sql-formatter"; // 假设你使用的是 sql-formatter 库

3, 配置你的 Vue 组件

<template>
    <v-ace-editor
       v-model:value="content"
       lang="sql"
       :options="editorOptions"
       theme="chrome"
       class="editor"
     />
    <a-tooltip title="格式化" color="black">
        <a-button @click="formatSql">格式化</a-button>
    </a-tooltip>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { VAceEditor } from "vue3-ace-editor";

import "ace-builds/src-noconflict/theme-chrome"; //编辑器的主题

import "ace-builds/src-min-noconflict/ext-language_tools"; 
// 这将加载语言工具，sql自动补全功能
import "ace-builds/src-min-noconflict/mode-sql"; // 确保导入了 SQL 模式

import { format } from "sql-formatter"; // 假设你使用的是 sql-formatter 库

//编辑器中的内容
const content = ref("SELECT * FROM aaa");

// 代码编辑器的配置
const editorOptions = ref({
  fontSize: "14px",
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  enableSnippets: true,
  showPrintMargin: false,
});

//格式化sql语句按钮
const formatSql = () => {
  // 使用 sqlFormatter 库格式化 SQL 内容
  const formattedSql = format(content.value);
  // 更新 Ace Editor 的内容
  content.value = formattedSql;
};
</script>

 效果：

现在，你就得到了支持sql语言高亮和代码补全功能的代码编辑器啦~~~ 

如果你想让它支持其他语言的高亮和代码补全功能，

只需要3步：

1，修改lang的值

2，修改

        import "ace-builds/src-min-noconflict/mode-sql"; // 确保导入了 SQL 模式

      为该语言的包。

3，安装相关代码格式化的库并引入和使用。