import cost 在 import 行右侧实时显示依赖包 gzip 后体积（如 lodash 占 24.7 kb），基于 node_modules 中已安装包的 package.json 和入口文件静态估算；不自动安装依赖，仅分析已存在模块，且默认忽略 devdependencies。

Import Cost 显示 import 语句的包体积

直接在 import 行右侧显示依赖包大小（如 lodash 占 24.7 KB），帮你快速识别“悄悄吃掉打包体积”的第三方模块。它不修改代码，只读取 node_modules 中已安装包的 package.json 和入口文件做静态估算。

常见错误现象：刚装完 axios，import axios from 'axios' 右侧没显示大小 → 检查是否已执行 npm install axios，Import Cost 不会自动安装依赖，只分析已存在模块；若用 pnpm 或 yarn，确保 node_modules 结构被正确识别（部分旧版插件对 pnpm 的 .pnpm 链接支持不稳定）。

• 支持所有主流 import 语法：import * as _ from 'lodash'、import { debounce } from 'lodash'、甚至动态 import('vue')
• 默认只对 dependencies 生效，devDependencies 中的包（如 typescript）不会显示体积 —— 这是合理设计，避免干扰构建产物分析
• 体积数字含 gzip 预估（小字标注），但实际压缩率取决于你的构建工具配置，不可直接等同于最终 chunk 大小

ESLint + eslint-config-prettier 解决依赖引入风格冲突

当多个团队成员用不同方式引入同一依赖（比如有人写 import { cloneDeep } from 'lodash'，有人写 import _ from 'lodash'），ESLint 能强制统一规范，避免因 tree-shaking 失效导致体积膨胀。

关键点在于规则配置：启用 no-restricted-imports 禁止全量导入高危包，例如禁止 import moment from 'moment'，只允许 import moment from 'moment/moment' 或更细粒度路径；同时配合 import/no-unresolved 检查路径是否存在，防止误写 import utils from '@/utils' 却忘了配 webpack alias。

• eslint-config-prettier 必须放在 extends 数组末尾，否则会被前面规则覆盖
• 若项目用 TypeScript，确保 @typescript-eslint/eslint-plugin 版本与 ESLint 兼容（如 ESLint v8.x 需搭配 @typescript-eslint v6+）
• VSCode 中 ESLint 报错但终端 npx eslint . 不报 → 检查 VSCode 设置里 eslint.packageManager 是否设为 npm（而非 yarn），或工作区是否启用了错误的 ESLint 工作区版本

Path Intellisense 减少相对路径拼写错误引发的依赖加载失败

前端项目中常因手写路径出错导致 Cannot find module './utils/helper' 类错误，本质是依赖路径解析失败。Path Intellisense 在 import 或 require 时自动补全文件路径，从根源上规避这类问题。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

它对 node_modules 内包名也补全（输入 import React from 're' 自动提示 react），但注意：仅补全已安装的包 —— 如果 package.json 声明了 dependencies 却未运行 npm install，补全列表为空，此时 VSCode 仍会报 Cannot find module。

• 默认禁用 node_modules 补全（防干扰），需手动在设置中开启 path-intellisense.mappings 并添加 "~": "${workspaceFolder}/src" 等常用别名
• 对 monorepo 场景支持有限：若子包未软链接到根 node_modules，跨 package 导入时无法补全，需配合 pnpm link 或 yarn link
• 补全结果不校验导出内容（比如 lodash/debounce 存在，但 lodash/xxx 不存在也不会报错），仍需靠 ESLint 的 import/named 规则兜底

vsce package 打包前必须验证 dependencies 完整性

VSCode 插件发布为 .vsix 时，vsce package 命令只打包 node_modules 中真实存在的模块，不会自动安装缺失依赖。若开发机上漏装某个 dependencies，插件在用户机器上运行时直接抛 Error: Cannot find module 'xxx'。

最简验证方式：删除本地 node_modules 和 package-lock.json，执行 npm ci && npx vsce package。成功生成 .vsix 后，用 unzip -l your-extension-1.0.0.vsix | grep node_modules 确认关键依赖目录存在。

• devDependencies 不会打进 vsix，所以测试用的 jest、ts-jest 不影响发布体积
• 若依赖含原生模块（如 fsevents），vsce package 会在当前系统架构下打包二进制，跨平台分发时需分别构建（macOS/Windows/Linux）
• 大型依赖（如语言服务器）建议通过 extensionDependencies 声明，而非打包进自身 vsix，否则用户安装后首次启动卡顿明显

真正容易被忽略的是：Import Cost 显示的体积和最终打包产物差异可能极大 —— 它不模拟 webpack 的 tree-shaking、sideEffects 标记或 dynamic import 分割逻辑，仅反映原始模块大小。依赖管理效率不只看“装了什么”，更要看“用了什么”和“怎么用”。