vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句_sql-formatter.js

.json-editor>>>.CodeMirror {
		font-size: 14px;
		/* overflow-y:auto; */
		font-weight: normal
	}

.json-editor>>>.CodeMirror-scroll {}

.json-editor>>>.cm-s-rubyblue span.cm-string {
		color: #F08047;
	}
</style>

<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li></ul></pre> 
<p>//父组件调用</p> 
<pre data-index="2" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">//绑定value值即可
<code-mirror ref="codemirror" :value="content" :height="'400px'"></code-mirror>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> 
<h2><a name="t1"></a><a id="SQL_108"></a>SQL代码格式化功能</h2> 
<ul><li>npm安装sql-formatter插件（如果已安装淘宝镜像使用cnpm）</li></ul> 
<pre data-index="3" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">npm install --save sql-formatter
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 
<ul><li>引入该sql-formatter.js文件</li></ul> 
<pre data-index="4" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">import sqlFormatter from 'sql-formatter';
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 
<ul><li>使用方法</li></ul> 
<pre data-index="5" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">formatSql() {
	/*（sql编辑器内容绑定content参数） 将sql内容进行格式后放入编辑器中*/
    this.content = sqlFormatter.format(this.content);
},
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> 
<ul><li>格式化后效果<br> <img src="https://img-blog.csdnimg.cn/20210617175034643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></li></ul> 
<h2><a name="t2"></a><a id="SQLbug_134"></a>SQL代码格式化遇到的bug</h2> 
<ul><li>使用过程中遇到问题：<code>cannot read property ‘format‘ of undefined</code><br> 解决：版本问题，默认安装4.x.x版本，将版本改低即可。<br> <img src="https://img-blog.csdnimg.cn/20210617175156747.png" alt="在这里插入图片描述"></li></ul>
                </div><div data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/ka_xingl/article/details/117998681","extend1":"pc","ab":"new"}"><div></div></div>
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet">
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">
        <div><div><span>声明：</span>本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：<a href="https://www.wpsshop.cn/w/2023面试高手/article/detail/710233">https://www.wpsshop.cn/w/2023面试高手/article/detail/710233</a></div></div></div><div class="article_recommend"><div class="list_top">推荐阅读</div><div class="ListItems"><ul class="NewsList"><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="sql-formatter -- 格式化sql数据" href="/w/繁依Fanyi0/article/detail/710267" target="_blank"><em>sql</em>-<em>formatter</em> <em>--</em> 格式化<em>sql</em>数据...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="sql-formatter -- 格式化sql数据" href="/w/繁依Fanyi0/article/detail/710267" target="_blank">首先你需要一个可以展示代码的组件；我使用的是tech-ui(内部组件库)；_<em>sql</em>-<em>formatter</em><em>sql</em>-forma...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="sqlformatter格式化sql 中文列名包含空格的问题_sql formatter" href="/w/繁依Fanyi0/article/detail/710268" target="_blank"><em>sql</em><em>formatter</em><em>格式化</em><em>sql</em> 中文列名包含空格<em>的</em>问题<em>_</em><em>sql</em> <em>formatter</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="sqlformatter格式化sql 中文列名包含空格的问题_sql formatter" href="/w/繁依Fanyi0/article/detail/710268" target="_blank">这句话改为formattedQuery=formattedQuery+token.value;我<em>的</em><em>sql</em>formatte...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="SQL Formatter" href="/w/从前慢现在也慢/article/detail/710271" target="_blank">SQL <em>Formatter</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="SQL Formatter" href="/w/从前慢现在也慢/article/detail/710271" target="_blank">SQL <em>Formatter</em>SQL <em>Formatter</em> 是一个开源的 SQL 代码美化工具，可以帮助用户将不规范的 SQL...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="前端sql语句输入框以及格式化sql语句和sql关键词高亮---sql-formatter、vue-" href="/w/Cpp五条/article/detail/710274" target="_blank">前端<em>sql</em><em>语句</em>输入框以及<em>格式化</em><em>sql</em><em>语句</em>和<em>sql</em>关键词高亮---<em>sql</em>-<em>formatter</em>、vue-...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="前端sql语句输入框以及格式化sql语句和sql关键词高亮---sql-formatter、vue-" href="/w/Cpp五条/article/detail/710274" target="_blank">select * from 表格名称” 这个字符包含了中文，如果进行<em>格式化</em>，就会变成 “select * from 表 ...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Vue 实现 codeMirror 结合 sql-formatter 实现 sql 高亮及格式化" href="/w/繁依Fanyi0/article/detail/710278" target="_blank">Vue <em>实现</em> <em>codeMirror</em> 结合 <em>sql</em>-<em>formatter</em> <em>实现</em> <em>sql</em> 高亮及<em>格式化</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Vue 实现 codeMirror 结合 sql-formatter 实现 sql 高亮及格式化" href="/w/繁依Fanyi0/article/detail/710278" target="_blank">Vue <em>实现</em> <em>codeMirror</em> 结合 <em>sql</em>-<em>formatter</em> <em>实现</em> <em>sql</em> 高亮及<em>格式化</em>背景:需求是页面渲染一个...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="需求 sql提示器和格式化，用vue-codemirror，sql-formatter，vue-hi" href="/w/菜鸟追梦旅行/article/detail/710280" target="_blank">需求 <em>sql</em>提示器和格式化，用<em>vue</em>-<em>codemirror</em>，<em>sql</em>-<em>formatter</em>，<em>vue</em>-hi...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="需求 sql提示器和格式化，用vue-codemirror，sql-formatter，vue-hi" href="/w/菜鸟追梦旅行/article/detail/710280" target="_blank">前言<em>sql</em>-<em>formatter</em>选择低版本,高版本会出错<em>sql</em>-<em>formatter</em>格式化 <em>vue</em>-<em>codemirror</em>文本...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="SQL文本数据格式化的方法(sql-formatter)" href="/w/从前慢现在也慢/article/detail/710317" target="_blank"><em>SQL</em>文本数据<em>格式化</em><em>的</em>方法(<em>sql</em>-<em>formatter</em>)...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="SQL文本数据格式化的方法(sql-formatter)" href="/w/从前慢现在也慢/article/detail/710317" target="_blank">首先安装<em>sql</em>-<em>formatter</em>npm install <em>sql</em>-<em>formatter</em> --save或者yarn add ...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li></ul><div class="list_tools_top">相关标签</div><div class="list_tools_box"><ul><li><a title="java" rel="nofollow" href="/s?w=java" target="_self">java</a></li><li><a title="服务器" rel="nofollow" href="/s?w=服务器" target="_self">服务器</a></li><li><a title="数据库" rel="nofollow" href="/s?w=数据库" target="_self">数据库</a></li><li><a title="前端" rel="nofollow" href="/s?w=前端" target="_self">前端</a></li><li><a title="javascript" rel="nofollow" href="/s?w=javascript" target="_self">javascript</a></li><li><a title="vue.js" rel="nofollow" href="/s?w=vue.js" target="_self">vue.js</a></li><li><a title="sql" rel="nofollow" href="/s?w=sql" target="_self">sql</a></li><li><a title="1024程序员节" rel="nofollow" href="/s?w=1024程序员节" target="_self">1024程序员节</a></li><li><a title="codemirror" rel="nofollow" href="/s?w=codemirror" target="_self">codemirror</a></li><li><a title="npm" rel="nofollow" href="/s?w=npm" target="_self">npm</a></li><div style="clear: both;"></div></ul></div><div class="list_tools_top"></div></div></div></div><style type="text/css"></style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/phone.css?v=17352890" type="text/css"><script type="text/javascript"></script></div></div></div></div></div></div><style type="text/css">  /* footer css */
  .index006-cover-page-foot {
 
  background-color: #F7F7F7;
 
}
</style><div class="cppui-row-1_100 cppui-row-view-1  row_1_100 ui-draggable" style="display: block;"><div class="cppui-column-1_100-0-1 column-view-com cppui-column-1_100-0-view-1 ui-sortable"><div class="drag-item-show-view-1 footermsg_view_pic ui-draggable" style="display: block;"><div class="index006-cover-page-foot drag-item-hide-view-1"><p class="copyright">Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。
</p><div style="background-color:#F7F7F7; text-align:center; height:20px;padding-top:5px;"><a target="_blank" href="https://beian.mps.gov.cn/#/query/webSearch" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdnimages.wpsshop.cn/57public/skin/index/default/ui/images/beian_ghs.png" style="float:left;">  <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">闽ICP备14008679号</p></a>  <a href="https://www.wpsshop.cn/xml/w/2023%E9%9D%A2%E8%AF%95%E9%AB%98%E6%89%8B/article/detail/710233.xml"  target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>    <a href="/xml/w/g007/article/detail/new.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>    <a href="/site.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a></div></div></div></div></div><script type="text/javascript">var domain = document.domain;var hr=encodeURIComponent(window.location.href+'=='+document.referrer); document.write('<script src="https://ad.wpsshop.cn/admin.appflux?s=ad_flu_ind&fluxuserauto=yes&hr='+hr+'&p57weburl='+domain+'&p57usercode1='+domain+'&u=Vy1RJQhqAXUEMQNnAm0HaVVu&i='+p57ref("id")+'&r='+escape(document.referrer)+'"  language="JavaScript"><\/script>');function p57ref(id){var reg=new RegExp("(^|&)"+id+"=([^&]*)(&|$)");var ref=window.location.search.substr(1).match(reg);if(ref!=null)return unescape(ref[2]);return null;} </script></body></html>