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

首先安装 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'
import beautify from 'js-beautify';const props = defineProps({modelValue: String
})const emit = defineEmits(['update:modelValue'])const ace_dom = ref(null)
onMounted(() => {const editor = ace.edit(ace_dom.value, {enableSnippets: true,enableBasicAutocompletion: true,enableLiveAutocompletion: true,maxLines: 50, // 最大行数,超过会自动出现滚动条minLines: 30, // 最小行数,还未到最大行数时,编辑器会自动伸缩大小fontSize: 14, // 编辑器内字体大小mode: 'ace/mode/javascript', // 默认设置的语言模式tabSize: 4, // 制表符设置为 4 个空格大小useWorker: false,value: props.modelValue || '', // 格式化代码的话这行代码就没必要存在了。})
// 如果需要格式化代码, 添加下面这代码
editor.setValue(beautify(props.modelValue || "", {/* 格式化代码配置项 */}), 1);const completions = keywords.map(keyword => ({caption: keyword.name,value: keyword.name,score: keyword.count,meta: 'local'}))ace.config.loadModule('ace/ext/language_tools', langTools => {langTools.addCompleter({getCompletions: function (editor, session, pos, prefix, callback) {callback(null, completions)}})})editor.getSession().on('change', () => emit('update:modelValue', editor.getValue().trim()))
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/341106.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

概率论与数理统计-第6章 参数估计

6.1 点估计问题概述 一、点估计的概念 二、评价估计量的标准 无偏性 定义1&#xff1a;设^ θ(X1,…,Xn)是未知参数θ的估计量&#xff0c;若E(^ θ)θ,则称^θ为θ的无偏估计量定理1&#xff1a;设X1,…,Xn,为取自总体X的样本&#xff0c;总体X的均值为μ&#xff0c;方差为…

【Python学习】Python学习14-函数

目录 【Python学习】Python学习14-函数 前言自定义函数创建语法自定义函数与调用参数传递参考 文章所属专区 Python学习 前言 本章节主要说明Python的函数。函数是组织好的&#xff0c;可重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段。 函数能提高应…

Maintaining Performance with Less Data(待补)

文章目录 AbstractIntroductionPrevious WorkIncreasing data useReducing data useVariable data useContribution MethodsDatasetsHardwarePerformance MetricsNetwork Architecture ExperimentationBenchmarkData stepobserve Data IncrementData Cut DiscussionConclusion …

制造企业实施WMS仓储管理系统后的变革与挑战

随着市场竞争的日益激烈&#xff0c;制造型企业对于提高生产效率和降低运营成本的需求愈发迫切。在这一背景下&#xff0c;WMS仓储管理系统解决方案逐渐成为制造业企业的必备工具。然而&#xff0c;实施WMS仓储管理系统不仅意味着企业将迎来一系列的变革&#xff0c;还将面临一…

数据采集卡:16通道16位250KHz AD,支持单点采集,程控增益

概述 USB-XM1603是一款性价比极高的多功能通用A/D板&#xff0c;经过精心设计&#xff0c;采用USB2.0总线支持热插拔&#xff0c;即插即用&#xff0c;无需地址跳线。适合测量变送器输出、直流电压等场合的测量应用。USB-XM1603具有16路单端16位程控增益模拟输入、4路16位模拟…

工单系统:助力传统服务行业实现数字化转型的关键要素

数字化转型的浪潮冲击着传统服务业&#xff0c;对其造成了巨大的影响。其中&#xff0c;工单系统以其多样和强大的功能性&#xff0c;成为传统服务行业必备的数字工具。今天&#xff0c;小编就来大家来聊聊工单系统对传统服务行业有哪些影响&#xff1f;希望对于还未投入使用的…

【Spring Cloud】Sentinel流量限流和熔断降级的讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Spring Cloud》。&#x1f3af;&#x1f3af; &am…

性能分析与调优: Linux 磁盘I/O 观测工具

目录 一、实验 1.环境 2.iostat 3.sar 4.pidstat 5.perf 6. biolatency 7. biosnoop 8.iotop、biotop 9.blktrace 10.bpftrace 11.smartctl 二、问题 1.如何查看PSI数据 2.iotop如何安装 3.smartctl如何使用 一、实验 1.环境 &#xff08;1&#xff09;主机 …

【AI视野·今日CV 计算机视觉论文速览 第285期】Mon, 8 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Mon, 8 Jan 2024 Totally 66 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Denoising Vision Transformers Authors Jiawei Yang, Katie Z Luo, Jiefeng Li, Kilian Q Weinberger, Yonglong Tian, Yue…

抛弃安卓,追赶iOS,鸿蒙能否成为中国第二大系统?

据半导体行业观察机构Techinsights发布报告预测&#xff0c;从2024年起&#xff0c;鸿蒙Harmony OS将取代苹果iOS&#xff0c;成为中国市场上第二大智能手机操作系统。 鸿蒙系统&#xff0c;支棱起来了&#xff01;去年&#xff0c;华为前脚“复活”麒麟芯片&#xff0c;后脚宣…

最详细手把手教你安装 Vivado2019.2

Vivado 是 FPGA 厂商赛灵思公司&#xff08;Xilinx&#xff09;于 2012 年起发布的集成设计环境。 Vivado 2019.2 是 2019 年 Xilinx 推出的 Vivado 最后一个版本&#xff0c;相对稳定&#xff0c;并推出了新式的嵌入式开发平台 Vitis。 软件下载 官网可下载各个版本百度网盘…

Unity Delaunay三角剖分算法 动态生成

Unity Delaunay三角剖分算法 动态生成 Delaunay三角剖分Delaunay三角剖分 定义Delaunay 边Delaunay 空圆特性 Delaunay 三角形Delaunay 最大化最小角特性 Delaunay 三角形特征Delaunay 算法Delaunay Lawson算法Delaunay Bowyer-Watson算法 Unity Delaunay三角剖分 应用Unity 工…