Import Cost 插件可在 VSCode 中实时显示 import 语句引入的第三方包体积，需依次完成安装插件、确保 node_modules 存在且项目根目录正确、启用 JS/TS 语言支持、验证行尾体积标注显示。
如果您在使用 vscode 开发项目时，希望实时了解每个 import 语句所引入的第三方依赖包体积，import cost 插件可直接在编辑器中显示估算大小。以下是启用并正确使用该插件的关键操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Import Cost 插件
该插件需通过 VSCode 扩展市场获取并启用，确保其能注入到 TypeScript 和 JavaScript 文件的 import 行末尾进行体积标注。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按快捷键 Ctrl+Shift+X）。
2、在搜索框中输入 Import Cost，找到作者为 wix 的官方插件。
3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。
二、配置项目根目录下的 node_modules
Import Cost 依赖本地已安装的依赖包来计算体积，必须确保当前工作区已正确初始化 npm 或 yarn，并完成依赖安装。
1、在 VSCode 终端中执行 npm install 或 yarn install，确保 node_modules 目录存在且完整。
2、确认 VSCode 当前打开的是包含 package.json 的项目根文件夹，而非子目录。
3、重启 VSCode 窗口，使插件重新扫描依赖路径。
三、启用 JavaScript/TypeScript 语言支持
Import Cost 默认仅对 .js 和 .ts 文件生效，需确保对应语言模式已激活且未被其他插件覆盖。
1、打开任意 .ts 文件，检查右下角状态栏是否显示 TypeScript；若显示为 Plain Text，点击该区域并选择 Configure Language Mode → TypeScript。
2、在设置中搜索 importCost.enabledLanguages，确认其值包含 ["javascript", "typescript"]。
四、验证 import 行右侧的体积显示
插件会在识别到合法 import 语句后，在行尾插入灰色小字标注，内容为压缩后的大致体积（如 ~3.2 KB），该数值基于模块入口文件及其直接依赖估算。
1、在 .ts 文件中输入 import React from 'react';，观察行尾是否出现类似 ~42.1 KB 的提示。
2、若无显示，将光标移至该行任意位置，按下 Cmd+Shift+P，输入 Import Cost: Toggle Display 并回车启用。
3、尝试导入一个轻量库（如 import { debounce } from 'lodash'），对比其体积是否明显小于全量导入 import _ from 'lodash'。
