feat: 快捷键

Author: zhangdong

.vitepress/config.mts

@@ -13,6 +13,9 @@ export default defineConfig({
     ssr: {
       noExternal: ["gsap"],
     },
+    optimizeDeps: {
+      entries: [],
+    },
   },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -46,6 +49,7 @@ export default defineConfig({
       },
       { text: "Web-Api", link: "/Web-Api/ResizeObserver" },
       { text: "pnpm", link: "/pnpm/overview" },
+      { text: "vscode", link: "/vscode/extension" },
       {
         text: "browser",
         items: [
@@ -56,6 +60,7 @@ export default defineConfig({
       // { text: "性能优化", link: "/optimization/image" },
       { text: "Node", link: "/node/initial" },
       { text: "vscode", link: "/vscode/keybinding" },
+      { text: "Vite", link: "/vite/initial" },
     ],
 
     sidebar: {
@@ -188,6 +193,12 @@ export default defineConfig({
           ],
         },
       ],
+      "/vscode/": [
+        {
+          text: "vscode",
+          items: [{ text: "插件", link: "/vscode/extension" }],
+        },
+      ],
       "/node/": [
         {
           text: "Node",

vite/initial.md

@@ -0,0 +1,54 @@
+---
+layout: doc
+outline: deep
+---
+
+## 契机
+1. 浏览器支持es模块，之前打包工具打包后的js文件都是放在script标签上进行引入，不能直接使用es模块引入
+2. 以编译型语言编写的javascript工具的兴起
+
+随着项目的日渐庞大，基于js的打包工具开始遇到性能瓶颈,文件开发服务器可能需要几分钟才能就绪，即使使用热模块更新（HMR）也需要几秒
+
+## 开发服务器启动缓慢
+当冷启动服务器时，传统的打包器必须抓取并构建整个应用程序
+
+vite从依赖，源代码这两部分进行优化
+
+## vite
+由两部分组成
+1. 开发服务器提供了比原生es模块更强大的功能扩展
+2. 一系列使用rollup打包你的代码的命令
+
+vite提供了默认且合理的配置
+
+通过插件，可以支持框架或与其他工具集成
+
+## 功能
+### 依赖解析和预捆绑
+浏览器不支持裸模块，vite会进行处理
+
+1. 使用esbuild预捆绑依赖，会将其他模块转化为ESM
+2. 替换成有效的url进行import
+
+:::tip
+依赖被强缓存，如果需要调试依赖，可以在devtool禁用缓存
+:::
+### HMR
+Vite 在原生 ESM 上提供了HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、精确的更新，而无需重新加载页面或清除应用程序状态。不需要手动设置这些,插件已经为你做好了。
+### TypeScript
+**仅限转译**
+
+转译可以基于每个文件进行，并且与 Vite 的按需编译模型完美契合。相比之下，类型检查需要了解整个模块图。将类型检查强行塞入 Vite 的转换管道将不可避免地损害 Vite 的速度优势。
+
+vite使用esbuild进行转译，比tsc快20到30倍
+
+:::tip
+使用类型导入和导出语法可以避免潜在问题
+```js
+import type { T } from 'only/types'
+export type { T }
+```
+:::
+
+## 依赖预捆绑
+`第一次`在项目下执行vite,vite将为依赖执行预捆绑。他是自动且透明的

vscode/extension.md

@@ -0,0 +1,19 @@
+---
+layout: doc
+outline: deep
+---
+
+## vscode内置
+```js
+import { 
+    ExtensionContext, languages, commands, Disposable, workspace, window 
+    } from 'vscode';
+```
+* ExtensionContext：用于提供插件的上下文
+* languages: 
+1. 注册语言服务:例如 CodeLens、代码补全、悬停提示等
+2. 注册语言特性:如代码导航、文档符号、语法高亮等
+* commands：用于注册和处理 VS Code 命令
+* Disposable：用于管理和释放资源。实现了 dispose 方法来清理资源
+* workspace：提供对工作区的访问，例如读取和更新配置
+* window：用于与 VS Code 窗口交互，例如显示信息消息框