feat: 基础示例(base-usage)部分的代码格式化 (Tencent#3654)

site/src/components/base-usage.vue

@@ -19,6 +19,8 @@
 
 <script setup lang="jsx">
 import { ref, compile, onMounted, computed, onBeforeUnmount, watchEffect } from 'vue';
+import * as prettier from 'prettier/standalone';
+import * as parserHtml from 'prettier/parser-html';
 
 const stringifyProp = (name, value) => {
   if (value === true) return name; // 为 true 只展示 name
@@ -73,13 +75,21 @@ const defaultProps = ref(
   }, {}),
 );
 
+function codeFormat(code, options = {}) {
+  return prettier.format(code, {
+    parser: 'vue',
+    ...options,
+    plugins: [parserHtml],
+  });
+}
+
 const usageCode = computed(() => {
   const propsStr = Object.keys(changedProps.value)
     .map((name) => `${stringifyProp(name, changedProps.value[name])}`)
     .filter(Boolean);
   const trueCode = props.code.replace(/\s*v-bind="configProps"/g, () =>
     propsStr.length ? `\n  ${propsStr.join('\n  ')}` : '',
   );
-  return trueCode;
+  return codeFormat(trueCode);
 });
 </script>