From faa72863811d1c49a6294a9ca7c6a399e6757de1 Mon Sep 17 00:00:00 2001 From: yuyinws Date: Mon, 27 Apr 2026 15:51:05 +0800 Subject: [PATCH] docs: add `vitepress-plugin-group-icons` --- docs/.vitepress/config.mts | 13 +++++++++++++ docs/.vitepress/theme/index.ts | 1 + docs/guide/check.md | 2 +- docs/guide/commit-hooks.md | 2 +- docs/guide/fmt.md | 4 ++-- docs/guide/ide-integration.md | 14 ++++---------- docs/guide/lint.md | 2 +- docs/guide/migrate.md | 9 ++++----- docs/guide/pack.md | 4 ++-- docs/guide/run.md | 4 ++-- docs/guide/test.md | 2 +- docs/package.json | 1 + docs/pnpm-lock.yaml | 33 +++++++++++++++++++++++++++++++++ 13 files changed, 66 insertions(+), 25 deletions(-) diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index b851c467d6..2f731b0d8e 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -4,6 +4,7 @@ import type { VoidZeroThemeConfig } from '@voidzero-dev/vitepress-theme'; import { extendConfig } from '@voidzero-dev/vitepress-theme/config'; import { defineConfig, type HeadConfig } from 'vitepress'; import { withMermaid } from 'vitepress-plugin-mermaid'; +import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons' const taskRunnerGuideItems = [ { @@ -122,6 +123,13 @@ export default extendConfig( { find: /^dayjs$/, replacement: 'dayjs/esm' }, ], }, + plugins: [ + groupIconVitePlugin({ + customIcon: { + tsdown: 'https://tsdown.dev/tsdown.svg' + } + }) + ], }, themeConfig: { variant: 'viteplus' as VoidZeroThemeConfig['variant'], @@ -238,6 +246,11 @@ export default extendConfig( return [...ogInfo, canonicalUrlEntry]; }, + markdown: { + config(md) { + md.use(groupIconMdPlugin) + }, + }, }), ), ); diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 9897bc0b48..329cef7bfd 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -4,6 +4,7 @@ import type { Theme } from 'vitepress'; import Layout from './Layout.vue'; import './styles.css'; +import 'virtual:group-icons.css' export default { extends: BaseTheme, diff --git a/docs/guide/check.md b/docs/guide/check.md index 8be3ea16d2..92241a7cd9 100644 --- a/docs/guide/check.md +++ b/docs/guide/check.md @@ -30,7 +30,7 @@ vp check --no-fmt --no-lint # Type-check only (requires `typeCheck` enabled). Recommended base `lint` config: -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/guide/commit-hooks.md b/docs/guide/commit-hooks.md index d6afa313d2..8030de6af2 100644 --- a/docs/guide/commit-hooks.md +++ b/docs/guide/commit-hooks.md @@ -38,7 +38,7 @@ vp staged --fail-on-changes Define staged-file checks in the `staged` block in `vite.config.ts`: -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/guide/fmt.md b/docs/guide/fmt.md index bb9a59d02a..3e3cc61cee 100644 --- a/docs/guide/fmt.md +++ b/docs/guide/fmt.md @@ -22,7 +22,7 @@ Put formatting configuration directly in the `fmt` block in `vite.config.ts` so For editors, point the formatter config path at `./vite.config.ts` so format-on-save uses the same `fmt` block: -```json +```json [.vscode/settings.json] { "oxc.fmt.configPath": "./vite.config.ts" } @@ -30,7 +30,7 @@ For editors, point the formatter config path at `./vite.config.ts` so format-on- For the upstream formatter behavior and configuration reference, see the [Oxfmt docs](https://oxc.rs/docs/guide/usage/formatter.html). -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/guide/ide-integration.md b/docs/guide/ide-integration.md index 8bbe5765d6..0c28266b16 100644 --- a/docs/guide/ide-integration.md +++ b/docs/guide/ide-integration.md @@ -13,17 +13,13 @@ When you create or migrate a project, Vite+ prompts whether you want editor conf You can also manually set up the VS Code config: -`.vscode/extensions.json` - -```json +```json [.vscode/extensions.json] { "recommendations": ["VoidZero.vite-plus-extension-pack"] } ``` -`.vscode/settings.json` - -```json +```json [.vscode/settings.json] { "editor.defaultFormatter": "oxc.oxc-vscode", "oxc.fmt.configPath": "./vite.config.ts", @@ -39,7 +35,7 @@ This gives the project a shared default formatter and enables Oxc-powered fix ac To let the VS Code NPM Scripts panel run scripts through `vp`, add the following to your `.vscode/settings.json`: -```json +```json [.vscode/settings.json] { "npm.scriptRunner": "vp" } @@ -55,9 +51,7 @@ When you create or migrate a project, Vite+ prompts you to choose whether you wa You can also manually set up the Zed config: -`.zed/settings.json` - -```json +```json [.zed/settings.json] { "lsp": { "oxlint": { diff --git a/docs/guide/lint.md b/docs/guide/lint.md index ffd29ecd36..90ba2804f7 100644 --- a/docs/guide/lint.md +++ b/docs/guide/lint.md @@ -22,7 +22,7 @@ Put lint configuration directly in the `lint` block in `vite.config.ts` so all y For the upstream rule set, options, and compatibility details, see the [Oxlint docs](https://oxc.rs/docs/guide/usage/linter.html). -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/guide/migrate.md b/docs/guide/migrate.md index ea8710b77e..d84b010cce 100644 --- a/docs/guide/migrate.md +++ b/docs/guide/migrate.md @@ -114,8 +114,7 @@ const { page } = await import('vite-plus/test/browser/context'); If your project uses a `tsdown.config.ts`, move its options into the `pack` block in `vite.config.ts`: -```ts -// before — tsdown.config.ts +```ts [tsdown.config.ts] {4-6} import { defineConfig } from 'tsdown'; export default defineConfig({ @@ -123,8 +122,9 @@ export default defineConfig({ dts: true, format: ['esm', 'cjs'], }); +``` -// after — vite.config.ts +```ts [vite.config.ts] {4-8} import { defineConfig } from 'vite-plus'; export default defineConfig({ @@ -144,8 +144,7 @@ Vite+ replaces lint-staged with its own `staged` block in `vite.config.ts`. Only Move your lint-staged rules into the `staged` block: -```ts -// vite.config.ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/guide/pack.md b/docs/guide/pack.md index dd8e1b868f..b1714c48df 100644 --- a/docs/guide/pack.md +++ b/docs/guide/pack.md @@ -29,7 +29,7 @@ Use it for: - [watch mode](https://tsdown.dev/options/watch-mode) - [standalone executables](https://tsdown.dev/options/exe#executable) -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ @@ -47,7 +47,7 @@ export default defineConfig({ Use this when you want to ship a CLI or other Node-based tool as a native executable that runs without requiring Node.js to be installed separately. -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/guide/run.md b/docs/guide/run.md index 6000708977..beb3e1e119 100644 --- a/docs/guide/run.md +++ b/docs/guide/run.md @@ -71,7 +71,7 @@ $ node compile-legacy-app.js ✗ cache miss: 'legacy/index.js' modified, executi Vite Task automatically tracks which files your command uses. You can define tasks directly in `vite.config.ts` to enable caching by default or control which files and environment variables affect cache behavior. -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ @@ -239,7 +239,7 @@ Flags also work inside nested scripts. For example, `vp run -r build` inside a s ::: info A common monorepo pattern is a root script that runs a task recursively: -```json [package.json (root)] +```json [package.json (root) ~vscode-icons:file-type-node~] { "scripts": { "build": "vp run -r build" diff --git a/docs/guide/test.md b/docs/guide/test.md index 8101683957..f3f3e69324 100644 --- a/docs/guide/test.md +++ b/docs/guide/test.md @@ -22,7 +22,7 @@ Unlike Vitest on its own, `vp test` does not stay in watch mode by default. Use Put test configuration directly in the `test` block in `vite.config.ts` so all your configuration stays in one place. We do not recommend using `vitest.config.ts` with Vite+. -```ts +```ts [vite.config.ts] import { defineConfig } from 'vite-plus'; export default defineConfig({ diff --git a/docs/package.json b/docs/package.json index aabed922d1..f88eece51b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,6 +12,7 @@ "mermaid": "^11.13.0", "reka-ui": "^2.7.0", "typewriter-effect": "^2.22.0", + "vitepress-plugin-group-icons": "^1.7.5", "vitepress-plugin-mermaid": "^2.0.17", "vue": "^3.5.27", "vue3-carousel": "^0.16.0" diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index b64ab1377c..81d3076589 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: typewriter-effect: specifier: ^2.22.0 version: 2.22.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + vitepress-plugin-group-icons: + specifier: ^1.7.5 + version: 1.7.5(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)) vitepress-plugin-mermaid: specifier: ^2.0.17 version: 2.0.17(mermaid@11.13.0)(vitepress@2.0.0-alpha.15(jiti@2.6.1)(lightningcss@1.31.1)(oxc-minify@0.120.0)(postcss@8.5.8)) @@ -272,9 +275,15 @@ packages: '@floating-ui/vue@1.1.11': resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==} + '@iconify-json/logos@1.2.11': + resolution: {integrity: sha512-fOo4pGEatuyuCFNL+cwquYMa2Im0oJHRHV7lt/Qqs5Ode/lPImHCQcfTtPzZj7qYMPb/h8YHN3TG54uEowrjNQ==} + '@iconify-json/simple-icons@1.2.74': resolution: {integrity: sha512-yqaohfY6jnYjTVpuTkaBQHrWbdUrQyWXhau0r/0EZiNWYXPX/P8WWwl1DoLH5CbvDjjcWQw5J0zADhgCUklOqA==} + '@iconify-json/vscode-icons@1.2.46': + resolution: {integrity: sha512-ZuLQscdXzGfUy1BtpNE74rNRjhNkcT/BLUbclQpY7aNLS2ByBuF9RzSjJQ1c0nqRyyInBFWmEL8DbTufw6w5Vw==} + '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} @@ -1641,6 +1650,14 @@ packages: yaml: optional: true + vitepress-plugin-group-icons@1.7.5: + resolution: {integrity: sha512-QzcroUuIiVKyXpmEiiHVbfRTQIy9Zbwxpk5JC/zavO8mavitwumz2RZWlwTchMCCHducYyPptkYvXvdnNUWkog==} + peerDependencies: + vite: '>=3' + peerDependenciesMeta: + vite: + optional: true + vitepress-plugin-mermaid@2.0.17: resolution: {integrity: sha512-IUzYpwf61GC6k0XzfmAmNrLvMi9TRrVRMsUyCA8KNXhg/mQ1VqWnO0/tBVPiX5UoKF1mDUwqn5QV4qAJl6JnUg==} peerDependencies: @@ -1871,10 +1888,18 @@ snapshots: - '@vue/composition-api' - vue + '@iconify-json/logos@1.2.11': + dependencies: + '@iconify/types': 2.0.0 + '@iconify-json/simple-icons@1.2.74': dependencies: '@iconify/types': 2.0.0 + '@iconify-json/vscode-icons@1.2.46': + dependencies: + '@iconify/types': 2.0.0 + '@iconify/types@2.0.0': {} '@iconify/utils@3.1.0': @@ -3239,6 +3264,14 @@ snapshots: jiti: 2.6.1 lightningcss: 1.31.1 + vitepress-plugin-group-icons@1.7.5(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)): + dependencies: + '@iconify-json/logos': 1.2.11 + '@iconify-json/vscode-icons': 1.2.46 + '@iconify/utils': 3.1.0 + optionalDependencies: + vite: 7.3.1(jiti@2.6.1)(lightningcss@1.31.1) + vitepress-plugin-mermaid@2.0.17(mermaid@11.13.0)(vitepress@2.0.0-alpha.15(jiti@2.6.1)(lightningcss@1.31.1)(oxc-minify@0.120.0)(postcss@8.5.8)): dependencies: mermaid: 11.13.0