当前位置:   article > 正文

sql-formatter -- 格式化sql数据

sql-formatter

首先你需要一个可以展示代码的组件;

我使用的是tech-ui(内部组件库);

你如果没有类似的组件,可以参考以下链接替代:

react-monaco-editor -- 代码编辑器(适用Umi)_umi monaco editor-CSDN博客

Codemirror -- 代码编辑器(react、umi)_codemiror-CSDN博客

第一种 :后端处理过的数据

  1. import { Highlight } from '@alipay/tech-ui';
  2. 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' "
  3. const sqlFormat = (text : string) => {
  4. if (!text) return '';
  5. return text?.replaceAll('\\n', '\n')
  6. }
  7. <Highlight
  8. language="sql"
  9. copyable={true}
  10. lineNumber={true}
  11. >
  12. {sqlFormat(sqlValue)}
  13. </Highlight>

第二种 :后端未未处理的数据 (借助sql-formatter插件处理)

pnpm install sql-formatter@12.2.0

  1. import { format } from 'sql-formatter';
  2. import { Highlight } from '@alipay/tech-ui';
  3. 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 "
  4. const sqlFormat = (text : string) => {
  5. if (!text) return '';
  6. try {
  7. return format(text, {
  8. expressionWidth: 500,
  9. paramTypes: {
  10. custom: [{ regex: String.raw`#\{.+?\}` }],
  11. },
  12. });
  13. } catch (error) {
  14. return text
  15. }
  16. }
  17. <Highlight
  18. language="sql"
  19. copyable={true}
  20. lineNumber={true}
  21. >
  22. {sqlFormat(sqlValue)}
  23. </Highlight>

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/710267
推荐阅读
  

闽ICP备14008679号