feat: add prettier

Author: KaelWD

package.json

@@ -41,11 +41,13 @@
     "@microsoft/api-extractor": "^7.19.2",
     "@types/codemirror": "^5.60.2",
     "@types/node": "^16.11.12",
+    "@types/prettier": "^2.7.2",
     "@vitejs/plugin-vue": "^3.0.0",
     "codemirror": "^5.62.3",
     "emmet": "^2.4.4",
     "fflate": "^0.7.3",
     "hash-sum": "^2.0.0",
+    "prettier": "^2.8.8",
     "rimraf": "^3.0.2",
     "sass": "^1.55.0",
     "sucrase": "^3.20.1",

pnpm-lock.yaml

@@ -4,6 +4,9 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watchEffect, inject } from 'vue'
+import prettier from 'prettier/standalone'
+import parserBabel from 'prettier/parser-babel'
+import parserHtml from 'prettier/parser-html'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
@@ -59,6 +62,13 @@ onMounted(() => {
     emit('change', editor.getValue())
   })
 
+  editor.on('blur', () => {
+    emit('change', prettier.format(
+      editor.getValue(),
+      { parser: 'html', plugins: [parserBabel, parserHtml] }
+    ))
+  })
+
   watchEffect(() => {
     const cur = editor.getValue()
     if (props.value !== cur) {