diff --git a/.vscode/settings.json b/.vscode/settings.json index b50e404..18cb659 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -96,5 +96,14 @@ "code-runner.executorMap": { // https://nodejs.org/en/learn/typescript/run#registering-tsx-via-node "typescript": "pnpm dotenvx run -- node --import=tsx $fullFileName" - } -} + }, + /** + 尝试让volar对md也提供基础的类型支持 + https://github.com/vuejs/language-tools/tree/master/extensions/vscode#configs + https://vitepress.dev/guide/using-vue#vs-code-intellisense-support + */ + "vue.server.includeLanguages": [ + "vue", + "markdown" + ] +} \ No newline at end of file diff --git a/vite-plugin-autogeneration-import-file/app/package.json b/vite-plugin-autogeneration-import-file/app/package.json index 89cfe4c..670af27 100644 --- a/vite-plugin-autogeneration-import-file/app/package.json +++ b/vite-plugin-autogeneration-import-file/app/package.json @@ -1,5 +1,5 @@ { - "name": "@ruan-cat-test/vite-plugin-autogeneration-import-file-test-app-1", + "name": "@vite-plugin-autogeneration-import-file/app-1", "private": true, "version": "0.0.0", "type": "module", @@ -14,12 +14,13 @@ "clean": "rimraf dist .turbo" }, "dependencies": { + "unplugin-vue-markdown": "^0.26.2", "vue": "^3.5.12", "vue-sonner": "^1.2.4", "vue3-toastify": "^0.2.4" }, "devDependencies": { - "@ruan-cat-test/vite-plugin-autogeneration-import-file": "workspace:^", + "@vite-plugin-autogeneration-import-file/code": "workspace:^", "@vitejs/plugin-vue": "^5.1.4", "typescript": "catalog:", "unplugin-vue-components": "^0.27.4", diff --git a/vite-plugin-autogeneration-import-file/app/src/App.vue b/vite-plugin-autogeneration-import-file/app/src/App.vue index d0d152f..b51fbe0 100644 --- a/vite-plugin-autogeneration-import-file/app/src/App.vue +++ b/vite-plugin-autogeneration-import-file/app/src/App.vue @@ -2,6 +2,8 @@ import { Toaster, toast } from "vue-sonner"; import TestResolve from "./resovleComponents/resolve.vue"; + +import indexMd from "./docs/index.md"; diff --git a/vite-plugin-autogeneration-import-file/app/src/components/show-data.vue b/vite-plugin-autogeneration-import-file/app/src/components/show-data.vue new file mode 100644 index 0000000..025892b --- /dev/null +++ b/vite-plugin-autogeneration-import-file/app/src/components/show-data.vue @@ -0,0 +1,5 @@ + diff --git a/vite-plugin-autogeneration-import-file/app/src/docs/index.md b/vite-plugin-autogeneration-import-file/app/src/docs/index.md new file mode 100644 index 0000000..c8c4a2a --- /dev/null +++ b/vite-plugin-autogeneration-import-file/app/src/docs/index.md @@ -0,0 +1,47 @@ + + +# 文档 + +我希望在 md 文档内,使用 vue 组件。且实现语法高亮,自动提示,类型补全。 + +## 目前的做法 + +目前来说,还是比较有效的,勉强地实现组件导入。 + +### tsconfig.json + +```json +{ + // https://vitepress.dev/guide/using-vue#vs-code-intellisense-support + "vueCompilerOptions": { + "vitePressExtensions": [".md"] + } +} +``` + +### .vscode\settings.json + +```json +{ + /** + 尝试让volar对md也提供基础的类型支持 + https://github.com/vuejs/language-tools/tree/master/extensions/vscode#configs + https://vitepress.dev/guide/using-vue#vs-code-intellisense-support + */ + "vue.server.includeLanguages": ["vue", "markdown"] +} +``` + + + + + + + diff --git a/vite-plugin-autogeneration-import-file/app/tsconfig.json b/vite-plugin-autogeneration-import-file/app/tsconfig.json index a084126..bba2275 100644 --- a/vite-plugin-autogeneration-import-file/app/tsconfig.json +++ b/vite-plugin-autogeneration-import-file/app/tsconfig.json @@ -14,18 +14,58 @@ "ESNext", "DOM" ], - "skipLibCheck": true + "skipLibCheck": true, + "baseUrl": ".", + "paths": { + "@/*": [ + "src/*" + ], + "components/*": [ + "src/components/*" + ], + "types/*": [ + "src/types/*" + ], + "views/*": [ + "src/views/*" + ], + "api/*": [ + "src/apis/*" + ], + "stores/*": [ + "src/stores/*" + ], + "routers/*": [ + "src/routers/*" + ], + "utils/*": [ + "src/utils/*" + ], + "tools/*": [ + "src/tools/*" + ], + "models/*": [ + "src/models/*" + ], + }, }, "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", + "src/**/*.md", "./types" ], "references": [ { "path": "./tsconfig.node.json" } - ] + ], + // https://vitepress.dev/guide/using-vue#vs-code-intellisense-support + "vueCompilerOptions": { + "vitePressExtensions": [ + ".md" + ], + }, } \ No newline at end of file diff --git a/vite-plugin-autogeneration-import-file/app/turbo.json b/vite-plugin-autogeneration-import-file/app/turbo.json index 9867694..a0bb983 100644 --- a/vite-plugin-autogeneration-import-file/app/turbo.json +++ b/vite-plugin-autogeneration-import-file/app/turbo.json @@ -6,7 +6,7 @@ "do-plugin-build": { "cache": false, "dependsOn": [ - "@ruan-cat-test/vite-plugin-autogeneration-import-file#build" + "@vite-plugin-autogeneration-import-file/code#build" ] }, "rm:types": { diff --git a/vite-plugin-autogeneration-import-file/app/types/vite-env.d.ts b/vite-plugin-autogeneration-import-file/app/types/vite-env.d.ts index 23dde32..9ca5d9a 100644 --- a/vite-plugin-autogeneration-import-file/app/types/vite-env.d.ts +++ b/vite-plugin-autogeneration-import-file/app/types/vite-env.d.ts @@ -5,3 +5,12 @@ declare module "*.vue" { const component: DefineComponent<{}, {}, any>; export default component; } + +/** + * @see https://github.com/unplugin/unplugin-vue-markdown#typescript-shim + */ +declare module "*.md" { + import type { ComponentOptions } from "vue"; + const Component: ComponentOptions; + export default Component; +} diff --git a/vite-plugin-autogeneration-import-file/app/vite.config.ts b/vite-plugin-autogeneration-import-file/app/vite.config.ts index 6f6b8f0..f3e41ee 100644 --- a/vite-plugin-autogeneration-import-file/app/vite.config.ts +++ b/vite-plugin-autogeneration-import-file/app/vite.config.ts @@ -6,7 +6,8 @@ import { upperFirst } from "lodash-es"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import Components from "unplugin-vue-components/vite"; -import { getName, createPlugin } from "@ruan-cat-test/vite-plugin-autogeneration-import-file"; +import Markdown from "unplugin-vue-markdown/vite"; +import { getName, createPlugin } from "@vite-plugin-autogeneration-import-file/code"; const { autoImport, resolver } = createPlugin(); @@ -61,7 +62,11 @@ export default defineConfig({ }, plugins: [ - vue(), + vue({ + include: [/\.vue$/, /\.md$/], + }), + + Markdown({}), autoImport([ // components @@ -119,6 +124,25 @@ export default defineConfig({ dirs: [], dts: false, resolvers: [resolver([0, 2], [3])], + + // https://github.com/unplugin/unplugin-vue-markdown#work-with-unplugin-vue-components + extensions: ["vue", "md"], + include: [/\.vue$/, /\.vue\?vue/, /\.md$/], }), ], + + resolve: { + alias: { + "@": fileURLToPath(new URL("./src", import.meta.url)), + components: fileURLToPath(new URL("./src/components", import.meta.url)), + types: fileURLToPath(new URL("./src/types", import.meta.url)), + views: fileURLToPath(new URL("./src/views", import.meta.url)), + api: fileURLToPath(new URL("./src/apis", import.meta.url)), + stores: fileURLToPath(new URL("./src/stores", import.meta.url)), + router: fileURLToPath(new URL("./src/router", import.meta.url)), + utils: fileURLToPath(new URL("./src/utils", import.meta.url)), + tools: fileURLToPath(new URL("./src/tools", import.meta.url)), + models: fileURLToPath(new URL("./src/models", import.meta.url)), + }, + }, }); diff --git a/vite-plugin-autogeneration-import-file/core/package.json b/vite-plugin-autogeneration-import-file/core/package.json index 7e95796..5a73b91 100644 --- a/vite-plugin-autogeneration-import-file/core/package.json +++ b/vite-plugin-autogeneration-import-file/core/package.json @@ -1,5 +1,5 @@ { - "name": "@ruan-cat-test/vite-plugin-autogeneration-import-file", + "name": "@vite-plugin-autogeneration-import-file/code", "private": true, "version": "0.0.0", "license": "MIT",