简介这份PDF资源面向零基础编程学习者、在校学生以及刚接触前端或脚本开发的入门用户围绕代码编辑器VSCode的获取与上手展开帮助读者从下载安装一路走到能够独立创建并打开项目。资源包含1个pdf文件压缩包约2.12MB篇幅精简、图文步骤为主适合作为入门工具手册随时查阅。内容涵盖VSCode的跨平台特性与语法高亮、代码自动补全、代码重构、查看定义等基础能力介绍官方下载渠道与不同版本的选择方式安装向导中同意协议、选择安装路径、添加开始菜单、按需勾选附加任务到确认安装的完整流程以及安装中文语言包并切换界面语言、按需安装语言插件、选择项目文件夹等常用配置。文中还涉及设置优化与学习入口并针对VSCode没有新建项目功能这一点说明手动新建文件夹导入、再创建HTML等文件的实际做法。目前已有1496人学习适合希望快速完成环境搭建、减少安装与汉化环节反复试错的读者参考。1. 三份 VSCode 装在一台机器上先想清楚再点下一步上个月帮某开发者收拾一台重装过系统的笔记本桌面上并排躺着三个 VSCode 图标一个是用户安装版一个是系统安装版还有一个从压缩包解出来的绿色版。打开扩展面板同一批插件躺着两份改设置的时候改的不知道是哪一份。VSCode 下载与安装听起来就是一路点「下一步」的事真翻车的地方全在细节里——安装包下错架构、PATH 忘了勾、中文包装完没重启、程序和数据分散在两块盘。这套流程适合刚学前端或 Python 的入门者也适合要给一批机器定统一装机规范的运维。下面按我实际装机的顺序推一遍先量机器、定目录再走安装向导然后配语言包和插件最后用一份 HTML 把编辑、保存、预览整条链路验掉中间翻车的地方也一并记下来。2. 下载与环境准备安装包类型、系统位数和三个目录装 VSCode 翻车的人十有八九问题不在安装向导那几步而在双击安装包之前。安装包下错架构、装进一个没有写权限的目录、用户数据和扩展分散在两块盘上这些在安装当天都看不出来等插件装到三十个、设置改到面目全非系统一重装就全丢才想起来当时没规划。所以这一章干的事就三件量清楚机器、选对安装包、把三个目录的位置提前定死。2.1 先量机器系统版本、架构、剩余空间官方的系统要求写得比较清楚Windows 10 1809 及以上或 Windows 1164 位。老机器上还在跑 Windows 7 的早就掉出支持范围了能装上的最后一个大版本停留在很早以前插件市场里的新版扩展多半不兼容硬装的结局是编辑器能开、插件报错。所以动手前先跑三条命令把版本、架构、空间一次看清楚。# 1. 看系统版本号Windows 10 需要 1809build 17763及以上 [System.Environment]::OSVersion.Version # 2. 看 CPU 架构AMD64 走 x64 安装包ARM64 走 ARM64 安装包 $env:PROCESSOR_ARCHITECTURE # 3. 看目标盘剩余空间单位换算成 GB 更好读 Get-PSDrive -Name C | Select-Object Name, {nFreeGB; e{[math]::Round($_.Free/1GB, 1)}}第一条命令输出的是主版本号和构建号构建号低于 17763 就别折腾了先升级系统。第二条命令返回AMD64就下 x64 包返回ARM64说明是骁龙本那类机器得下 ARM64 包下错了安装能过但运行会出各种莫名其妙的崩溃。第三条命令是给空间做预算用的程序本体加上扩展目录留 2GB 比较稳全部塞在只剩几百兆的系统盘上后面装几个大插件就会开始报写入失败。下载完成后顺手校验一下安装包避免网络中断拿到半截文件# 计算安装包的 SHA256与官方下载页给出的哈希值逐位比对 Get-FileHash -Path $env:USERPROFILE\Downloads\VSCodeUserSetup-x64.exe -Algorithm SHA256 | Select-Object Hash, Path-Algorithm指定哈希算法官方页面一般给 SHA256Select-Object只把哈希值和路径打出来方便复制比对。这一步多数人嫌麻烦会跳过但安装包损坏导致的「安装到一半回滚」是最难查的一类问题黑匣子里什么线索都没有。2.2 用户安装版和系统安装版选错要重装官方下载页给 Windows 准备了两种安装器名字很像作用差别不小。选错了不是不能用而是后面每次更新、每次装插件都可能被权限卡一下。对比项用户安装版User Installer系统安装版System Installer默认安装位置当前用户目录下的 AppData\Local\Programs系统盘 Program Files 下管理员权限安装和更新都不需要安装、更新都可能弹 UAC生效范围只对当前登录用户生效这台机器所有用户共用自动更新直接下直接换不弹权限框更新时可能要提权失败率高一些适合场景个人开发机、公司电脑拿不到管理员权限多人共用的工作站、机房统一镜像我自己的习惯是个人笔记本一律用户安装版省心更新不会中途卡在权限弹窗上给团队铺机器、或者一台机器上要开多个 Windows 账号给不同人用才上系统安装版。最忌讳的是两种都装——就成了开头那台机器两份程序、两份扩展、两份设置改哪个都不生效。2.3 下载页面上那几个入口分别对应什么打开https://code.visualstudio.com/页面正中一个大按钮写着「Download for Windows」点它拿到的是当前稳定版的 Windows x64 用户安装包绝大多数人点这个就够了。要别的版本点按钮旁边的小箭头或者页面上的 other platforms 链接会展开一长串Windows 的 User / System、Zip 免安装版、ARM64 版macOS 的 Intel 芯片版和 Apple 芯片版Linux 的 deb、rpm、tar.gz。Zip 免安装版值得单独说一句。它是解压即用不写注册表、不进开始菜单适合三种情况U 盘带着到处走、机器上完全没有安装权限、想同时放两个版本对比插件兼容性。代价是不会自动关联右键菜单code命令也得自己手动加 PATH。注意安装包只从官方下载页拿。第三方下载站给的「汉化版」「增强版」经常捆了改过的扩展源装上去之后插件市场跳转到非官方地址后面排查起来非常费劲。2.4 三个目录先定死程序、数据、扩展VSCode 相关的路径其实有三套很多人只记得程序装哪忘了后两个才是重装系统时真正的损失。类型默认位置我的建议程序目录用户版在 AppData\Local\Programs 下系统版在 Program Files 下可以换盘路径里别带中文和空格用户数据%APPDATA%\Code一般不动改它要额外配环境变量扩展目录%USERPROFILE%\.vscode\extensions插件装得多就迁到大容量盘代码工作区自选单独放数据盘和系统盘分开程序目录换盘是最常见的做法安装向导第二步就能改。扩展目录迁走要用启动参数# 把扩展目录指到数据盘只在这次启动生效 code --extensions-dir D:\vscode-data\extensions # 想长期生效把这段参数写进桌面快捷方式的目标栏或者干脆用环境变量--extensions-dir后面跟的是扩展存放的绝对路径目录不存在会自动创建。这个参数的好处是系统盘重装时扩展不用重下代价是直接用命令行敲code的时候不会带上它得靠快捷方式或者包装脚本兜住。我一般只有扩展装了上百个、系统盘又特别紧张的时候才这么干普通用户没必要。3. 安装向导逐项拆解路径、开始菜单和五个勾选框安装向导一共五六屏大部分人三十秒点完然后花两小时排查为什么右键菜单没有「通过 Code 打开」。这一章把每一屏的选择讲清楚尤其是那几个默认勾选状态不太一样的附加任务。3.1 许可协议和安装路径第一屏是许可协议勾上「我同意此协议」才能点下一步这一步没什么可纠结的。关键是第二屏的安装路径。用户安装版默认落在当前用户的 AppData\Local\Programs 下面路径很长但不需要管理员权限系统安装版默认落在系统盘的 Program Files 下。要改路径点「浏览」选目录两条硬规矩路径里不要有中文不要有空格。中文路径引发的问题很玄学——安装能过编辑器能开但某些插件调用外部工具时会拿到乱码路径报错信息还只说「文件不存在」。空格路径则是老工具的经典雷区命令行拼接参数时会被截断。真要换盘写成D:\tools\VSCode这种短路径最稳。提示路径改完之后记住它后面配环境变量、写脚本、排查插件问题都要用到这个位置。3.2 开始菜单文件夹要不要改第三屏问开始菜单里的文件夹名默认是「Visual Studio Code」。单版本安装直接下一步就行。如果一台机器上确实要并存两个版本比如一个稳定版一个预览版这里改成能区分的名字否则开始菜单里两个一模一样的图标点错是常事。3.3 附加任务五个勾选框逐条过这一屏是整场安装里信息量最大的一屏默认勾选状态在不同版本里还有过变化逐条说。勾选项实际作用我的选择创建桌面快捷方式桌面放一个图标一般不勾任务栏固定更快将「通过 Code 打开」添加到文件右键菜单右键单个文件时多一项勾上将「通过 Code 打开」添加到目录右键菜单右键文件夹时多一项强烈建议勾上将 Code 注册为受支持的文件类型编辑器接管部分文件的双击打开方式谨慎按需添加到 PATH命令行里能直接敲code必须勾目录右键菜单那一项是最容易被忽略、又最提升效率的勾了之后在资源管理器里右键任何文件夹就能直接把它当项目打开不用先开编辑器再一层层找路径。文件类型注册那一项要小心勾了之后某些文本类文件双击可能默认用 VSCode 打开习惯了记事本的人会很不适应而且改回来要进系统设置里翻。PATH 那一项没勾是新手最常见的翻车点症状是打开终端敲code .提示「不是内部或外部命令」。用户安装版写的是当前用户的环境变量系统安装版写的是系统级变量都不需要手动配。3.4 点完安装别急着关收尾三件事最后一屏确认信息点「安装」进度条走完出现完成页很多人直接点「完成」就跑了。我的习惯是多做三件事。第一件确认 PATH 是否真的生效。安装器写环境变量之后已经打开的终端读的还是旧环境必须新开一个窗口# 查 code 命令解析到哪个可执行文件 where code # 打印版本号顺便确认安装的是哪个架构 code --versionwhere是 Windows 下的查找命令会列出 PATH 里所有匹配项。如果打印出两行不同路径说明机器上装了两份得去控制面板卸掉一份。code --version输出三行版本号、提交哈希、架构标识架构那一行要和机器对得上。第二件确认程序目录和数据目录的实际位置记到自己的装机笔记里。重装系统前照着这份记录备份%APPDATA%\Code和扩展目录比什么同步都靠谱。第三件如果是给一批机器铺环境可以走静默安装省掉点击# 无人值守安装/dir 指定目标目录/verysilent 全程不弹界面 Start-Process -FilePath .\VSCodeUserSetup-x64.exe -ArgumentList /verysilent,/dirD:\tools\VSCode -Wait-Wait让脚本等安装结束再往下走后面接注册表检查或者插件批量安装时不会抢跑。静默安装的附加任务走的是默认值PATH 那一项在部分版本里默认不勾装完批量补一次环境变量比较稳。4. 首次启动配置中文语言包、插件和一份 settings.json第一次打开 VSCode界面是英文的左侧一排图标中间一个欢迎页。这一章做的事把界面切成中文、按自己的语言栈装插件、写一份基础设置、再打开设置同步。4.1 中文语言包装和启用是两件事按CtrlShiftX打开扩展视图搜索框输入Chinese第一个结果一般是「Chinese (Simplified) (简体中文) Language Pack」认准发布者是官方的那一个。点安装装完右下角会弹一个提示框问要不要 Change Language and Restart点它编辑器重启后界面就是中文了。没弹窗的情况很常见尤其是装完顺手关了通知的人。手动切CtrlShiftP打开命令面板输入Configure Display Language回车列表里选zh-cn然后重启窗口。这里有个反直觉的点语言包本身只是个插件装上了不等于启用了。命令面板里那个语言列表才是真正的开关选完必须重启窗口才生效光装不切界面永远是英文。切回英文同理选en重启。4.2 插件按语言栈装不按排行榜装扩展面板里有个「最受欢迎」分类新手很容易一口气装二三十个结果启动要等十几秒还查不出是哪个拖慢的。合理的做法是先装语言相关的跑通一个最小项目再按实际需求补。写前端的话内置的 HTML、CSS、JavaScript 语法高亮已经够用补两个Prettier 负责格式化Live Server 负责本地预览。写 Python 装 Python 扩展它会把调试器、语言服务一起带进来。写 Java、Go、C 各自的官方扩展包体积都不小装之前看一眼磁盘。装完插件之后如果启动明显变慢用命令面板里的「开发人员: 显示正在运行的扩展」看启动耗时或者在扩展视图里按「已启用」筛选把不常用的禁用而不是卸载——禁用不占启动时间但配置还在下次要用一键恢复。提示插件也会读工作区里的配置文件。打开一个陌生项目时如果插件行为异常先看.vscode目录里有没有别人留下的设置覆盖了你的用户配置。4.3 一份 settings.json把该改的一次改掉图形化设置界面点起来直观但项目一多就会发现同样的选项在用户级、工作区级各有一份谁覆盖谁全靠猜。直接编辑 JSON 更清楚。命令面板输入Open User Settings (JSON)打开用户级配置文件。{ // 编辑体验 editor.fontSize: 15, editor.tabSize: 2, editor.wordWrap: on, editor.formatOnSave: true, // 文件行为 files.autoSave: onFocusChange, files.encoding: utf8, files.eol: \n, // 工作台 workbench.startupEditor: none, workbench.colorTheme: Default Dark Modern, // 隐私与更新 telemetry.telemetryLevel: off, update.mode: manual }逐条说关键的几个。editor.tabSize设成 2 是前端主流写 Python 的改成 4这个值只影响显示和自动缩进不影响已有文件。editor.wordWrap打开自动换行长行不用拖横向滚动条。editor.formatOnSave保存时自动格式化前提是装了对应语言的格式化器没装的话这一项等于空转不会报错也不会生效——这是很多人以为设置坏了的原因。files.encoding固定 UTF-8 是防乱码的第一道闸files.eol统一成\n是为了跨平台协作时减少无意义的整文件 diff。update.mode设成manual适合网络受限或者不想在写代码时被更新打断的场景代价是要自己记得隔段时间手动查一次。设置文件支持注释写//不会被判语法错误这点和标准 JSON 不一样。4.4 设置同步换机器时的后悔药左下角账户图标点开选「打开设置同步」登录账号后勾选要同步的内容设置、键盘快捷方式、扩展、UI 状态。换机器时登录同一账号几十个插件和一堆自定义快捷键几分钟就回来了比重装后一个个翻插件市场省太多事。有个坑要提前知道同步会把扩展列表一起带过去并静默安装。公司内网机器连不上外部扩展源的话同步过程会卡在装插件那一步表现是登录成功但设置一直不生效。这种环境就别开扩展同步只同步设置和快捷键插件手动装。5. 新建项目与避坑排查从空文件夹到第一份 HTML第一次用 VSCode 写代码的人卡住的地方往往不是语法而是「新建项目」这个按钮在哪。这一章先说清楚项目的组织方式再把装完之后最常见的五个坑列出来。5.1 没有「新建项目」按钮就先建目录VSCode 的设计里没有「项目」这个实体它打开的是文件夹。所以流程倒过来先在文件系统里建目录再让编辑器打开它。在资源管理器里找一个位置新建文件夹比如D:\work\demo-site然后回到 VSCode菜单「文件 → 打开文件夹」选中这个目录。首次打开陌生目录会弹一个「是否信任此文件夹的作者」选「是」否则调试、任务、部分插件都会被限制。用命令行更快前提是 PATH 已经生效# 建目录并进入然后用 code 打开当前目录 mkdir -p /d/work/demo-site cd /d/work/demo-site code .code .里的点代表当前目录编辑器会把这个目录当成工作区根。这一步的等价 PowerShell 写法是New-Item -ItemType Directory -Path D:\work\demo-site之后code D:\work\demo-site。打开之后在左侧资源管理器里点「新建文件」图标输入index.html保存。文件就落在刚才那个目录里了目录结构、文件路径、编辑器打开的东西三者是对齐的这是后面配任务、配调试的基础。注意直接「文件 → 新建文件」再另存为也能写代码但那个文件不属于任何工作区插件读不到工作区配置调试也起不来。养成先开文件夹的习惯。5.2 .code-workspace把多目录收进一个入口一个项目里既有前端又有后端还有一份文档每次开三个窗口切换很烦。VSCode 的多根工作区能把它们收进一个窗口配置文件长这样保存成demo.code-workspace放在项目根目录{ folders: [ { name: 前端, path: frontend }, { name: 后端, path: backend }, { name: 文档, path: ../docs } ], settings: { editor.tabSize: 2, files.exclude: { **/node_modules: true, **/.git: true } } }folders数组里每一项是一个根目录name是显示名path支持相对路径也支持绝对路径../docs这种写法就是跳出当前目录往上找。settings块里的配置只在这个工作区生效不会污染用户级设置files.exclude把node_modules和.git从资源管理器里藏掉目录树会清爽很多注意只是不显示文件还在。双击这个.code-workspace文件就能直接以这个多根结构打开编辑器比每次手动「将文件夹添加到工作区」快。5.3 五条踩坑记录现象、原因、解决下面这几条是装机现场出现频率最高的按现象、原因、解决三段记遇到时直接对号入座。第一条code命令提示「不是内部或外部命令」。现象是终端里敲code .直接报错但编辑器本身用得好好的。原因是安装时「添加到 PATH」那一项没勾或者勾了但当前终端窗口是在安装之前打开的读的还是旧环境变量。解决办法先关掉所有终端窗口重开一个再试还是不行就重新运行一次安装包选「修改」或者走修复流程把 PATH 那项补勾上实在不想重装就在系统环境变量里手动加一条指向程序目录下bin文件夹的路径。第二条中文包装了界面还是英文。现象是扩展列表里明明有简体中文语言包界面纹丝不动。原因是语言包只完成了安装显示语言这个开关没切。解决CtrlShiftP打开命令面板跑Configure Display Language选zh-cn然后按提示重启窗口。重启指的是关掉整个编辑器再开不是关掉当前标签页。第三条右键文件夹没有「通过 Code 打开」。现象是右键文件有这一项右键文件夹没有。原因是安装时只勾了文件上下文菜单没勾目录上下文菜单。解决重新运行安装包走修复把目录那一项补勾不想重装就退而求其次在地址栏输入code .也能达到同样效果。第四条插件装了不生效甚至报加载失败。现象是某个扩展显示已安装但功能就是不出现日志里一堆错误。最常见的原因是机器上并存了用户安装版和系统安装版插件装进了其中一份的目录而你打开的是另一份。解决先where code看解析到几个路径再去「帮助 → 关于」看当前运行的版本信息把多余的那份卸载干净重装插件。第五条打开别人给的文件中文全是乱码。现象是文件内容里的中文变成方块或问号英文正常。原因是文件本身是 GBK 之类编码保存的编辑器按 UTF-8 解析。解决看右下角状态栏的编码标识点它选「通过编码重新打开」在列表里挑 GBK 试确认内容正常后再用「通过编码保存」转成 UTF-8顺手把前面files.encoding固定成utf8避免下次再遇到。6. 装完验证用一份 HTML 走通编辑、保存、预览全链路装完、配完、插件也装了几个这时候最容易犯的错是「看着能用就收工」。真正能说明环境没问题是完整走一遍从敲字到看见结果的链路。6.1 用一份 HTML 跑通编辑到预览接管刚才那个demo-site目录在index.html里贴进下面这段!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title环境验证页/title style /* 用来确认样式能正常加载这行字应该是蓝色 */ #out { color: #1a73e8; font-size: 18px; } /style /head body h1VSCode 环境验证通过/h1 p idout如果这行字是蓝色说明 HTML 和 CSS 都正常。/p /body /html保存之后在资源管理器里右键这个文件选「在浏览器中打开」或者装了 Live Server 就右键选「Open with Live Server」。看到大标题和一行蓝字说明编辑器写文件、文件落盘、浏览器读取这条链路是通的。如果字是黑色说明style块没生效多半是文件被存成了别的扩展名。6.2 三条自查线装完当天就该走一遍验证项操作期望结果命令行可用新开终端敲code --version输出版本号、提交哈希、架构三行中文生效看菜单栏和设置页全部是中文无残留英文项格式化生效故意把缩进打乱按CtrlS保存瞬间缩进对齐无报错提示插件加载扩展视图按「已启用」筛选列表里没有标红的加载失败项工作区配置打开.code-workspace文件左侧出现多个根目录互不干扰格式化那条最容易假通过formatOnSave开了但没装对应语言的格式化器时保存不报错也不格式化。真要确认就在 HTML 里故意写一行超长属性保存后看它有没有被拆行。插件加载那条标红的项点开看错误详情多数是版本不兼容禁用再启用一次往往就好了。还有一个小技巧把项目目录拖进编辑器窗口也能打开但拖整个文件夹和使用「打开文件夹」在路径解析上有细微差别尤其是目录名带空格的时候。从那以后我每次装完新机器都强制自己用命令行code .打开一次项目再保存一次文件、按一次格式化、开一次预览——这三步里任何一步卡住都比写了两小时代码之后才发现环境有问题要好得多。希望帮到你。本文还有配套的精品资源点击获取