chore: upgrade prettier to v3 (#371)

package.json

@@ -54,7 +54,6 @@
     "@types/codemirror": "^5.60.15",
     "@types/marked": "^4.0.0",
     "@types/node": "^22.4.1",
-    "@types/prettier": "^2.7.3",
     "@unocss/eslint-plugin": "^0.62.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "autoprefixer": "^10.4.20",
@@ -63,7 +62,7 @@
     "eslint-plugin-format": "^0.1.2",
     "less": "^4.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "shx": "^0.3.4",
     "simple-git-hooks": "^2.11.1",
     "tailwindcss": "^3.4.10",

src/config/theme.ts

@@ -2,8 +2,6 @@ import { toMerged } from 'es-toolkit'
 
 import type { Theme } from '@/types'
 
-const baseColor = `#3f3f3f`
-
 const defaultTheme: Theme = {
   base: {
     '--md-primary-color': `#000000`,
@@ -190,7 +188,7 @@ const defaultTheme: Theme = {
     td: {
       border: `1px solid #dfdfdf`,
       padding: `0.25em 0.5em`,
-      color: baseColor,
+      color: `#3f3f3f`,
     },
 
     footnote: {

src/stores/index.js

@@ -9,7 +9,7 @@ import { altKey, codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSiz
 import WxRenderer from '@/utils/renderer'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
-import { addPrefix, css2json, customCssWithTemplate, customizeTheme, downloadMD, exportHTML, formatCss, formatDoc } from '@/utils'
+import { addPrefix, css2json, customCssWithTemplate, customizeTheme, downloadMD, exportHTML, formatDoc } from '@/utils'
 
 export const useStore = defineStore(`store`, () => {
   // 是否开启深色模式
@@ -54,13 +54,14 @@ export const useStore = defineStore(`store`, () => {
   // 内容编辑器编辑器
   const editor = ref(null)
   // 编辑区域内容
-  const editorContent = useStorage(`__editor_content`, formatDoc(DEFAULT_CONTENT))
+  const editorContent = useStorage(`__editor_content`, DEFAULT_CONTENT)
 
   // 格式化文档
   const formatContent = () => {
-    const doc = formatDoc(editor.value.getValue())
-    editorContent.value = doc
-    editor.value.setValue(doc)
+    formatDoc(editor.value.getValue()).then((doc) => {
+      editorContent.value = doc
+      editor.value.setValue(doc)
+    })
   }
 
   // 切换 highlight.js 代码主题
@@ -208,9 +209,10 @@ export const useStore = defineStore(`store`, () => {
         autofocus: true,
         extraKeys: {
           [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
-            const doc = formatCss(editor.getValue())
-            getCurrentTab().content = doc
-            editor.setValue(doc)
+            formatDoc(editor.getValue(), `css`).then((doc) => {
+              getCurrentTab().content = doc
+              editor.setValue(doc)
+            })
           },
         },
       }),
@@ -350,7 +352,7 @@ export const useStore = defineStore(`store`, () => {
       const reader = new FileReader()
       reader.readAsText(file)
       reader.onload = (event) => {
-        editor.value.setValue(formatDoc(event.target.result))
+        editor.value.setValue(event.target.result)
         ElMessage.success(`文档导入成功`)
       }
     }

src/utils/index.js

@@ -1,8 +1,10 @@
 import juice from 'juice'
-import prettier from 'prettier/standalone'
-import prettierCss from 'prettier/parser-postcss'
-import prettierMarkdown from 'prettier/parser-markdown'
 
+import { format } from 'prettier/standalone'
+import * as prettierPluginMarkdown from 'prettier/plugins/markdown'
+import * as prettierPluginBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettierPluginCss from 'prettier/plugins/postcss'
 import { prefix } from '@/config'
 
 export function addPrefix(str) {
@@ -25,28 +27,37 @@ export function customizeTheme(theme, options) {
 }
 
 export function customCssWithTemplate(jsonString, color, theme) {
-  const newTheme = customizeTheme(theme, { color });
+  const newTheme = customizeTheme(theme, { color })
 
   const mergeProperties = (target, source, keys) => {
-    keys.forEach(key => {
+    keys.forEach((key) => {
       if (source[key]) {
-        target[key] = Object.assign(target[key] || {}, source[key]);
+        target[key] = Object.assign(target[key] || {}, source[key])
       }
-    });
-  };
+    })
+  }
 
   const blockKeys = [
-    'h1', 'h2', 'h3', 'h4', 'code', 'p', 'hr', 'blockquote',
-    'blockquote_p', 'image', 'ul', 'ol'
-  ];
-  const inlineKeys = ['strong', 'codespan', 'link', 'wx_link', 'listitem'];
-
-  mergeProperties(newTheme.block, jsonString, blockKeys);
-  mergeProperties(newTheme.inline, jsonString, inlineKeys);
-  return newTheme;
+    `h1`,
+    `h2`,
+    `h3`,
+    `h4`,
+    `code`,
+    `p`,
+    `hr`,
+    `blockquote`,
+    `blockquote_p`,
+    `image`,
+    `ul`,
+    `ol`,
+  ]
+  const inlineKeys = [`strong`, `codespan`, `link`, `wx_link`, `listitem`]
+
+  mergeProperties(newTheme.block, jsonString, blockKeys)
+  mergeProperties(newTheme.inline, jsonString, inlineKeys)
+  return newTheme
 }
 
-
 /**
  * 将 CSS 字符串转换为 JSON 对象
  *
@@ -98,39 +109,21 @@ export function css2json(css) {
 }
 
 /**
- * 将编辑器内容保存到 LocalStorage
- * @param {*} editor
- * @param {*} name
+ * 格式化内容
+ * @param {string} content - 要格式化的内容
+ * @param {'markdown' | 'css'} [type] - 内容类型，决定使用的解析器，默认为'markdown'
+ * @returns {Promise<string>} - 格式化后的内容
  */
-export function saveEditorContent(editor, name) {
-  const content = editor.getValue(0)
-  if (content) {
-    localStorage.setItem(name, content)
+export async function formatDoc(content, type = `markdown`) {
+  const plugins = {
+    markdown: [prettierPluginMarkdown, prettierPluginBabel, prettierPluginEstree],
+    css: [prettierPluginCss],
   }
-  else {
-    localStorage.removeItem(name)
-  }
-}
 
-/**
- * 格式化文档
- * @param {string} content - 文档内容
- */
-export function formatDoc(content) {
-  return prettier.format(content, {
-    parser: `markdown`,
-    plugins: [prettierMarkdown],
-  })
-}
-
-/**
- * 格式化css
- * @param {string} content - css内容
- */
-export function formatCss(content) {
-  return prettier.format(content, {
-    parser: `css`,
-    plugins: [prettierCss],
+  const parser = type in plugins ? type : `markdown`
+  return await format(content, {
+    parser,
+    plugins: plugins[parser],
   })
 }
 

src/utils/renderer.js

@@ -132,7 +132,7 @@ class WxRenderer extends Renderer {
   }
 
   codeIndex = 0
-  code({ text, lang }) {
+  code({ text, lang = `` }) {
     if (lang.startsWith(`mermaid`)) {
       clearTimeout(this.codeIndex)
       this.codeIndex = setTimeout(() => {

src/views/CodemirrorEditor.vue

@@ -197,8 +197,9 @@ function initEditor() {
     autoCloseBrackets: true,
     extraKeys: {
       [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
-        const doc = formatDoc(editor.getValue(0))
-        editor.setValue(doc)
+        formatDoc(editor.getValue(0)).then((doc) => {
+          editor.setValue(doc)
+        })
       },
       [`${ctrlKey}-B`]: function bold(editor) {
         const selected = editor.getSelection()