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

最新推荐文章于 2025-10-25 10:17:35 发布

原创最新推荐文章于 2025-10-25 10:17:35 发布 · 1.5w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue实现SQL代码的格式化

vue使用codemirror实现代码编辑器同时被 2 个专栏收录

1 篇文章

订阅专栏

SQL代码格式化

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用codemirror代码编辑器结合sql-formatter插件，实现SQL代码的格式化功能。通过npm安装sql-formatter，引入并调用相关方法，即可轻松完成SQL代码的美化。

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));
      }