JSON数据美化，js代码美化

美化前（都挤在一行）

image.png

以下为vue3 tsx写法

import { defineComponent, watch } from 'vue';

export default defineComponent({
  props: {
    code: {
      type: Object || Array,
      required: true,
    },
  },
  setup(props) {
    // json格式美化
    function prettyFormat(code: any) {
      try {
        for (const key in code) {
          if (typeof code[key] === 'function') {
            let str = code[key];
            str = str.toString();
            code[key] = str.replace(/\n/g, '<br/>');
          }
        }
        // 设置缩进为2个空格
        let str = JSON.stringify(code, null, 2);
        str = str
          .replace(/&/g, '&')
          .replace(/</g, '<')
          .replace(/>/g, '>');
        // str = str.replace(/\n/g, '/r')
        return str;
      } catch (e) {
        console.error('异常信息:' + e);
        return '';
      }
    }

    return () => {
      return <pre v-html={prettyFormat(props.code)}></pre>;
    };
  },
});

美化后

image.png