sql-formatter -- 格式化sql数据

首先你须要一个可以展示代码的组件；
我利用的是tech-ui(内部组件库)；
你如果没有类似的组件，可以参考以下链接替代：
react-monaco-editor -- 代码编辑器(适用Umi)_umi monaco editor-CSDN博客
Codemirror -- 代码编辑器(react、umi)_codemiror-CSDN博客

第一种 ：后端处置惩罚过的数据

1. import { Highlight } from '@alipay/tech-ui';
3. const sqlValue = " SELECT  \\n  trisk_adm.mid_qat_sct_baseline_sigma.clustername  , trisk_adm.mid_qat_sct_baseline_sigma.namespace  , trisk_adm.mid_qat_sct_baseline_sigma.configsource  , trisk_adm.mid_qat_sct_baseline_sigma.configkey  \\n \\n FROM trisk_adm.mid_qat_sct_baseline_sigma  \\n WHERE 1=1  AND trisk_adm.mid_qat_sct_baseline_sigma.dt = '20240318' "
5. const sqlFormat = (text : string) => {
6.     if (!text) return '';
7.     return text?.replaceAll('\\n', '\n')
8. }
10. <Highlight
11.     language="sql"
12.     copyable={true}
13.     lineNumber={true}
14. >
15.     {sqlFormat(sqlValue)}
16. </Highlight>

复制代码

第二种 ：后端未未处置惩罚的数据 （借助sql-formatter插件处置惩罚）

   pnpm install sql-formatter@12.2.0

1. import { format } from 'sql-formatter';
2. import { Highlight } from '@alipay/tech-ui';
4. const sqlValue = " SELECT   split_part( split_part( aliyun_network.top100_channel_pid_fy_cash_ex_fy.pid, 'd',  4, 1),  'end', 1 , 1 ) as 222   ,  split_part( split_part( aliyun_network.top100_channel_pid_fy_cash_ex_fy.pid, 's',  2, 1),  'd', 1 , 1 ) as 333   ,  split_part( split_part( aliyun_network.top100_channel_pid_fy_cash_ex_fy.pid, '1',  4, 1),  '1', 1 , 1 ) as 111   ,  split_part( split_part( intern_study_dev.a.a1, 'D',  2, 1),  'v', 1 , 1 ) as test1   ,  split_part( split_part( intern_study_dev.a.a1, 'start',  1, 1),  'D', 1 , 1 ) as test2   ,  split_part( split_part( intern_study_dev.a.a1, '拭',  2, 1),  'end', 1 , 1 ) as test3   , null.a.a1  , null.a.item_id  , null.a.key  , null.a.a2  , null.a.a_id  , null.top100_channel_pid_fy_cash_ex_fy.ds  , null.aaa.dds   FROM intern_study_dev.a JOIN intern_study_dev.a ON intern_study_dev.a.a_id = intern_study_dev.a.intern_study_dev.a   JOIN aliyun_network.top100_channel_pid_fy_cash_ex_fy ON crm_data.aaa.dds = aliyun_network.top100_channel_pid_fy_cash_ex_fy.aliyun_network.top100_channel_pid_fy_cash_ex_fy   JOIN aliyun_network.top100_channel_pid_fy_cash_ex_fy ON intern_study_dev.a.a2 = aliyun_network.top100_channel_pid_fy_cash_ex_fy.aliyun_network.top100_channel_pid_fy_cash_ex_fy   JOIN crm_data.aaa ON intern_study_dev.a.key = crm_data.aaa.crm_data.aaa "
6. const sqlFormat = (text : string) => {
7.     if (!text) return '';
8.     try {
9.       return format(text, {
10.         expressionWidth: 500,
11.         paramTypes: {
12.           custom: [{ regex: String.raw`#\{.+?\}` }],
13.         },
14.       });
15.     } catch (error) {
16.       return text
17.     }
18. }
20. <Highlight
21.     language="sql"
22.     copyable={true}
23.     lineNumber={true}
24. >
25.     {sqlFormat(sqlValue)}
26. </Highlight>

复制代码

暂时就接触这两种语言，其他语言后续会更新～～～

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。