feat: wxml格式化添加js-beautify支持

[iChenLei]

解决了什么问题: wxml 自定义格式化添加 js-beautify 支持, 并支持读取 vscode 配置中 html.format.* 字段

代码如何实现: WxmlFormatter.ts 中添加 js-beautify 实现, 以及对应配置

--- a/src/plugin/WxmlFormatter.ts
+++ b/src/plugin/WxmlFormatter.ts
@@ -2,20 +2,47 @@ import {
   FormattingOptions,
   DocumentFormattingEditProvider,
   DocumentRangeFormattingEditProvider,
+  workspace,
   TextDocument,
   TextEdit,
   Range,
   window,
 } from 'vscode'
+
 import * as Prettier from 'prettier'
+
 import { parse } from '../wxml-parser'
 import { Config } from './lib/config'
 import { getEOL } from './lib/helper'
 import { requireLocalPkg } from './lib/requirePackage'
+import type { HTMLBeautifyOptions } from 'js-beautify'
+
+/**
+ * vscode 内置的 html.format 配置转换为 jsBeautify.html 的配置
+ * form:  https://code.visualstudio.com/docs/languages/html#_formatting
+ * to: https://github.com/beautify-web/js-beautify#css--html
+ * 其实吧, 就是 camelCase -> snake_case
+ */
+function htmlFormatToJsBeautify(buildIntHtmlFormatConfig: Record<string, any>) {
+
+  function camelCaseTosnake_case(str: string) {
+    return str.replace(/[A-Z]/g, (match, offset) => (offset ? '_' : '') + match.toLowerCase())
+  }
+
+  const btConf = Object.keys(buildIntHtmlFormatConfig).reduce((btConf, key) => {
+    if (typeof buildIntHtmlFormatConfig[key] !== 'string') return btConf
+    const bk = camelCaseTosnake_case(key);
+    (btConf as any)[bk] = (buildIntHtmlFormatConfig as any)[key]
+    return btConf
+  }, {} as HTMLBeautifyOptions)
+
+  return btConf
+}
+

 type PrettierType = typeof Prettier
 export default class implements DocumentFormattingEditProvider, DocumentRangeFormattingEditProvider {
-  constructor(public config: Config) {}
+  constructor(public config: Config) { }

   async format(doc: TextDocument, range: Range, options: FormattingOptions, prefix = ''): Promise<TextEdit[]> {
     const code = doc.getText(range)
@@ -30,6 +57,17 @@ export default class implements DocumentFormattingEditProvider, DocumentRangeFor
         const prettier: PrettierType = requireLocalPkg(doc.uri.fsPath, 'prettier')
         const prettierOptions = await resolveOptions(prettier)
         content = prettier.format(code, { ...this.config.prettier, ...prettierOptions })
+      } else if (this.config.wxmlFormatter === 'jsBeautifyHtml') {
+        const jsb_html = require('js-beautify').html
+        let conf = this.config.jsBeautifyHtml;
+        if (this.config.jsBeautifyHtml.useBuiltInHTML) {
+          const buildIntHtmlFormatConfig = workspace.getConfiguration('html.format')
+          conf = {
+            ...htmlFormatToJsBeautify(buildIntHtmlFormatConfig),
+            ...conf,
+          }
+        }
+        content = jsb_html(code, conf)
       } else if (this.config.wxmlFormatter === 'prettyHtml') {
         let prettyHtmlOptions = this.config.prettyHtml
         if (prettyHtmlOptions.usePrettier) {

检查清单:

• [x] 本地测试通过
• [x] 可以正常build出vsix文件
• [x] 更新文档Readme和ChangeLog

[iChenLei]

@charlzyx Sorrty for the unexpected close https://github.com/wx-minapp/minapp-vscode/pull/160 , but don't worry, your contribution will be kept in the commit history.

[iChenLei]

https://json-schema.org/understanding-json-schema/reference/type.html type config

[iChenLei]

v2.4.10 released