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

article/2025/9/29 3:17:11

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

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

npm install --save sql-formatter

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

import sqlFormatter from "sql-formatter";

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

 /*代码格式化*/format(){/*获取文本编辑器内容*/let sqlContent="";sqlContent=this.editor.getValue();/*将sql内容进行格式后放入编辑器中*/this.editor.setValue(sqlFormatter.format(sqlContent));}

4、下面截图就是格式化前与格式化后的区别格式化代码前

格式化代码后

好了,到此这个功能就OK啦,有需要的自己去尝试下吧,很方便的


http://chatgpt.dhexx.cn/article/gqtmjDAx.shtml

相关文章

SQL Server 代码颜色

今天初识SQL Server 随便敲了点代码、发现这代码真是五颜六色、既然有颜色就有寓意! 原来有这么多颜色、真是学习了! _____________________________chenchen

IDEA格式化SQL代码

IDEA格式化SQL代码 写在前面1.1、建立连接,数据库服务器地址,账号,密码等..1.2、基本操作,很多,增删改查,控制台SQl编写等等 写在前面 IntelliJ IDEA集成了很多我们开发中常用的工具,Linux连接…

SQL除法怎么用代码表示

SQL除法代码详解 前言一、除运算(关系代数)二、第一题:2.1导入数据到SQL Server:2.2理解:2.2.1代码:2.2.2↑代码理解和答案: 三、第二题:求使用了同“供应商S1所供应的全部零件”相同…

VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示

1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件 npm install --save codemirror npm install --save sql-formatter2、然后引入该文件 import codemirror/theme/ambiance.css import codemirror/lib/codemirror.css import codemirror/addon/hint/show-hint.cssc…

数据库SQL(基础代码)

启动、连接、断开和停止MySQL服务器 通过系统服务器和命令提示符(DOS)都可以启动、连接断开和停击MySQL,操作非常简单。 1.启动、停止MySQL服务器   启动、停止MySQL服务器,的方法有两种:系统服务器和命令提示符(DOS)。 (1)通过系统服务器启动、停止MySQL服务器   …

html640设计稿,移动设备分辨率(终于弄懂了为什么移动端设计稿总是640px和750px)...

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么 问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿&#xf…

1px像素问题

为什么会存在1px问题?怎么解决? - 掘金 作为前端,你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐 - 掘金 解决移动端1px边框问题的几种方法 - AhuntSun - 博客园 1、分辨率 分辨率x像素(水平) * …

px和分辨率的关系总结

在相同的屏幕宽高下:如:15.6英寸(396.24毫米)的笔记本电脑: 每单位1920*xxx的分辨率1366*xxx的分辨率一毫米1920/396.244.8个px1366/396.243.4个px 高分辨率意味着大约每一毫米5像素点,像素点越多&#x…

uni-app之响应式单位upx和rpx

一、upx uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。 uni-app 规定屏幕基准宽度750upx。 开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下&…

HTML5 实现本地图片裁剪

HTML5 实现本地图片裁剪 文章目录 HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles,获取文件,读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 js部分 代码 这次小的案例是…

css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应

关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题。 目录 **关于 css像素px,物理像素(pt),设备像素比…

html怎么设置页面最小像素,html px像素单位

html长度尺寸单位px像素 设置字体大小以像素单位 笼统设置装备摆设宽度width、高度height、border边框等花式数字单位px。 一、px引见 px是html长度单元像素。譬如咱们电脑、手机显示屏均使用因而像素为单元,也即是px为单位。透露表现屏区分率1200*800其实便是指120…

【CSS】物理像素 DP(device pixels)、物理像素比(DPR)、px 逻辑像素(CSS像素)、DPI、PPI 的概念解析 以及1px问题解决方法

物理像素 、物理像素比、物理像素比、px 逻辑像素概念解析 前言一、前提概念1.分辨率与物理尺寸关系目前绝大部分显示器都是基于点阵的同样的分辨率下,每个小点的尺寸仍然是可以大可以小的DPI(点每英寸)PPI(像素每英寸&#xff09…

pixel(css pixel device pixel)resolutioncss pixel(像素和分辨率)

文章目录 pixel&resolution(像素和分辨率)reference像素和分辨率分辨率屏幕像素像素&分辨率示例图像像素小结css 像素 开发中遇到的像素问题使用密度无关像素(android)将 dp 单位转换为像素单位 css pixel & device pixelreferencespx&dpi(device pixel & …

区别css单位px、em、rem

在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解: em与px转换 一般浏览器默认1em16px,通过设置font-size大小来代表如:16px*0.62510px&am…

移动端1px像素问题及解决办法

在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。首选先看一下,pc时代和移动端时代对1px的对比。 …

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率、设备像素(device-width)和CSS像素(width)这些术语,在很多语境下,是可互换的,但也因此容易在有差异的地方引起混淆,实际上它们是不同的概念。 屏幕分辨率和设备像…

【移动端适配】为什么根元素font-size设置成100px或625%?

rem:是一个相对单位,相对根元素字体大小的单位,再直白点就是相对于html元素字体大小的单位。 优点:这样在计算子元素有关的尺寸时,只要根据html元素字体大小计算就好。不再像使用em时,得来回的找父元素字体…

解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem rpx (cssrem)

px to rem & rpx (cssrem) - Visual Studio MarketplaceExtension for Visual Studio Code - Converts between px and rem & rpx units in VSCodehttps://marketplace.visualstudio.com/items?itemNamecipchk.cssrem 在CSS文件中输入px就会自动计算rem了

移动端布局介绍——css像素/物理像素/设备像素比

我们在网页后台看到的不同手机的分辨率是:css像素,设备的独立像素;见下图的红色框里的东西: 如果我们把这个页面截图下来在属性里看它的分辨率, 如下图所示: 发现这个分辨率其实是css分辨率的二倍&#xf…