diff --git a/CHANGELOG.md b/CHANGELOG.md index a2c3192..c7587ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +2.4.10 / 2023-04-26 +================== +* 功能: wxml 格式化添加 js-beautify 支持 + 2.4.9 / 2023-04-05 ================== diff --git a/README.md b/README.md index 6712e42..9376864 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ ```jsonc { "minapp-vscode.cssExtname": "less", // 默认 wxss，支持 styl sass scss less css - "minapp-vscode.wxmlExtname": "vue", // 默认 wxml，支持 vue wpy + "minapp-vscode.wxmlExtname": "vue", // 默认 wxml，支持 vue wpy "minapp-vscode.jsExtname": "ts" // 默认 js，支持 ts coffee } ``` @@ -200,12 +200,29 @@ vue 中的 template 板支持两个属性： ### wxml 格式 -支持`prettyHtml`和`prettier`(部分内容需要采用兼容html的方式书写) +支持`prettyHtml`, `js-beautify` 和`prettier`(部分内容需要采用兼容html的方式书写) * 默认 `wxml` ```jsonc "minapp-vscode.wxmlFormatter": "wxml", // 指定格式化工具 ``` + +* [js-beautify](https://github.com/beautify-web/js-beautify#css--html) +```jsonc +"minapp-vscode.wxmlFormatter": "jsBeautifyHtml", // 指定格式化工具 +// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4 +"minapp-vscode.jsBeautifyHtml": "useCodeBuiltInHTML", +// 使用自定义配置 +"minapp-vscode.jsBeautifyHtml": { // jsBeautify 默认配置 + "content_unformatted": "text", + "wrap_attributes": "force", + "indent_size": 2, + "wrap_attributes_indent_size": 2, + "void_elements": "image,input,video", + "indent_scripts": "keep" +} +``` + * [prettyHtml](https://github.com/Prettyhtml/prettyhtml#prettyhtmldoc-string-options-vfile) ```jsonc "minapp-vscode.wxmlFormatter": "prettyHtml", // 指定格式化工具 @@ -233,6 +250,7 @@ vue 中的 template 板支持两个属性： 1. 针对`prettyHtml` 和 `prettier` 方式，会自动读取项目下的配置文件，[Prettier configuration file](https://prettier.io/docs/en/configuration.html) `.editorconfig` 2. 切换格式化工具需重启 VSCode 3. 针对 `prettyHtml` ，和 `prettier` 采用 HTML5 的语法和 wxml 不完全一致，写法要注意兼容 + 4. 针对 `jsBeautifyHtml` , 当值为 `"useCodeBuiltInHTML"`时, 配置信息将从 vscode 配置中的 `html.format.*` 配置字段[doc](https://code.visualstudio.com/docs/languages/html#_formatting) 读取, 转换为 [js-beautify](https://github.com/beautify-web/js-beautify#css--html) 的配置 ### 常见问题 diff --git a/package-lock.json b/package-lock.json index fc1e373..5ec0b45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "minapp-vscode", - "version": "2.4.9", + "version": "2.4.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "minapp-vscode", - "version": "2.4.9", + "version": "2.4.10", "license": "MIT", "dependencies": { "json5": "^2.2.3", @@ -16,6 +16,7 @@ "tslib": "^2.3.1" }, "devDependencies": { + "@types/js-beautify": "^1.13.3", "@types/mocha": "^9.1.1", "@types/prettier": "^1.19.1", "@types/resolve": "1.20.1", @@ -26,6 +27,7 @@ "@vscode/test-electron": "^1.6.2", "@vscode/vsce": "^2.18.0", "eslint": "7.32.0", + "js-beautify": "^1.14.7", "mocha": "^10.0.0", "ts-loader": "^9.2.6", "typescript": "^4.4.4", @@ -251,6 +253,12 @@ "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==", "dev": true }, + "node_modules/@types/js-beautify": { + "version": "1.13.3", + "resolved": "https://registry.npmjs.org/@types/js-beautify/-/js-beautify-1.13.3.tgz", + "integrity": "sha512-ucIPw5gmNyvRKi6mpeojlqp+T+6ZBJeU+kqMDnIEDlijEU4QhLTon90sZ3cz9HZr+QTwXILjNsMZImzA7+zuJA==", + "dev": true + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -721,6 +729,12 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true + }, "node_modules/acorn": { "version": "7.4.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", @@ -1273,6 +1287,16 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/config-chain": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", + "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", + "dev": true, + "dependencies": { + "ini": "^1.3.4", + "proto-list": "~1.2.1" + } + }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -1519,6 +1543,52 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/editorconfig": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", + "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==", + "dev": true, + "dependencies": { + "commander": "^2.19.0", + "lru-cache": "^4.1.5", + "semver": "^5.6.0", + "sigmund": "^1.0.1" + }, + "bin": { + "editorconfig": "bin/editorconfig" + } + }, + "node_modules/editorconfig/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/editorconfig/node_modules/lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "dev": true, + "dependencies": { + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" + } + }, + "node_modules/editorconfig/node_modules/semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/editorconfig/node_modules/yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", + "dev": true + }, "node_modules/electron-to-chromium": { "version": "1.4.352", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.352.tgz", @@ -2443,8 +2513,7 @@ "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", - "dev": true, - "optional": true + "dev": true }, "node_modules/interpret": { "version": "3.1.1", @@ -2614,6 +2683,66 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/js-beautify": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.7.tgz", + "integrity": "sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==", + "dev": true, + "dependencies": { + "config-chain": "^1.1.13", + "editorconfig": "^0.15.3", + "glob": "^8.0.3", + "nopt": "^6.0.0" + }, + "bin": { + "css-beautify": "js/bin/css-beautify.js", + "html-beautify": "js/bin/html-beautify.js", + "js-beautify": "js/bin/js-beautify.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/js-beautify/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/js-beautify/node_modules/glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/js-beautify/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -3245,6 +3374,21 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, + "node_modules/nopt": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz", + "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==", + "dev": true, + "dependencies": { + "abbrev": "^1.0.0" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": "^12.13.0 || ^14.15.0 || >=16.0.0" + } + }, "node_modules/normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -3625,6 +3769,18 @@ "node": ">=0.4.0" } }, + "node_modules/proto-list": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", + "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", + "dev": true + }, + "node_modules/pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", + "dev": true + }, "node_modules/pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -4105,6 +4261,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sigmund": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", + "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==", + "dev": true + }, "node_modules/simple-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", @@ -5375,6 +5537,12 @@ "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==", "dev": true }, + "@types/js-beautify": { + "version": "1.13.3", + "resolved": "https://registry.npmjs.org/@types/js-beautify/-/js-beautify-1.13.3.tgz", + "integrity": "sha512-ucIPw5gmNyvRKi6mpeojlqp+T+6ZBJeU+kqMDnIEDlijEU4QhLTon90sZ3cz9HZr+QTwXILjNsMZImzA7+zuJA==", + "dev": true + }, "@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -5736,6 +5904,12 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true + }, "acorn": { "version": "7.4.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", @@ -6127,6 +6301,16 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "config-chain": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", + "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", + "dev": true, + "requires": { + "ini": "^1.3.4", + "proto-list": "~1.2.1" + } + }, "core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -6310,6 +6494,48 @@ } } }, + "editorconfig": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz", + "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==", + "dev": true, + "requires": { + "commander": "^2.19.0", + "lru-cache": "^4.1.5", + "semver": "^5.6.0", + "sigmund": "^1.0.1" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "dev": true, + "requires": { + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", + "dev": true + } + } + }, "electron-to-chromium": { "version": "1.4.352", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.352.tgz", @@ -6992,8 +7218,7 @@ "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", - "dev": true, - "optional": true + "dev": true }, "interpret": { "version": "3.1.1", @@ -7117,6 +7342,51 @@ } } }, + "js-beautify": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.7.tgz", + "integrity": "sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==", + "dev": true, + "requires": { + "config-chain": "^1.1.13", + "editorconfig": "^0.15.3", + "glob": "^8.0.3", + "nopt": "^6.0.0" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0" + } + }, + "glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + } + }, + "minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "requires": { + "brace-expansion": "^2.0.1" + } + } + } + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -7608,6 +7878,15 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, + "nopt": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz", + "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==", + "dev": true, + "requires": { + "abbrev": "^1.0.0" + } + }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -7892,6 +8171,18 @@ "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", "dev": true }, + "proto-list": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", + "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", + "dev": true + }, + "pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==", + "dev": true + }, "pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -8219,6 +8510,12 @@ "object-inspect": "^1.9.0" } }, + "sigmund": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", + "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==", + "dev": true + }, "simple-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", diff --git a/package.json b/package.json index 93df872..14013d2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "minapp-vscode", "displayName": "WXML - Language Service", "description": "WXML Language Support", - "version": "2.4.9", + "version": "2.4.10", "publisher": "qiu8310", "extensionKind": [ "workspace" @@ -248,10 +248,34 @@ "enum": [ "wxml", "prettier", - "prettyHtml" + "prettyHtml", + "jsBeautifyHtml" ], "description": "wxml 格式化工具" }, + "minapp-vscode.jsBeautifyHtml": { + "type": ["string", "object"], + "default": { + "content_unformatted": "text", + "wrap_attributes": "force", + "indent_size": 2, + "wrap_attributes_indent_size": 2, + "void_elements": "image,input,video", + "indent_scripts": "keep" + }, + "enum": [ + "useCodeBuiltInHTML", + { + "content_unformatted": "text", + "wrap_attributes": "force", + "indent_size": 2, + "wrap_attributes_indent_size": 2, + "void_elements": "image,input,video", + "indent_scripts": "keep" + } + ], + "description": "js-beautify.html 配置" + }, "minapp-vscode.prettyHtml": { "type": "object", "default": { @@ -356,6 +380,7 @@ "tslib": "^2.3.1" }, "devDependencies": { + "@types/js-beautify": "^1.13.3", "@types/mocha": "^9.1.1", "@types/prettier": "^1.19.1", "@types/resolve": "1.20.1", @@ -364,12 +389,13 @@ "@typescript-eslint/eslint-plugin": "^4.29.3", "@typescript-eslint/parser": "^4.29.3", "@vscode/test-electron": "^1.6.2", + "@vscode/vsce": "^2.18.0", "eslint": "7.32.0", + "js-beautify": "^1.14.7", "mocha": "^10.0.0", "ts-loader": "^9.2.6", "typescript": "^4.4.4", - "@vscode/vsce": "^2.18.0", "webpack": "^5.77.0", "webpack-cli": "^5.0.1" } -} +} \ No newline at end of file diff --git a/src/plugin/WxmlFormatter.ts b/src/plugin/WxmlFormatter.ts index e11a75b..f4a8714 100644 --- 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) { + + 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] == 'function') 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 { const code = doc.getText(range) @@ -30,6 +57,14 @@ 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 === 'useCodeBuiltInHTML') { + const buildIntHtmlFormatConfig = workspace.getConfiguration('html.format') + conf = htmlFormatToJsBeautify(buildIntHtmlFormatConfig) + } + content = jsb_html(code, conf) } else if (this.config.wxmlFormatter === 'prettyHtml') { let prettyHtmlOptions = this.config.prettyHtml if (prettyHtmlOptions.usePrettier) { diff --git a/src/plugin/lib/config.ts b/src/plugin/lib/config.ts index 3c1c4ea..15d062b 100644 --- a/src/plugin/lib/config.ts +++ b/src/plugin/lib/config.ts @@ -5,6 +5,8 @@ import * as vscode from 'vscode' import * as path from 'path' +import type { HTMLBeautifyOptions } from 'js-beautify' + import { Snippets } from '../res/snippets' import { Options } from 'sass' @@ -39,7 +41,7 @@ export interface Config { /** * 禁止插件的format功能，防止设置"editor.formatOnSave": true了的同学format产生不可预期的错误 - * + * * https://github.com/wx-minapp/minapp-vscode/issues/83#issuecomment-958626391 */ disableFormat: boolean @@ -53,7 +55,7 @@ export interface Config { * 创建组件时文件后缀类型 */ /** css文件 */ - cssExtname: 'wxss' | 'css' | 'styl' | 'less' | 'sass'| 'scss' + cssExtname: 'wxss' | 'css' | 'styl' | 'less' | 'sass' | 'scss' /** js文件 */ jsExtname: 'js' | 'coffee' | 'ts' /** wxml文件 */ @@ -65,9 +67,11 @@ export interface Config { /** 支持解析的样式文件后缀名 */ styleExtensions: string[] /** wxml 格式化工具 */ - wxmlFormatter: 'wxml' | 'prettier' | 'prettyHtml' + wxmlFormatter: 'wxml' | 'prettier' | 'prettyHtml' | 'jsBeautifyHtml' /** prettyHtml 格式化 */ prettyHtml: Record + /** js-beautify.html 格式化 */ + jsBeautifyHtml: 'useCodeBuiltInHTML' | HTMLBeautifyOptions /** prettier 格式化 */ prettier: Record /** 关联类型 */ @@ -100,11 +104,13 @@ export const config: Config = { styleExtensions: [], wxmlFormatter: 'wxml', prettyHtml: {}, + jsBeautifyHtml: {}, prettier: {}, documentSelector: ['wxml'], sass: {}, } + function getConfig() { const minapp = vscode.workspace.getConfiguration('minapp-vscode') config.disableCustomComponentAutocomponent = minapp.get('disableCustomComponentAutocomponent', false) @@ -124,12 +130,13 @@ function getConfig() { config.reserveTags = minapp.get('reserveTags', []) config.globalStyleFiles = minapp.get('globalStyleFiles', []) config.styleExtensions = minapp.get('styleExtensions', []) - config.cssExtname = minapp.get('cssExtname', 'wxss'), - config.jsExtname = minapp.get('jsExtname', 'js'), - config.wxmlExtname = minapp.get('wxmlExtname', 'wxml'), + config.cssExtname = minapp.get('cssExtname', 'wxss') + config.jsExtname = minapp.get('jsExtname', 'js') + config.wxmlExtname = minapp.get('wxmlExtname', 'wxml') config.wxmlFormatter = minapp.get('wxmlFormatter', 'wxml') config.prettyHtml = minapp.get('prettyHtml', {}) config.prettier = minapp.get('prettier', {}) + config.jsBeautifyHtml = minapp.get('jsBeautifyHtml', {}) config.documentSelector = minapp.get('documentSelector', ['wxml']) config.sass = minapp.get('sass', {}) }