vue3中使用ace-builds，并设置自定义代码提示（Echarts 配置项），添加代码格式化功能

原创

已于 2024-01-11 20:45:06 修改 · 2k 阅读

标签

#echarts #vue.js #前端

收录于

于 2024-01-11 20:43:22 首次发布

首先安装 ace-builds

“ace-builds”: “^1.24.0”

代码中
import { keywords } from '@/editor/data/option-keywords' 是自定义的代码提示配置文件

自定义代码提示文件内容如下图：
在这里插入图片描述
其实还可以添加一个代码格式化插件。
import beautify from 'js-beautify';

“js-beautify”: “^1.14.9”,

完整代码如下：

<template>
    <div ref="ace_dom"></div>
</template>
<script setup lang="ts">
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/ext-language_tools'
import {
   
    onMounted, ref } from 'vue';
import {
   
    keywords } from '@/editor/data/option-keywords'