ARTICLE DETAIL

资讯详情

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

VSCode 安装汉化与基础配置指南:从零搭建开发环境

VSCode 安装汉化与基础配置指南:从零搭建开发环境 很多刚接触编程的朋友第一次安装 VSCode 时都会有这种感觉从搜索引擎里找到的“官网”五花八门点进去全是广告下载按钮装完以后界面全是英文想改成中文又不知道在哪里设置想写 Python、C 语言又发现代码根本没有提示也不知道怎么配置。这篇文章就是写给这类小白的目标是让你用 10 分钟左右的时间把 VSCode 从下载、安装、汉化到基础配置完整跑通。文中的操作步骤都基于 Windows 系统但整体思路同样适用于 macOS 用户。读完以后你不会再被网上那些过时教程或者捆绑下载站坑到。1. VSCode 到底是什么为什么大家都推荐它VSCode 的全称是 Visual Studio Code它是由微软开发的一款免费、开源、跨平台的代码编辑器。注意官方定义里它是一款“编辑器”而不是传统意义上开箱即用的“IDE”。这个区别很重要因为很多人装完 VSCode 后写不了代码就是把它当成了类似 Visual Studio、PyCharm 那样“安装即全功能”的工具。VSCode 最大的优势在于三点。第一轻量。它的安装包通常只有几十 MB安装完成后占用内存也不高对老旧电脑非常友好。相比动辄几个 GB 的 Visual StudioVSCode 的启动速度几乎是瞬间的。第二跨平台。同一套界面和操作逻辑在 Windows、macOS、Linux 下完全一致。今天你在 Windows 上学会了明天换到 Mac 上也不会有陌生感。第三插件生态极其丰富。VSCode 本身只提供编辑器内核和基础功能但通过安装插件它可以变成 Python 开发工具、C/C IDE、Markdown 写作工具、远程服务器客户端等。这正是它被称为“编辑器神器”的原因。从实际使用角度讲VSCode 解决的痛点是以往一个开发者需要使用多个工具才能完成不同类型的工作现在可以用一个编辑器加不同插件来完成。对于刚入门的初学者你不必一开始就去碰那些功能庞大的 IDE先用 VSCode 建立对代码编辑、命令行、文件目录这些基础概念的认知反而是更平稳的学习路径。2. 下载前必须避开的坑认准官方渠道先说一下下载环节的重中之重一定要去 VSCode 官网下载不要随便点击搜索引擎里的广告链接。很多小白搜索“vscode 下载”时会发现搜索结果前几条往往带有“广告”标识。这些站点可能提供的是旧版本、捆绑程序甚至是伪装成安装包的下载器。被安装上莫名其妙的软件弹窗往往就是这样来的。VSCode 官方下载地址非常容易记住直接在浏览器地址栏输入code.visualstudio.com。打开之后你会看到页面正中间有一个很明显的蓝色下载按钮系统会自动识别你的操作系统并推荐对应版本。如果你用的是 Windows进入后在“Windows”分类下通常还能看到两个选择User Installer用户安装版和 System Installer系统安装版。关于这两个版本的区别简单说明一下。User Installer 是仅当前用户可用的安装方式不需要管理员权限安装过程更顺滑System Installer 是系统级安装需要管理员权限适合多用户共用一台电脑的场景。个人开发者日常使用选 User Installer 就可以。另外官网首页默认提供的版本一般是稳定版Stable适合绝大多数用户。如果你看到蓝色按钮旁边有一个 “Insiders” 入口那个是微软的预览体验版功能更新更快但稳定性没有保障小白不要碰它。3. Windows 安装步骤详解每一步都给你说明原因下载完成后你会得到一个VSCodeUserSetup-x64-最新版本号.exe格式的安装文件。双击开始安装之前请先确认你已经退出杀毒软件和 360 之类安全软件当然如果你用的 Windows Defender一般不会拦截 VSCode可以放心。安装过程分几步来操作。第一步点击弹出窗口里的“我同意此协议”然后点击“下一步”。这个没有什么技术含量但记得看你下载的文件图标是否正常如果文件图标变成了一个空白方块说明文件可能下载不完整右键属性看下文件大小是否和官网标注一致。第二步选择安装路径。默认路径是C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code。这个路径可以修改但强烈建议不要在路径中使用中文目录或者空格因为后续编译代码、使用某些插件时中文路径可能引起奇怪的报错。第三步选择附加任务。这一步非常关键很多小白在这里一路“下一步”到最后结果发现工具栏里根本找不到 VSCode 的快捷入口。附加任务这里建议四项全部勾选“创建桌面快捷方式”“将‘通过 Code 打开’操作添加到文件和目录上下文菜单”“将 Code 注册为受支持的编辑器”“添加到 PATH”其中“添加到 PATH”尤其重要。它会自动把 VSCode 的命令行工具code命令注册到系统环境变量中。有了这个你在任意命令行窗口输入code .就能快速用 VSCode 打开当前目录。这个操作在后面的开发中极其常用。第四步点击“安装”等待进度条走完。安装完成后勾选“启动 Visual Studio Code”点击“完成”。到这里第一次安装就结束了安装本身真的不难难点往往在于安装完之后怎么配置。4. 第一次打开 VSCode界面长什么样先做什么打开 VSCode 后你会看到一个浅色也可能是深色的欢迎页面。界面整体分为五个主要区域这里先给你建立一个整体认知左侧是活动栏提供资源管理器、搜索、源代码管理等入口中间是编辑器区域你打开的代码文件会在这里以标签页方式显示底部是面板区域显示终端、输出、调试控制台等信息最上方是标题栏和菜单栏绝大多数设置和操作都能通过菜单栏完成右侧是缩略图可以快速预览整个文件的代码结构。第一次打开 VSCode不要急着写代码先做两件事。第一件检查安装版本。按快捷键Ctrl Shift P打开命令面板输入 “About”在筛选结果中点击“关于 Visual Studio Code”会弹出窗口显示当前版本号。如果你看到版本号形如Version: 1.96.2这样说明安装正常。第二件用命令面板验证环境变量是否配置成功。按 Ctrl 键盘上数字键 1 左边那个反引号键打开终端输入code --version如果终端输出了三行数字第一行是 VSCode 版本号说明code命令已经生效。如果提示“code 不是内部或外部命令”说明安装时“添加到 PATH”这一项没有勾选你需要重新运行一次安装程序在修改界面勾选后继续完成。5. VSCode 如何设置中文三种方式推荐第二种现在来到本篇文章的重点VSCode 汉化。默认安装完是英文界面虽然英文界面对于学习技术有帮助但很多小白一开始看见满屏英文容易头大我们先把界面改成中文。方式一通过命令面板直接安装这个方法是最快的。按Ctrl Shift P打开命令面板输入configure display language在中文输入法的状态下输入这段英文也没关系命令面板会自动匹配。回车之后VSCode 会跳转到语言设置页面。这里推荐选择“Install additional languages...”然后在左侧扩展列表中搜索“Chinese”。找到作者是 Microsoft 的“中文简体语言包”点击“Install”安装。安装完成后右下角会弹出提示框询问是否重启以更改语言。点击“Change Language and Restart”VSCode 会自动重启重启之后界面就变成中文了。方式二通过扩展商店安装如果你觉得命令面板的操作还是太抽象可以直接点击左侧活动栏中的扩展图标四个方块组成的图标或者按Ctrl Shift X打开扩展商店。在搜索框中输入“chinese”回车后搜索结果第一项通常就是“Chinese (Simplified) (简体中文) Language Pack”。注意看发布者是不是微软然后点击“Install”。安装完同样需要重启。这种方式的好处是可以顺手看看扩展商店里那些热门插件对后面使用 VSCode 会有更直观的感受。方式三直接安装语言包后手动设置如果重启后界面仍然是英文可以手动检查一下点击菜单栏“File” - “Preferences” - “Settings” - “Display Language”在弹出的下拉框里选择“zh-cn”然后重启。语言包本身不需要额外下载离线文件它会通过 VSCode 的扩展市场自动完成安装。如果你在公司内网环境无法访问外网扩展市场汉化就会比较麻烦这种情况下需要联系管理员配置离线安装包。6. 基础配置做一遍让 VSCode 更像“自己人”汉化完成后接下来做几个基础配置。这些配置虽然不影响“能写代码”但对日常使用体验提升非常大。6.1 设置工作台外观点击文件菜单里的“首选项”选择“主题”或者直接按Ctrl K再按Ctrl T打开主题选择器。这里你可以选择深色主题或浅色主题。对长时间看代码的人来说深色主题比如默认的 Dark Modern通常更护眼你可以按个人喜好选择。6.2 显示行号并开启自动保存在 VSCode 中行号默认是开启的但自动保存可能没有开。建议点击“文件”菜单勾选“自动保存”。这样当你切换到其他程序时VSCode 会自动将修改保存到硬盘避免忘记按Ctrl S导致代码丢失。6.3 调整字体大小和缩放按住Ctrl滚动鼠标滚轮可以直接缩放整个编辑器界面的字号。也可以在“设置”搜索“font size”修改编辑器字体大小。开发时眼睛舒服很重要不要用太小字号硬撑。6.4 关闭编辑器的空格显示模式很多人第一次打开 VSCode 写代码时会发现空格变成了圆点换行处也有“↵”符号。这不是错误而是显示了空白字符。可以通过点击右下角的“空格2”标识在弹出菜单中选择“渲染空白字符”为“无”。如果看到段落末尾出现了莫名的符号用这个方式就能找到原因。6.5 设置快捷键习惯VSCode 默认的快捷键对新手来说最容易记的就是几个Ctrl S保存Ctrl Z撤销Ctrl C/Ctrl V复制粘贴Ctrl Shift P打开命令面板Ctrl 打开终端Ctrl /注释一行代码如果能记住这六个快捷键日常操作的效率就已经提升很大了。7. 下一步配置 Python 和 C/C 开发环境VSCode 装好、汉化完成后很多入门朋友立刻就会遇到一个问题怎么让 VSCode 支持写 Python 或 C 语言这就要用到扩展和外部编译环境了。需要注意VSCode 本身不会内置 Python 解释器或 C 编译器它只是把系统里已有的解释器、编译器“调动”起来帮助你执行和调试代码。7.1 配置 Python 环境第一步到 Python 官网下载并安装 Python。安装时务必勾选“Add Python to PATH”这一步和 VSCode 安装时勾选“添加到 PATH”同样重要。第二步回到 VSCode打开扩展商店搜索 Python。安装由微软官方发布的 Python 扩展。它会自动识别你的 Python 解释器位置并在你打开.py文件时提供语法高亮、代码提示、格式化等功能。第三步打开终端验证 Python 是否可用python --version如果输出类似Python 3.12.4的信息说明环境配置成功。如果提示“python 不是内部或外部命令”说明安装时没有勾选 PATH你可以卸载重装也可以手动去系统环境变量里添加 Python 安装目录。第四步新建一个测试文件test.py输入print(Hello, VSCode!)点击右上角的“运行”按钮一个小三角图标选择“Python 文件”下方输出面板就会显示执行结果。到这里Python 开发环境就配置完成。7.2 配置 C/C 环境C/C 环境相对麻烦一点因为 Windows 下默认没有 gcc 编译器。目前比较主流、也适合小白的方式是安装 MinGW-w64。安装完成后把MinGW\bin目录添加到系统环境变量 PATH 中。然后在终端输入gcc --version如果输出了版本信息说明编译器就绪。接着在 VSCode 扩展商店安装微软官方的“C/C”扩展。写一个最简单的 C 文件#include stdio.h int main() { printf(Hello C\n); return 0; }保存为hello.c之后按下F5或者点击“运行”菜单里的“开始调试”VSCode 会提示你选择编译器选择 gcc 即可。首次调试还会生成一个tasks.json配置文件该文件会记录编译命令下次再按 F5 就能直接编译运行。这里提醒一句如果直接点击“运行”后没有弹出编译选择而是报错“未找到任何任务”大概率是编译器没有添加到 PATH或者 C/C 扩展版本不匹配。重新检查系统环境变量即可。8. 推荐几个强烈建议安装的 VSCode 插件除了语言支持插件之外有四个插件对新手和日常开发都非常有用。第一个是Prettier - Code formatter。它的作用是格式化代码。写代码时缩进、空格不规范保存时它会帮你自动整理成统一风格。对于团队协作来说统一格式化风格能减少大量无意义的代码格式冲突。第二个是Bracket Pair Colorizer或 VSCode 自带的括号彩色化功能。这个插件或者内置功能能让成对的括号显示为相同颜色代码嵌套层级深的时候找漏括号、多括号非常方便。新版 VSCode 已经内置了括号颜色化在设置中搜索“bracket pair”开启即可。第三个是GitLens。它能在代码行后面显示这一行最近由谁在什么时候修改过对理解项目代码的演进过程很有帮助。即便你还没有大规模用 git这个插件也能让你更直观地理解版本管理干的事。第四个是Chinese (Simplified) Language Pack。我们已经安装过了这里提它只是为了说明语言包本质上也是一个扩展卸载它并不会影响代码编辑只会回到英文界面。9. 常见问题与排查思路问题现象可能原因排查方式解决方案安装完成后没有桌面快捷方式附加任务未勾选查看安装时附加任务步骤重新运行安装包在“选择附加任务”中勾选“创建桌面快捷方式”终端输入code --version提示找不到命令安装时未勾选“添加到 PATH”打开 CMD 输入code --version重新运行安装包勾选“添加到 PATH”然后重启终端界面始终是英文中文语言包未安装或未设置为 zh-cn打开命令面板查看 display language安装官方中文语言包重启 VSCodePython 文件无法运行未安装 Python 或未勾选 PATH终端输入python --version安装 Python 时勾选“Add Python to PATH”重启 VSCodeC/C 按 F5 无反应未安装 gcc 编译器或编译器不在 PATH终端输入gcc --version安装 MinGW-w64 并配置系统环境变量 PATH打开文件后没有代码提示未安装对应语言扩展查看扩展商店是否安装了 Python/C 扩展安装微软官方扩展重启 VSCode下载安装包时总是下载到一些奇怪软件打开了非官方网站或广告页面检查浏览器地址栏域名直接用地址访问code.visualstudio.com10. 最佳实践与工程建议当 VSCode 装完、汉化完、语言环境也通了之后你在正式进入项目开发之前最好尽早培养下面几个工作习惯。第一配置文件尽量使用 JSON 格式管理。VSCode 的设置分为用户设置和工作区设置工作区设置保存在项目根目录的.vscode/settings.json文件中。建议团队项目把格式化规则、文件编码这类配置提交到版本库保证每个人打开项目后界面和规则一致。第二学会使用集成终端。很多新手习惯在外部写代码、在 VSCode 里看代码这非常低效。在编辑器内按 Ctrl 就能打开终端你可以直接在这个终端里执行编译命令、运行命令配合工作区目录管理效率会更高。第三尽早接触快捷键。VSCode 的快捷键非常多但一开始不需要死记硬背。我的建议是每次想用鼠标去点某个图标时停下来查一下有没有对应快捷键用三次就能记住。长期积累下来你的操作速度会有质的提升。第四不要装一堆用不到的插件。插件虽然能扩展功能但也会影响启动速度和资源占用。刚入门时只装语言包、语言支持、格式化工具这几个就够了。等未来明确需要时才安装新插件。第五备份你自己的配置。VSCode 的常用配置可以通过“设置同步”登录微软账号后在多设备间同步。如果你的代码仓库本身是公用的注意不要把个人 Access Token 写入配置文件避免泄露。11. 总结与后续学习方向这篇文章从 VSCode 是什么开始依次讲清楚了官方下载、Windows 安装、界面汉化、基础设置、Python 和 C/C 环境配置、常用插件以及常见问题排查。以这个流程把每一步走完你就已经具备了一个基本可用的本地代码开发环境。接下来可以继续深入学习的方向有三个。第一个是学习如何使用code命令行快速打开项目和文件这会让你的日常操作更快第二个是尝试用 VSCode 写 HTML、CSS、JavaScript体验一下前端开发的工作流第三个是接触 Git 源代码管理把 VSCode 左侧的源代码管理面板用起来了解和提交历史的基本操作这是所有工程开发都绕不开的一步。不要想着一天之内把所有功能都学会。把今天这篇里的步骤跑通保存好文章备用后续使用 VSCode 遇到问题的时候再回来翻一翻。环境配置本身没有太多高深知识关键是用熟悉的过程。我希望这篇文章能帮你避开最基础的那些坑让你把时间花在真正有价值的代码学习上。
返回列表