feat(preview): auto format generated code in preview mode

[chilingling]

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

• 在公共 AST 工具中增加对 Vue 和 Less 格式化的支持。
• 实现基于文件扩展名的 Prettier 解析器自动选择功能。
• 确保页面预览/应用预览中所有生成的代码文件（脚本、模板及配置文件）均经过格式化，以提升可读性。

【before】
页面：https://opentiny.github.io/tiny-engine/?type=app&id=1&tenant=1&pageid=215
预览页面：https://opentiny.github.io/tiny-engine/preview.html?tenant=1&id=1&theme=light&framework=Vue&platform=1&pageid=215&previewType=page

【after】
页面：https://chilingling.github.io/tiny-engine/?type=app&id=1&tenant=1&pageid=215
预览页面：https://chilingling.github.io/tiny-engine/preview.html?tenant=1&id=1&theme=light&framework=Vue&platform=1&pageid=215&previewType=page

What is the current behavior?

Issue Number: #1748

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features
  • Generated code is now automatically formatted for improved readability and consistency
  • Added support for formatting Vue components and LESS stylesheets
  • Generated preview files (app configuration, meta files, import maps) are automatically formatted

[coderabbitai]

Walkthrough

The pull request adds Vue and LESS formatting support to the codebase, refactors formatting infrastructure with a new file-based formatting utility, and applies these formatters to page code generation and preview file outputs.

Changes

Cohort / File(s)	Summary
Formatting Infrastructure packages/common/js/ast.ts	Expanded language support to include vue and less, introduced SupportedPrettierParser type and PRETTIER_PLUGINS constant, refactored existing formatters to use centralized formatWithParser helper, parameterized formatScript to accept parser options, and added file extension-based formatting via new getPrettierParserByFileName and formatStringByFileName exports.
Page Code Generation packages/common/composable/generateCode/index.ts	Wrapped genSFCWithDefaultPlugin output with formatString(..., 'vue') to apply Vue formatting to generated page code.
Preview File Formatting packages/design-core/src/preview/src/preview/usePreviewData.ts	Applied file-based formatting to generated preview files including app.js, main.js, import-map.json, and meta files via new formatGeneratedFile and formatGeneratedFiles helper functions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• ✨ [Feature]: 页面预览代码格式化 #1748: Directly addresses the feature request for page preview code formatting by adding Vue and LESS formatting support and wiring it into page code generation and preview file outputs.

Poem

🐰 Hopping through the code with glee,
Vue files now format beautifully,
From .less to precious page code,
Each file takes the formatting road,
A rabbit's blessing on this code refactored! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and directly describes the main change: automatic code formatting for generated code in preview mode, which is the primary focus across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/common/js/ast.ts (1)

144-163: Consider using console.error for error logging.

The error handling safely returns the original string on failure, which is the right fallback behavior. However, using console.error would be more semantically appropriate for error cases.

Suggested change

   } catch (error) {
     const printer: Console = console
-    printer.log(error)
+    printer.error(error)

     return str
   }

The same applies to formatString at line 138.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/common/js/ast.ts` around lines 144 - 163, The catch blocks in
formatStringByFileName (and similarly formatString) log errors using console.log
via a local printer variable; change these to use console.error directly to
reflect error severity and remove the unnecessary printer variable—i.e., in
formatStringByFileName and formatString catch clauses replace the
printer.log(error) pattern with console.error(error) (or a message plus error)
so failures are logged as errors while still returning the original string.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/common/js/ast.ts`:
- Around line 144-163: The catch blocks in formatStringByFileName (and similarly
formatString) log errors using console.log via a local printer variable; change
these to use console.error directly to reflect error severity and remove the
unnecessary printer variable—i.e., in formatStringByFileName and formatString
catch clauses replace the printer.log(error) pattern with console.error(error)
(or a message plus error) so failures are logged as errors while still returning
the original string.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 6783502b-2de2-4119-9cc2-f8bdc54b6d59

📥 Commits

Reviewing files that changed from the base of the PR and between e0821bc and e96e024.

📒 Files selected for processing (3)

• packages/common/composable/generateCode/index.ts
• packages/common/js/ast.ts
• packages/design-core/src/preview/src/preview/usePreviewData.ts