vue实现codemirror代码编辑器中的SQL代码格式化功能

最新推荐文章于 2025-05-16 11:28:18 发布
最新推荐文章于 2025-05-16 11:28:18 发布
阅读量1.5w 收藏 7
点赞数 2
分类专栏： vue使用codemirror实现代码编辑器 SQL代码格式化 文章标签： vue实现SQL代码的格式化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mySpringandhibernate/article/details/84630379
版权
本文介绍了如何在Vue项目中利用codemirror代码编辑器结合sql-formatter插件，实现SQL代码的格式化功能。通过npm安装sql-formatter，引入并调用相关方法，即可轻松完成SQL代码的美化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue实现codemirror代码编辑器中的SQL代码格式化功能

1、首先使用npm安装sql-formatter插件

npm install --save sql-formatter

2、然后引入该sql-formatter.js文件

import sqlFormatter from "sql-formatter";

3、接下来就是针对需要格式化的代码调用该方法就OK啦

 /*代码格式化*/
      format(){
   
        /*获取文本编辑器内容*/<
最低0.47元/天 解锁文章
codeMirror之实现代码格式化代码功能
在路上`的博客
01-18 2707
prettier.format 是 Prettier 库的一个主要方法，用于格式化代码。它接收两个参数：要格式化的代码字符串和一个选项对象。parser（解析器）：这是必须的选项，用于指定解析代码的解析器。Prettier 支持多种语言，每种语言都有对应的解析器，例如 babel（用于 JavaScript）、html、css、json 等。printWidth（打印宽度）：指定每行代码的最大长度。如果超过这个长度，Prettier 会尽可能地进行折行。默认值是 80。
前端vue项目中使用sql-formatter结合codemirror实现sql编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能
热门推荐
Mini_小仙女的博客
03-26 2万+
vue实现codemirror代码编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能 前几天公司项目需要做个类似HUE的sql编辑器，需要实现sql语句的格式化功能、自动匹配大小写、代码高亮等功能。现部门是做大数据的，所以各种数据各种sql各种hive，对于我一个纯前端妹子来讲对什么后台呀什么sql语句呀一点也不感兴趣，更是完全不懂。头大~~ 原本领导说是让我研究HUE源码，提取js，b...
codemirror 使用 sql 模式时，部分关键字无法智能提示的问题
博客
12-28 2445
解决 codemirror 的 sql 模式关键字提示不完整问题
在 Vue3 中使用 CodeMirror 6 的代码示例及详细解释
qinhan5667的博客
02-19 1126
通过以上代码示例和详细解释，我们可以在 Vue3 中成功使用 CodeMirror 6，并实现代码编辑器的功能。希望本文能够帮助大家更好地理解和使用 CodeMirror 6。
Vue3中使用vue-codemirror实现代码在线编辑和效果预览
最新发布
可可爱爱的你吖的博客
05-16 483
Vue3中使用vue-codemirror实现代码在线编辑和效果预览
codeMirror代码格式化（官方demo）
06-14
codeMirror代码格式化工具,支持sql、C、Java等目前主流的编程语言
codemirror支持中文数据库模式表字段SQL自动代码提示
03-25
codemirror的sql代码提示默认是不支持中文表名自动提示的，在源码中写法只是检索字母数字下划线，加上中文匹配的正则后，终于支持中文表了。修改文件只有sql.js，其他文件只是为了方便打断点，格式化了一下方法
vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句
小猫爪子
06-18 7567
需求：实现一个SQL编辑区，通过左侧选择自动生成SQL语句。 这里写目录标题codemirror代码编辑器使用已经封装好的组件，可自行配置参数直接复制使用。（使用的idea主题）二级目录SQL代码格式化功能SQL代码格式化遇到的bug codemirror代码编辑器使用 已经封装好的组件，可自行配置参数直接复制使用。（使用的idea主题） //封装好的组件 <template> <div class="json-editor"> <textarea ref="t
sqlformatter:SQLFormatter
05-02
SQLFormatter：用于记录的漂亮的彩色SQL语句 将SQL登录到控制台可帮助您了解ORM下发生的情况。 但是，查询可能会在代码墙上产生很大的结果。 SQLFormater是一种日志记录格式化程序，可识别并着色您SQL语句，使所有内容再次清晰可见。 看起来如何？ 安装 pip install sqlformatter 用法 有2种使用方式。 在控制台会话期间临时启用它 在控制台会话期间，尝试进行实验时显示查询可能会很有趣。 您可以通过调用辅助函数logdb来切换sql输出日志记录。 from sqlformatter import logdb # Enable logdb () # Run your query MyModel . objects . all () # Disable logdb () 将其添加到Django日志记录设置 您可以将其添加到Django LOGG
基于CodeMirror的一个在线sql编辑工具
04-17
* 左侧提供数据库表字段树形结构，可拖拽到sql编辑框。 * 输入首字母可提示表名字段名（表名字段名可自定义） 。 *括号高亮匹配。 * 执行与中断功能。 * 自定义外部接口获取sql关键词、函数、表字段等，用于sql编辑时提示补全,键盘录入后自动提示，上下键选择，tab键或点击选中项自动补全。 * sql格式化。
vue-codemirror 格式化SQL语句 及 使用sql-formatter插件Cannot read properties of undefined (reading ‘format‘) 报错
double_Fly_的博客
08-03 3623
格式化前格式化后。
vue实现sql高亮,格式化,自动匹配大小写功能
编写博客，学习交流
11-08 3668
1.安装 sql-formatter选择低版本,高版本会出错 npm install --save sql-formatter@2.3.3 npm install --save vue-codemirror 2.使用方式 封装的子组件SqlEditor <template> <div> <textarea ref="mycode" class="codesql" v-mode
vue3 codemirror插件 格式化SQL语句
qq_39307266的博客
11-20 468
参考链接：https://blog.youkuaiyun.com/weixin_44784401/article/details/135884491。3使用 value = sqlFormatter.format(value)–value是codemirror绑定的SQL语句。2.引入 import * as sqlFormatter from “sql-formatter”;背景：一个需求是用了codemirror代码编辑器 ，输入SQL命令，并且可以对SQL格式化。1.安装 sql-formatter。
Vue 实现 codeMirror 结合 sql-formatter 实现 sql 高亮及格式化
Echo___Echo的博客
10-24 5658
Vue 实现 codeMirror 结合 sql-formatter 实现 sql 高亮及格式化 背景: 需求是页面渲染一个类似 SQL 编辑器的功能,需要支持关键字高亮以及格式化功能 由于之前做过一个小 demo,接触过codeMirror,手到擒来,先在项目中引入 codeMirror 实现编辑器的功能 npm 安装 vue-codemirror 插件 npm install vue-codemirror --save 在项目中引入 vue-codemirror 官网上有引入方式请参考官网
vue：sql 语句格式化、高亮、代码
m0_59329255的博客
01-22 1835
11
在vue项目中使用monaco-editor插件实现代码编辑器功能（以及sql格式化功能）
ya_nan_zhang的博客
05-28 1万+
** 记一次vue-cli2项目中使用monaco-editer编辑器插件 ** 1、使用npm安装依赖 npm install monaco-editor --save npm install monaco-editor-webpack-plugin --save-dev 2、在webpack.base.conf.js如下 3、在使用过程如下 格式化功能 使用了sql-formatter插...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值