VSCode 下如何检查 Vue 项目中未使用的依赖？

文章目录

[VSCode 下如何检查 Vue 项目中未使用的依赖？](#VSCode 下如何检查 Vue 项目中未使用的依赖？)
- [1. 使用 depcheck 工具（推荐）](#1. 使用 depcheck 工具（推荐）)
- - 安装和使用：
  - 配置（可选）：
- [2. 使用 npm-check 工具](#2. 使用 npm-check 工具)
- [3. VSCode 插件推荐](#3. VSCode 插件推荐)
- - 安装以下插件提升效率：
- [4. 手动检查方法](#4. 手动检查方法)
- - [方法一：使用 grep 搜索](#方法一：使用 grep 搜索)
  - [方法二：使用 Node.js 脚本](#方法二：使用 Node.js 脚本)
- [5. Webpack相关项目](#5. Webpack相关项目)
- 快速工作流程建议：
- 注意事项：

在VSCode中检查Vue项目中未使用的依赖，有几种快速有效的方法：

1. 使用 depcheck 工具（推荐）

安装和使用：

bash 复制代码

# 全局安装
npm install -g depcheck

# 或在项目中安装
npm install depcheck --save-dev

# 运行检查
npx depcheck

配置（可选）：

在项目根目录创建 .depcheckrc 文件：

json 复制代码

{
  "ignores": ["eslint-*", "babel-*"],
  "skip-missing": false
}

2. 使用 npm-check 工具

bash 复制代码

# 安装
npm install -g npm-check

# 运行检查未使用的包
npm-check --unused

3. VSCode 插件推荐

安装以下插件提升效率：

npm Intellisense - 提供import时的自动补全和依赖分析
Import Cost - 显示导入包的大小
Project Manager - 更好的项目依赖管理

4. 手动检查方法

方法一：使用 grep 搜索

bash 复制代码

# 在终端中运行（Linux/Mac）
grep -r "import.*from" src/ | grep -o "from ['\"].*['\"]" | cut -d "'" -f2 | cut -d '"' -f2 | sort | uniq

# Windows PowerShell
Get-ChildItem -Recurse -Filter "*.vue" -Path src | Select-String -Pattern "import.*from" | ForEach-Object { $_ -match "from ['""](.*?)['""]" | Out-Null; $matches[1] } | Sort-Object -Unique

方法二：使用 Node.js 脚本

创建 check-unused.js：

javascript 复制代码

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

// 读取package.json
const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
const deps = Object.keys(packageJson.dependencies || {});
const devDeps = Object.keys(packageJson.devDependencies || {});

// 收集所有import语句
function collectImports(dir) {
  const imports = new Set();
  
  function walk(currentPath) {
    const items = fs.readdirSync(currentPath);
    
    items.forEach(item => {
      const fullPath = path.join(currentPath, item);
      const stat = fs.statSync(fullPath);
      
      if (stat.isDirectory() && !item.includes('node_modules')) {
        walk(fullPath);
      } else if (stat.isFile() && /\.(js|ts|vue)$/.test(item)) {
        const content = fs.readFileSync(fullPath, 'utf8');
        const importMatches = content.match(/from ['"]([^'"]+)['"]/g) || [];
        const requireMatches = content.match(/require\(['"]([^'"]+)['"]\)/g) || [];
        
        [...importMatches, ...requireMatches].forEach(match => {
          const pkgName = match.replace(/from ['"]|['"]|require\(['"]|['"]\)/g, '');
          if (!pkgName.startsWith('.') && !pkgName.startsWith('/')) {
            imports.add(pkgName.split('/')[0]);
          }
        });
      }
    });
  }
  
  walk(dir);
  return imports;
}

const usedImports = collectImports('src');
console.log('未使用的依赖：');
deps.forEach(dep => {
  if (!usedImports.has(dep)) {
    console.log(`- ${dep}`);
  }
});

5. Webpack相关项目

如果你的项目使用Webpack，可以安装：

bash 复制代码

npm install webpack-bundle-analyzer --save-dev

然后在 vue.config.js 中配置：

javascript 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

快速工作流程建议：

定期检查：建议每周或每个迭代周期运行一次

删除前验证：

bash 复制代码

# 先安全移除
npm uninstall <package-name>
# 测试项目是否正常
npm run serve

使用版本控制：在删除前确保代码已提交

注意事项：

有些包可能被间接引用或通过CLI使用
Vue插件可能在 vue.config.js 或 main.js 中全局注册
样式库可能只在CSS中引用
构建工具可能在配置文件或脚本中使用

最简单直接的方法是使用 depcheck，它相对准确且能识别大多数使用场景。