VS Code 安装教程

妙莎
0 阅读6分钟

序言

🐒：
   前端离职了，现在兼职前端的活，算是半个转全栈了，然后来学习与前端相关的知识，其中，需要安装 VS Code，原电脑也有，平常用来查代码的，但版本太老了，现在要下载最新版本的，所以顺便记录一下。

介绍

VS Code 是微软推出的 免费、开源、跨平台（Windows/macOS/Linux） 的轻量级代码编辑器。

  • 核心定位：它并非笨重的 “集成开发环境（IDE）”，而是 “编辑器+插件化” 的形态。你装它时只有几百 MB，安装对应插件（如 Python、Java、C++）后，功能可媲美专业 IDE。

  • 三大王牌特性：

    • 内置终端：无需切换窗口，直接在编辑器底部运行命令行（Git、npm 等）。
    • IntelliSense 智能补全：基于代码上下文提供精准的变量、函数自动补全。
    • Git 可视化集成：侧边栏直接管理代码版本，解决冲突可视化极强。

  • 生态优势：拥有全球最大的插件市场（Extensions Marketplace），几乎覆盖所有编程语言和开发场景。

如何选择

选择解压版

VS Code 官方的 ZIP 解压版和安装版，在运行代码、编译、调试的核心功能上没有任何区别。很多资深程序员反而偏爱绿色版。

绿色版的 “真香” 优点

  • “免污染” 系统：所有文件锁在 G:\vscode （公司老版本的路径）文件夹里，不会往 C 盘系统目录乱写注册表，电脑更干净。
  • 多版本共存：你可以同时保留 1.47 和最新的 1.90 版本，方便测试某个老项目的兼容性。
  • “即插即用” ：拷进 U 盘，插到任何一台 Windows 电脑上就能直接用（前提是路径不变）。

绿色版的 “折腾” 缺点

  • 无法自动更新：安装版点一下按钮就能自动升级，绿色版每次都要手动去官网下载新包，解压覆盖。
  • 右键菜单/环境变量需手动配：安装版自动帮你配好右键 “通过 Code 打开” 和终端 code 命令，绿色版需要你自己去设置。

终极问答：为什么不只推荐安装版？

  • 因为安装版虽然方便，但所有配置（插件、账号）都强行存在 C 盘的 AppData 里。
  • 长期使用后，C 盘会被插件缓存占掉好几个 G，且重装系统前必须手动备份。
  • 而便携版把 data 文件夹放在安装目录下，重装系统后，双击 Code.exe 直接恢复所有配置，无需重装插件。

长期使用的话，看情况

针对 “长期使用”，且要兼顾公司项目、个人项目甚至两者混合的场景，我的结论非常明确：

  • 如果你只能选一个版本长期使用，首选 “官方 System Installer（系统安装版）”。

  • 但如果你公司电脑权限管得严，或者你有严重的“洁癖”，强烈建议用 “带 data 文件夹的便携版”做双实例隔离。

使用场景强烈建议理由操作
纯个人项目
（在自己电脑上）		System Installer（系统安装版）个人电脑追求省心。
安装版支持后台自动更新（补丁随点随装），且安装时自动把 code 命令加入系统环境变量、自动关联文件图标。
长期用下来，你几乎感觉不到它的存在，专注于写代码即可。		去官网下载带有 System 字样的 .exe 安装包，一路 Next 即可。
纯公司项目
（公司发的办公电脑）		ZIP 解压版 + 手动新建 data 文件夹（便携版）公司电脑通常禁止向 C 盘写入，或者禁止安装未经 IT 审批的软件。
安装版需要管理员权限，而绿色版解压在 D 盘或其他非系统盘，完全不需要管理员权限，且不会往系统注册表乱写，IT 部门查起来也无可挑剔。		下载 ZIP 包，解压到 D:\VS_Code_Work，在根目录新建 data 文件夹，把插件和配置全锁在 D 盘。
离职时直接删掉整个文件夹，不留任何个人痕迹。

如果是公司项目 & 个人项目 同时在一台电脑上用（高危场景）

  • 强烈建议：使用两个 “独立的便携版”，物理隔离！

    • 这是最容易被忽视的痛点。

    • 如果你用同一个 VS Code 同时开公司代码和私人 GitHub 仓库，极易发生以下翻车事故：

      • 不小心把私人 GitHub 的账号 Token 提交到了公司项目里。
      • 公司强制要求的代码格式化插件（如 ESLint 规则）弄乱了个人项目的排版。
      • 为了公司项目装的老旧插件，拖慢了个人项目的智能提示。

  • 最佳长期方案（双版本物理隔离）：

    • 下载一份最新的 ZIP 便携版，解压到 D:\VS_Code_Work（公司专用），根目录建 data 文件夹。
    • 再下载一份最新 ZIP 便携版，解压到 D:\VS_Code_Personal（个人专用），根目录也建 data 文件夹。
    • 给这两个文件夹里的 Code.exe 分别发送快捷方式到桌面，重命名为  “公司代码”  和  “私人代码” 。

  • 长期效果：

    • 两个软件互不干扰，插件各自独立安装，Git 账号各自登录。
    • 打开公司快捷方式，永远只提交公司代码；
    • 打开个人快捷方式，永远只连自己的 GitHub。

如何安装

下载

链接：VS Code 便携版

选择下载【.zip （x64）】；

image.png

下载成功的界面，点击那个文件夹图标，可以跳转到   .exe 下载的地方，默认都是 C 盘的【下载】；

image.png

image.png

安装

新建文件夹，将 .zip 复制或剪切到该文件夹里面，然后进行解压；

image.png

如何新建文件夹，并命名为 data;

image.png

点一下 Code.exe ，然后鼠标右键，选择【创建快捷方式】；

image.png

将快捷键剪切到桌面，然后双击，进入 VSCode；

这个我是打算自己用的，所以这个界面我选择 GitHub 登录，正常使用的话，就是不登录直接用；

image.png

image.png

安装插件（如汉化）

点击插件模块

image.png

在搜索栏里面输入 Chinese，会出现相关插件，选择简体中文的就好；

image.png

安装成功后会有弹窗提示，点击之后会重启软件，你会发现变成中文的了。

image.png

image.png

改变主题

在键盘上同时按下 Ctrl + K，紧接着再按一下 Ctrl + T；

  • 注意：先按 Ctrl + K，松开，再按 Ctrl + T。

屏幕顶部会立刻弹出一个主题选择下拉列表；

使用键盘的 ↑（上）  和 ↓（下）  方向键浏览不同的配色，按 回车（Enter）  即可应用；

你会实时看到编辑器里的颜色在变化。

image.png

推荐插件

插件名称核心用途
Prettier - Code formatter保存代码时自动格式化排版（统一代码风格）
GitLens可视化查看每行代码的修改人、修改时间（版本管理神器）
Live Server写前端网页时，右键 HTML 文件即可启动临时本地服务器，实时预览刷新效果

avatar
文章
阅读
粉丝