vs code 自带功能无法统计整个 vue 项目代码行数，必须依赖插件或命令行工具；推荐 vscodecounter（需开启"usegitignore":true并排除dist/.nuxt/.output等）或更精准的tokei命令行工具，后者能自动识别.vue文件结构、剔除注释与空行、严格遵守.gitignore。
VS Code 自带功能无法统计整个 Vue 项目代码行数，必须依赖插件或命令行工具；但多数插件默认把 node_modules、.git、dist、.next 甚至 yarn.lock 全算进去，结果虚高 5–10 倍——这不是插件坏了，是没配排除规则。
VSCodeCounter 必须开启 useGitignore 才可信
插件作者 uctakeoff 的 VSCodeCounter 默认完全忽略你的 .gitignore，哪怕里面已写明 node_modules/ 和 dist/。不手动开启，它就照单全收。
- 在
settings.json中添加："VSCodeCounter.useGitignore": true - 重启 VS Code（热重载不生效）
- 验证是否生效：打开命令面板（
Ctrl+Shift+P），运行VSCodeCounter:Count lines in workspace，观察输出里是否还有node_modules目录下的文件语言统计（如大量js或json） - 若仍有，说明
.gitignore路径未被识别——确认你当前打开的是项目根目录（右下角显示路径是否含.git），而非子文件夹
Vue 项目要单独处理 .vue 文件和构建产物
VSCodeCounter 默认把 .vue 当作 HTML 处理，<script></script> 块内 JS 行会被计入 html 类别，导致 JS 行数偏低、HTML 行数虚高；同时，dist/、.nuxt/、.output/ 这类构建目录若没显式排除，会混入上万行压缩 JS。
- 在
settings.json中补全排除项："VSCodeCounter.exclude": ["**/dist/**", "**/.nuxt/**", "**/.output/**", "**/public/**"] - 确保
files.associations不误判："*.vue": "vue"（这是正确关联），避免写成"*.vue": "html"导致解析错乱 - 若需合并统计
.js、.ts、.vue中的逻辑行，得手动加总——插件不自动聚合“前端源码”概念，只按后缀分仓
比插件更准的方案：tokei 命令行 + VS Code 任务集成
对 Vue 项目来说，tokei 是目前唯一能自动识别 <script setup></script>、跳过 SFC 中模板/样式块、且严格遵守 .gitignore 的工具。它把 .vue 拆解为 vue（模板）、typescript（脚本）、css（样式）三类，比插件粒度更合理。
- 安装：
brew install tokei（macOS）、choco install tokei（Windows）、或cargo install tokei - 在项目根目录执行：
tokei --exclude dist --exclude node_modules（即使有.gitignore，也建议显式 exclude，防止 vendor 目录漏掉） - 集成进 VS Code：在
.vscode/tasks.json中定义 task，type必须为"shell"，不能用"process"（否则管道和别名失效） - 注意：
tokei统计的code行 = 剔除空行 + 剔除整行注释后的逻辑行，和人工评估可维护性更接近；而插件的code行只是“非空非纯注释”，含大量 JSX/Vue 模板文本
真正容易被忽略的不是怎么装插件，而是统计目标本身是否清晰：你要的是“交付物体积”“可维护逻辑量”还是“面试吹牛用总数”？VSCodeCounter 给的是物理行数，tokei 给的是语言感知后的有效行数——选错工具，数字再好看也没法支撑决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
