ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

VSCode携手Git:从安装配置到高频命令与问题排查的实战指南

VSCode携手Git:从安装配置到高频命令与问题排查的实战指南 写代码久了你会发现一个扎心的事实真正拉开工作效率差距的往往不是某个高深算法而是每天都在用的基础工具。VSCode加Git这个组合几乎已经是现代开发者的标配——一个是当下最流行的编辑器一个是代码版本管理的事实标准。但我在带新人、帮同事排坑的过程中发现很多人要么只会在命令行里敲几个固定命令要么只在界面上点按钮出了问题就抓瞎。这篇博文不讲那些花哨的插件推荐只聊VSCode和Git配合使用时最核心的安装配置、日常操作、高频命令和问题排查都是我实际踩过坑之后整理出来的东西照着做能省下不少折腾时间。1. 环境准备VSCode与Git的安装与基础配置1.1 Git安装版本选择与安装选项的坑先装Git。很多人觉得这一步没什么技术含量下载、双击、下一步就完事了但我在不同机器上装过几十次负责任的告诉你安装选项里那几个勾选没选对后面会多出一堆莫名其妙的麻烦。Windows下去哪里下载去Git官网认准git-scm.com不要用第三方下载站的那种“一键安装包”。版本选择上64位系统就选Windows 64-bit版本如果你还在用 Win7 32位的老机器得手动往下翻找对应的32位旧版本。现在的Git for Windows版本号一般形如2.4x.x新版本对老系统支持越来越差Win7用户卡在 2.35 左右的版本是稳妥做法。安装过程中有几个选项必须说清楚。第一个是Adjusting your PATH environment一定要选中间那个Git from the command line and also from 3rd-party software。选第一个只会装个精简模式后面很多工具调用不到Git选第三个虽然功能一样但会往系统环境变量里塞一堆额外路径没必要。第二个是Configuring the line ending conversions也就是行尾换行符转换。新手直接选第一个Checkout Windows-style, commit Unix-style line endings就对了。这个选项建议Windows用户保留因为Windows和Linux/macOS的换行符不一样Git自动转换能避免很多文件内容莫名“变了”的问题。第三个是Choosing the default editor used by Git默认是Vim。我强烈建议你在这一步选Use Visual Studio Code as Gits default editor前提是已经装了VSCode。不然后面执行git commit后直接弹进Vim界面很多新手不知道按i进入编辑再Esc后:wq退出直接在编辑器里卡死这是最常见的劝退场景。安装完成之后建议顺手测试一下。打开终端或Git Bash输入git --version如果能输出版本号比如git version 2.43.0.windows.1说明安装成功。1.2 初始化身份信息与Git Bash的正确认知Git安装完以后第一件事不是急着建仓库是先设置你的身份信息。这一步被太多人跳过了导致提交代码后历史记录里全是 “Unknown” 或者干脆提交不了。打开Git Bash依次执行git config --global user.name Your Name git config --global user.email your_emailexample.com--global的意思是把你当前这台电脑上所有仓库都用这个身份。填邮箱不用太纠结是不是真实邮箱但建议和你的代码托管平台账号保持一致这样提交记录能正确关联到你的头像和主页上。检查是否配置成功git config --global --list这里多说一句Git Bash。它本质上是Windows上运行的模拟Unix环境你熟悉的ls、cd、pwd、mkdir这些Linux命令在里面都能用。我见过不少在Windows下用CMD习惯的人到了Git Bash里第一反应是打dir虽然也能用但既然装了Git Bash就顺势把常用Linux命令用起来后面结合VSCode内置终端会顺畅很多。还有一个容易让人懵的点Git Bash启动后默认位置是用户主目录通常形如C:\Users\你的用户名。这和你在文件管理器里看到的盘符路径不一样刚开始切目录时容易迷糊。记住一个技巧用pwd看当前路径用cd 某某文件夹进入目标目录用explorer .可以直接打开当前目录的Windows文件窗口这两个配合起来能少走很多弯路。1.3 VSCode安装、汉化与Git联动设置VSCode的安装相对省心去官网下载安装包一路默认安装就行。官网就是code.visualstudio.com没有任何套路。安装时有两个选项值得注意第一个将“通过代码打开”操作添加到Windows资源管理器目录上下文菜单勾选后鼠标右键就能直接用VSCode打开文件夹第二个将“使用代码打开”操作添加到Windows资源管理器文件上下文菜单作用类似。这两个对日常操作提升明显建议都勾上。打开VSCode后第一件事界面是英文的不要慌直接搜索安装插件Chinese (Simplified) (简体中文) Language Pack装完右下角弹提示重启VSCode就汉化完成了。不过我个人建议界面不用急着汉化熟练之后还是英文界面最顺手。但出于学习友好想快速上手的先汉化没问题。VSCode默认就能识别Git不需要额外装什么大插件。装完后打开任意文件夹左侧栏会自动出现源代码管理图标分支形状的图标只要这个文件夹是Git仓库就能看到改动列表。需要调整的一个关键设置是集成终端。按Ctrl 空格调出命令面板输入Terminal: Select Default Profile把默认终端改成Git Bash。这样以后在VSCode里按Ctrl 打开终端用的就是Git Bash环境不用单独切窗口。我自己这样设置以后基本告别了外面再开一个黑窗口的习惯。补充一个插件GitLens。它能在代码行内显示这行代码是谁、在什么时候、因为什么提交改的排查代码历史的时候极其好用。刚起步的用户可以先装上不用管它那些复杂的配置默认状态就够用。2. 用VSCode完成一次完整的代码提交2.1 从零初始化一个仓库假设你有一个项目文件夹想用Git管理起来。命令行里进入这个目录执行git init这一步会在当前目录生成一个.git文件夹里面保存着这个仓库的全部历史信息。注意.git文件夹默认是隐藏的别因为看不见就以为没成功。如果你是在VSCode里打开了文件夹可以在Git Bash里直接执行上面的命令。执行完毕后左侧源代码管理面板会亮起。你也能通过资源管理器右键文件夹选择Git Bash Here直接在该目录打开终端这是个非常省事的习惯。另外一个重要的文件是.gitignore。它的作用是告诉Git哪些文件和目录不要纳入版本管理。比如node_modules、__pycache__、build、.env这些要么是依赖目录体积巨大要么是本地配置涉及隐私统统不该提交。新建一个.gitignore文件把需要忽略的内容填进去node_modules/ dist/ .vscode/ *.log .env特别是.vscode/这个目录我之前吃过亏。它是VSCode针对当前项目的配置文件夹里面可能包含调试配置、推荐插件等团队约定信息。你要是打算把这些也提交进去就得小心里面有本地的路径信息一不小心暴露了个人电脑路径。团队项目里通常建议通过官方推荐机制共享配置而不是直接整个提交.vscode/。2.2 使用源代码管理面板完成提交与推送在VSCode左侧点击源代码管理图标你会看到当前仓库的改动情况。修改过的文件会出现在 “更改” 列表里每个文件前面有个 M 标记这是Git对修改状态Modified的缩写。新增文件显示 UUntracked意思是还没被Git跟踪。提交的流程其实只有三步。第一步暂存改动。把鼠标移到文件上点那个加号图标或者点文件列表顶部的加号把所有改动一次性暂存。暂存的含义是把选中的改动从工作区搬到暂存区告诉Git“这些是要纳入本次提交的”。这个中间态的妙处在于你可以把不同文件的改动拆成多个逻辑提交而不是一把梭全部提交。第二步写提交信息。在面板顶部的输入框里写一句清晰的话比如fix: 修复登录接口超时问题。这里我强烈建议用统一的提交风格。《规范》这类工具治标不治本先从小处做起至少做到“一条提交只做一件事”并且“信息能让人看懂”比什么约定都重要。写好后点 “提交” 按钮。第三步同步到远程。提交只是提交到了本地仓库别人看不到。点面板上的 “同步更改” 按钮VSCode会自动执行git pull和git push。第一次往远程仓库推送时VSCode会提示你配置远程仓库地址或者选择初始化过于复杂可以直接复制远程仓库地址到设置里。这里有个很多人容易混淆的概念commit是保存到本地历史push才是推送到远程。在本地随便提交多少次都没事push 这一步才真正影响队友。2.3 分支管理VSCode里的可视化工具体验分支是Git里最核心、也最容易被新手误解的概念。用生活化的类比来说分支就像是游戏里的存档节点主线是主分支你从某个存档点复制出一个平行世界在平行世界里随便折腾玩砸了可以随时回到主线节点玩好了再把平行世界合并回主线。在VSCode里操作分支非常直观。看左下角有一个分支名称默认是main或者master。点击它顶部会弹出分支操作列表你可以输入新名字创建并切换到一个新分支从列表里直接切换已有分支在分支: 全部下面找到创建分支...日常开发流程建议是每次开始干一个功能先从主线拉一个分支比如feature/login-fix干完合并回主线或提合并请求不要直接在主干上胡乱提交。这样做的好处是即使新功能半途写坏了也不会污染主分支你随时可以切回主线继续别的活了。合并分支在VSCode里也很快。先切到要接收合并的目标分支比如切回main然后按Ctrl Shift P打开命令面板输入Git: 合并分支选择要合并进来的那个分支确认即可。VSCode会检查这次合并是否会产生冲突没有冲突直接合并成功有冲突就会在源代码管理面板标出来。说到冲突很多新人一看到 “CONFLICT” 就腿软。其实冲突的本质很简单你和同事改了同一个文件的同一处地方Git不知道听谁的打开冲突文件看看里面会有这些标记 HEAD 这里是当前分支的内容 feature/login-fix 这里是想要合并进来的分支的内容你只需要把、、这些标记删掉把最终想保留的内容留下保存文件然后重新提交这一次合并冲突就解决完了。在VSCode里冲突区域会用不同底色高亮显示还提供 “Accept Current Change” 之类的快捷选择按钮比在命令行里用Vim处理不知道舒服多少倍。3. 高频Git命令与进阶技巧3.1 git commit --amend怎么用修改提交信息的正确姿势为什么单独把git commit --amend拿出来讲因为这是一个使用频率很高、但很多人都用错的命令。它的作用是把刚才那次提交“补一补”具体有两个场景。场景一提交完发现信息写错了。刚提交完代码突然发现提交信息把编号打错了比如实际修复的是BUG-1024你写成了BUG-2048。这时候执行git commit --amend -m fix: 修复BUG-1024 登录接口超时问题这条命令会用刚才那条提交的“位置”把信息替换掉历史里不会留下那条写错信息的记录。场景二提交完发现漏了一个文件或者想再补个小改动。把漏掉的变更先暂存git add 漏掉的文件 git commit --amend --no-edit这里的关键参数是--no-edit意思是“不要让我重新打字了直接沿用原来的提交信息”。执行完以后刚才那条提交会包含追加进去的改动历史依然干净。但--amend有一条红线不要修改已经推送到远程、而且别人可能已经基于它工作的提交。原因很简单--amend本质上是“删掉旧提交、生成一个新提交”提交的哈希值会变。如果别人已经拉取了旧版并基于它开发你去强行修改这个提交两个人就对不上账了要花十倍的精力去处理这种历史错乱问题。安全的做法是只有当你确定这条提交还在本地、没推出去或者你确定只有你一个人在用它时才用--amend。如果提交已经推送到远程了尽量不要用amend老老实实追加一条新的fix:提交即可。这也是为什么建议提交信息写得清晰一点、提交前检查一遍再提交养成好习惯能省掉这步的纠结。3.2 配置Git免密SSH方案完整流程要不要配免密取决于你的使用习惯。如果只是本地仓库当然不必但只要涉及推送到远程仓库这一节就值得看。我第一次配置完免密后再也不用每隔一会儿输一次用户名密码体验是质变。两种主流的免密方案。一种是HTTPS方式配合Windows凭据管理器。现在Windows版的Git默认集成了manager凭据管理器你第一次通过HTTPS推送输入用户名密码时它会自动记住。之后同一地址的推送就不用再输入了。这个方案胜在省事零配置即可实现免密。缺点是有些场景认的不是密码而是访问令牌——特别是一堆代码托管平台在国内访问不稳定的情况下令牌方式偶尔出幺蛾子。另一种是SSH Key更灵活、更通用。我在多台服务器、多个平台之间切换时都优先用这种方式。流程如下。先生成密钥ssh-keygen -t ed25519 -C your_emailexample.com一路回车生成的公钥默认保存在~/.ssh/id_ed25519.pub。查看公钥内容cat ~/.ssh/id_ed25519.pub然后把这段内容复制到代码托管平台的 SSH Keys 设置里。打开终端测试连通性ssh -T gitgithub.com如果是GitHub会出现一段提示询问你是否确认连接输入yes回车看到 “Hi xxx! Youve successfully authenticated” 就说明通了。配完SSH后克隆仓库用SSH地址git clone gitgithub.com:用户名/仓库名.git以后推拉操作就不会再问你密码了。在VSCode里也一样提交后点同步按钮直接就能推上去。3.3 常用Git命令速查覆盖日常90%场景很多人一个用完就忘要从搜索引擎里现查这里把高频命令整理成一张速查表。不需要背下来放旁边随时翻就行。命令作用备注git status查看当前工作区状态日常使用频率最高看改了什么git diff查看工作区与暂存区的差异能精确看到每一行改了什么git add 文件名暂存指定文件用git add .暂存所有改动谨慎git commit -m 提交信息提交暂存区内容提交信息要写清楚git push推送到远程第一次推需要-u origin 分支名git pull拉取远程更新相当于fetchmergegit branch查看本地分支当前分支前面有*git checkout 分支名切换到指定分支也可以git switchgit merge 分支名合并指定分支到当前分支冲突处理见上文git log --oneline查看简洁提交历史每行显示一条提交信息和哈希前缀git stash暂存当前未提交的改动临时切换分支前抢救工作进度git reset --hard HEAD丢弃工作区所有未提交改动慎用不可恢复特别提醒一下git reset --hard HEAD这类硬重置命令。它的意思是把工作区、暂存区全部回滚到最近一次提交的状态你在改动里写的所有代码都会消失。如果你执行完后悔也用git reflog找回但能找回的前提是还没有垃圾清理。所以执行这类高危命令前先确认好是否真的不在乎这些改动。4. 常见问题与排查实录4.1 fatal: not a git repository 排查思路这个报错估计每个Git用户都见过。出现这个错误的时候Git告诉你“当前这个目录不在任何Git仓库里或者Git找不到仓库标识。”常见原因有三个。第一种这个文件夹从来就没执行过git init根本不是仓库。解决办法直接git init初始化。第二种当前所在的子目录并没有独立的Git仓库而是一个仓库的子目录。Git的仓库标识是.git文件夹它会在当前目录往上逐级找。如果你在D:/project/src/hooks里执行Git命令Git会往上级一路找到D:/project的.git才确认仓库位置。如果你在仓库根目录的上一级目录执行命令那自然找不到。第三种也是我自己在VSCode里经常遇到的情况仓库的.git文件夹被误删了。有些编辑器或配置文件里把.git列入忽略项有人清理时手一抖就删了。排查方法很简单在文件管理器里开启显示隐藏项目确认仓库根目录是否存在.git文件夹。在VSCode里遇到这个报错还要注意一点你打开的是不是仓库根目录。比如你双击进入了仓库的子文件夹VSCode把这个子文件夹当成了工作区根目录Git面板会变成灰色不可用状态命令行在这个终端里也会报not a git repository。解决办法是不要直接双击打开子目录先在VSCode里从“文件 - 打开文件夹”选择仓库的根目录。4.2 Git命令提示不是内部或外部命令Windows用户在CMD里输入git --version报错提示 “git 不是内部或外部命令也不是可运行的程序”说明Git的可执行文件还没加到系统PATH环境变量里。排查第一步找到Git实际安装位置。默认一般是C:\Program Files\Git\bin第二步检查这个路径在不在系统PATH里。在Windows搜索框输入 “环境变量”打开 “编辑系统环境变量”在 “环境变量” 窗口的下半部分选中Path点编辑看里面有没有Git的目录。没有就新建添加。添加完新开一个CMD窗口再试git --version注意必须新开窗口因为旧窗口的环境变量不会自动刷新。如果装的时候选了精简模式导致没加到PATH也可以不用手动改环境变量直接重新运行Git安装程序在Adjusting your PATH environment选项里选择第二项并完成安装省时省心。4.3 VSCode里Git面板灰色或看不到改动VSCode源代码管理面板明明开着但列表空白或者整个面板是灰色的这种情况我排查过不少次整理一下三个常见原因。原因一你没有打开任何文件夹。VSCode只对“已打开的文件夹”工作如果你是单文件模式左侧源代码管理就不会有内容。按Ctrl O打开项目文件夹即可。原因二该目录不是Git仓库。面板默认在非仓库目录时显示的是空白。新建仓库后面板会重新识别。实在不确定是不是仓库直接在目录里执行git status看结果。原因三VSCode没有找到Git可执行程序。如果你用的是绿色版或便携版GitVSCode可能识别不到。打开VSCode设置搜索git.path在settings.json里手动指定git.path: C:\\Program Files\\Git\\bin\\git.exe这里路径里的反斜杠要写两个这是JSON的转义规则。加上后重启VSCode。原因四比较隐蔽进程卡住了。有时Windows和Git的锁文件机制冲突导致面板一直转圈。这种时候最有效的办法是把VSCode彻底退出特别是检查右下角的托盘图标右键退出再重新打开。我遇到过一次资源管理器崩溃导致Git面板冻结重启后就好了。4.4 远程仓库地址配置错误与用途说明如果你在推送时发现地址写错了或者远程仓库迁移地址变了需要修改本地仓库关联的远程地址。查看当前远程仓库git remote -v修改远程仓库地址git remote set-url origin 新地址这个操作在VSCode里没有直接对应按钮命令行是正规途径。另外origin这个名字是约定俗成的默认远程仓库别名你完全可以用别的名字但没必要给自己找事保持默认就好。还有个常见场景本地 foo 仓库想推送到远程已经存在的 bar 仓库。如果 bar 仓库不是一片空白里面已经有文件直接 push 会被拒绝。这时候要先拉取远程内容再推送git pull origin 分支名 --allow-unrelated-histories git push origin 分支名--allow-unrelated-histories这个参数翻译过来是把两个没有共同历史的仓库强行合并。新手在这里经常卡一小时其实就是差这个参数。注意遇到这个情况时你得先想清楚自己是真的要把两个独立仓库合并还是不小心推错了仓库。强制合并不适当的仓库会产生非常混乱的历史。结尾那里我想聊一件实际发生的小事。有一次为了赶工我连续提交了十几条 “update” 信息第二天想回看周末改了什么翻了半天什么也看不出。从那次以后我固定了提交信息的风格“文件名前缀-做了什么”比如fix(login): 修复账号为空时的报错。这么写三个月后再看历史一眼就能知道改了什么。养成这个习惯不用花多少时间但对个人维护项目、给同事做交接真的帮助翻倍。如果你只记住这篇文章里的一件事请记住提交信息写清楚不仅在帮未来的自己也在帮团队里的每个人。另外提一句如果在做带远程主机的开发配置比如连公司内网的服务器做编译测试可以考虑给VSCode装个Remote - SSH插件配合跳板机连内网服务器也很常见远程改代码、提交推送都顺畅。不过这就是另一个话题了哪天有空再写一篇专门讲远程开发环境搭建。
返回列表