1. 前端日常开发里VS Code 和 Git 到底卡在哪如果你是一名前端开发者每天打交道最多的两个工具大概率就是 VS Code 和 Git。VS Code 负责写代码Git 负责管代码但真正让人头疼的往往不是写业务逻辑而是插件装了一堆却不知道哪个真正提效以及分支切来切去、冲突冒出来时不知道从哪下手。这篇内容聚焦前端日常开发场景围绕 VS Code 插件选型与 Git 分支、冲突处理展开给你一份可复制的 settings.json 骨架、一份经过筛选的插件清单以及分支切换、冲突解决、提交验证的具体命令和操作步骤。先说清楚适合谁看如果你已经能跑通git add、git commit、git push这三板斧但在多人协作时遇到冲突就慌或者 VS Code 装了很多插件却感觉不到效率提升那这篇就是写给你的。我会尽量用“朋友分享”的方式讲不堆术语每个操作都给出可复制的命令和预期结果。整篇内容会持续更新因为插件生态和 Git 工作流都在变。你可以把它当成一个可以随时回来查的操作手册而不是一次性读完就丢的教程。下面先从插件和配置讲起再进入 Git 分支与冲突的实战部分。2. 前置准备TaoToken 与开发环境说明在进入具体配置之前先交代一下本文涉及的工具链。VS Code 插件部分完全本地运行不依赖任何外部服务。Git 部分也是标准 Git 操作适用于 GitHub、GitLab、Gitee 等主流平台。如果你在开发过程中需要调用大模型能力来做代码补全、注释生成或冲突解释可以通过 TaoToken 统一接入。它的官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。对于前端项目里需要接 AI 能力的场景比如写一个代码审查小工具可以直接用这个 API 做请求转发不用自己维护多套密钥。需要说明的是TaoToken 在这里的角色是模型调用入口不是编辑器替代品。VS Code 仍然是你的主编辑器Git 仍然是你的版本管理工具。TaoToken 只是在你需要 AI 辅助时提供一个统一的调用方式。如果你只是做纯前端开发不涉及 AI 功能那这部分可以跳过直接看插件和 Git 操作。环境要求很简单VS Code 版本建议 1.80 以上Git 版本 2.30 以上。操作系统不限Windows、macOS、Linux 都可以。下面所有命令在三个平台上都通用个别平台差异我会单独标注。3. 可复制配置settings.json 骨架与插件清单3.1 settings.json 骨架VS Code 的配置文件分用户级和工作区级。用户级配置对所有项目生效工作区级配置只对当前项目生效。前端项目建议把格式化、保存行为放在工作区级避免影响其他语言项目。下面是一份可以直接复制的前端向 settings.json 骨架放在项目根目录的.vscode/settings.json里{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit, source.organizeImports: explicit }, editor.tabSize: 2, editor.rulers: [80, 120], files.eol: \n, files.trimTrailingWhitespace: true, files.insertFinalNewline: true, typescript.updateImportsOnFileMove.enabled: always, javascript.updateImportsOnFileMove.enabled: always, eslint.validate: [ javascript, javascriptreact, typescript, typescriptreact, vue ], prettier.singleQuote: true, prettier.semi: false, prettier.printWidth: 100, git.autofetch: true, git.confirmSync: false, git.enableSmartCommit: true, git.postCommitCommand: sync, explorer.fileNesting.enabled: true, explorer.fileNesting.patterns: { *.ts: ${capture}.js, ${capture}.d.ts, ${capture}.test.ts, *.js: ${capture}.js.map, ${capture}.min.js, package.json: package-lock.json, yarn.lock, pnpm-lock.yaml, .npmrc } }几个关键点解释一下。editor.formatOnSave配合 Prettier 可以在保存时自动格式化省去手动整理的麻烦。editor.codeActionsOnSave里的source.fixAll.eslint会在保存时自动修复 ESLint 能修的问题但注意这里用的是explicit而不是true因为 VS Code 新版本要求显式声明保存时的代码操作避免保存变慢。git.autofetch设为 true 后VS Code 会定期自动拉取远程分支信息这样你在左下角看到的分支列表就是最新的不会出现“远程新建了分支但本地看不到”的情况。git.postCommitCommand设为sync表示提交后自动执行同步先 pull 再 push这个行为对单人开发很省事但多人协作时建议改成none手动控制拉取和推送时机避免自动合并带来意外冲突。3.2 插件清单与选型理由插件不在多在于每个都解决具体问题。下面这份清单按“必装”和“按需”分类你可以根据自己的技术栈取舍。必装类ESLint 负责代码规范检查配合上面的 settings.json 可以在保存时自动修复。Prettier 负责格式化和 ESLint 配合时注意用eslint-config-prettier关掉冲突规则。GitLens 提供行级 blame、分支对比、提交历史查看后面讲分支文件对比时会用到它的 Compare References 功能。Error Lens 把错误和警告直接显示在代码行末尾不用把鼠标悬停上去才能看到排查类型错误时效率提升明显。按需类Volar 是 Vue 3 项目的必备插件如果你用 Vue 2 则用 Vetur。Auto Rename Tag 在改 HTML/JSX 标签时自动同步修改闭合标签前端写模板时很实用。Path Intellisense 提供文件路径自动补全减少手写相对路径的拼写错误。Import Cost 在 import 语句后面显示这个包打包后的大小帮你控制 bundle 体积。Turbo Console Log 可以一键插入带变量名的 console.log调试时比手写快很多。关于 AI 补全类插件如果你需要接入大模型做代码生成可以通过 TaoToken 的 API 自己写一个简单的 VS Code 扩展或者用支持自定义 API 端点的插件把请求地址指向 https://taotoken.net/api 。这样你可以在一个地方管理模型调用不用在每个插件里单独配置密钥。安装插件后建议重启一次 VS Code确保插件激活。如果某个插件和现有插件冲突VS Code 会在输出面板里提示可以在扩展面板里禁用排查。4. 验证请求分支操作与冲突解决实操4.1 分支切换与新建先确认当前分支状态git branch -a这个命令会列出本地分支和远程分支。远程分支前面会带remotes/origin/前缀。如果远程新建了分支但这里看不到执行git remote update origin --prune--prune的作用是清理本地已经失效的远程分支引用。比如远程删了feature/old本地还显示remotes/origin/feature/old这条命令会把它清掉。新建并切换到功能分支git checkout -b feature/login-page等价于git branch feature/login-page加git checkout feature/login-page。创建后推送到远程并建立跟踪关系git push -u origin feature/login-page-u是--set-upstream的简写建立跟踪后以后直接git push和git pull就行不用再指定远程和分支名。在 VS Code 里操作更直观点击左下角分支名选择“创建新分支”输入分支名后选择源分支。创建完成后点击“同步更改”按钮图标会从刷新变成云朵本地和远程就都有这个分支了。4.2 冲突产生的完整流程与解决冲突的本质是两个人改了同一个文件的同一区域Git 无法自动判断保留哪个。先理解一个标准的安全提交顺序先 commit再 pull最后 push。为什么不能先 pull 再 commit假设你本地有未提交的修改直接 pull 时如果远程改动和你的本地修改有重叠Git 会拒绝合并并报错error: Your local changes to src/utils/request.js would be overwritten by merge. Aborting. Please, commit your changes or stash them before you can merge.这个报错的意思是你本地的修改会被合并覆盖请先提交或暂存。正确做法是先 commit 本地修改让 Git 知道你的改动内容然后再 pull 做对比合并。完整流程如下git add . git commit -m feat: 添加登录页表单校验 git pull origin main如果 pull 时没有冲突Git 会自动合并并生成一个合并提交。如果有冲突会提示Auto-merging src/utils/request.js CONFLICT (content): Merge conflict in src/utils/request.js Automatic merge failed; fix conflicts and then commit the result.打开冲突文件会看到类似这样的标记 HEAD const baseURL https://api.example.com/v1 const baseURL https://api.example.com/v2 branch main of https://github.com/xxx/repo.git HEAD和之间是你本地的修改和之间是远程拉下来的修改。你需要手动决定保留哪部分或者两者都保留但调整逻辑。改完后删除所有冲突标记然后git add src/utils/request.js git commit -m merge: 解决 request.js 的 baseURL 冲突 git push origin main在 VS Code 里冲突文件会高亮显示上方有“采用当前更改”“采用传入更改”“保留两者”等按钮点选后保存即可。但建议还是理解命令行流程因为 VS Code 的按钮本质上就是在帮你执行这些操作遇到复杂冲突时命令行更可控。4.3 暂存修改stash 的正确用法场景你正在feature/B分支开发突然需要切到main修一个紧急 bug但feature/B的修改还没完成不想提交。git stash这条命令把当前未提交的修改暂存起来工作区恢复到上次提交的状态。然后你可以切到main修 bug修完提交推送再切回feature/Bgit checkout feature/B git stash popgit stash pop会恢复暂存的修改并从暂存列表删除。如果想保留暂存记录用git stash apply。查看暂存列表用git stash list。这里有个坑要注意git stash不存储新增的未跟踪文件。如果你新建了文件但没git addstash 不会把它存进去。需要加-u参数git stash -u另一个坑是 stash 之后不要直接 pull。如果你 stash 的文件在远程被其他人改了你 pull 下来后再stash pop会报错因为本地文件和 stash 内容不一致。正确顺序是 stash 后先切分支处理其他事回来 pop 之前先确认当前分支和 stash 时的基线一致。4.4 分支合并与部分文件合并把功能分支合并到主分支git checkout main git pull origin main git merge feature/login-page git push origin main如果只想把 A 分支的某几个文件合并到 B 分支不需要整个分支合并git checkout B git checkout A -- src/utils/request.js src/config/index.js这条命令把 A 分支上这两个文件的版本取到 B 分支的工作区然后正常git add和git commit即可。注意路径要写对可以用git checkout A -- .取 A 分支所有文件但这样会覆盖 B 分支的对应文件慎用。4.5 撤销提交与清理缓存撤销最近一次提交但保留修改在工作区git reset HEAD~1如果想把修改保留在暂存区git reset --soft HEAD~1撤销指定文件的暂存git reset HEAD src/utils/request.js如果.gitignore不生效通常是因为文件已经被纳入了版本管理。先清除缓存再重新提交git rm -r --cached . git add . git commit -m chore: 清除缓存并应用 .gitignore如果某个具体文件的 HEAD 指针有问题先单独移除git rm --cached -f src/legacy/old-file.js然后再执行上面的清除缓存操作。5. 本篇常见错排查5.1 报错You have not concluded your merge (MERGE_HEAD exists)这个报错说明上一次 merge 没有正常结束可能是 pull 时冲突后没有完成提交。解决方法一保留本地更改并中止合并git merge --abort git reset --merge git pull解决方法二放弃本地代码用远程覆盖慎用会丢失本地修改git fetch --all git reset --hard origin/main git fetch通常用方法一就够了。git merge --abort会回到 merge 之前的状态然后重新 pull 再处理冲突。5.2 报错在签出前请清理存储库工作树VS Code 拉取代码时提示这个说明工作区有未提交的修改。两种处理方式。一是暂存后拉取再恢复git stash git pull git stash pop二是放弃本地修改直接覆盖不推荐除非确认本地修改不要了git reset --hard git pull5.3 远程分支已删除但本地还显示清理本地对远程分支的引用git fetch --prune或者git remote prune origin如果本地还保留着已删除分支的跟踪关系取消跟踪git branch --unset-upstream feature/old删除本地分支git branch -d feature/old如果分支有未合并的提交-d会拒绝删除确认不要了可以用-D强制删除。5.4 每次 git 操作都要输入账号密码缓存密码一段时间git config --global credential.helper cache --timeout3600这样一小时内不用重复输入。如果想永久存储用git config --global credential.helper store但注意这样密码是明文存在~/.git-credentials里的公共电脑不要用。更安全的方式是配置 SSH 密钥生成后把公钥添加到 Git 平台然后把远程地址改成 SSH 协议git remote set-url origin gitgithub.com:username/repo.git5.5 子模块更新报错 pathspec did not match报错信息类似error: pathspec xxx did not match any file(s) known to git解决方法是重新添加子模块git submodule add -f https://github.com/xxx/xxx.git src/utils git submodule init-f是强制添加后面跟的是子模块仓库地址和本地路径。添加后执行git submodule update --init初始化。6. 持续更新与工具入口这篇内容会持续补充新的插件和 Git 操作场景。前端工具链变化快今天推荐的插件可能明年就停止维护了所以我会在每次更新时标注适用版本和替代方案。如果你在开发中需要接入大模型能力比如做代码补全、生成 commit message、或者写一个自动解释冲突的小工具可以通过 TaoToken 的 API 统一调用。API 地址是 https://taotoken.net/api 模型对话入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 需要管理密钥的话在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 的 console 里创建 API Keys。如果你长期做编码类任务比如让 AI 帮你批量处理分支合并或生成测试用例可以看看 Coding Plan 的额度方案。最后留一个实用技巧把常用的 Git 命令做成 VS Code 的 tasks.json 或者 shell alias比如gs代表git statusgp代表git pullgc代表git commit -m。每天能省下不少敲键盘的时间。分支操作前先git status确认工作区干净这个习惯能帮你避开大部分意外冲突。
