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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_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/B：

git checkout feature/B git stash pop

git stash pop会恢复暂存的修改并从暂存列表删除。如果想保留暂存记录，用git stash apply。查看暂存列表用git stash list。

这里有个坑要注意：git stash不存储新增的未跟踪文件。如果你新建了文件但没git add，stash 不会把它存进去。需要加-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 pull

5.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 --timeout=3600'

这样一小时内不用重复输入。如果想永久存储，用：

git config --global credential.helper store

但注意这样密码是明文存在~/.git-credentials里的，公共电脑不要用。更安全的方式是配置 SSH 密钥，生成后把公钥添加到 Git 平台，然后把远程地址改成 SSH 协议：

git remote set-url origin git@github.com:username/repo.git

5.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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，需要管理密钥的话在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 的 console 里创建 API Keys。如果你长期做编码类任务，比如让 AI 帮你批量处理分支合并或生成测试用例，可以看看 Coding Plan 的额度方案。

最后留一个实用技巧：把常用的 Git 命令做成 VS Code 的 tasks.json 或者 shell alias，比如gs代表git status，gp代表git pull，gc代表git commit -m。每天能省下不少敲键盘的时间。分支操作前先git status确认工作区干净，这个习惯能帮你避开大部分意外冲突。