【VSCode入门】Visual Studio Code是什么？从安装到基本设置的全面讲解

“我准备开始做网页或学编程，但该用哪个编辑器呢？”

大家好！就在几个月前，笔者也和大家一样，是个编程零基础的小白。但就是这样的我，现在也能借助AI的力量，独立开发出像buyonjapan.com和copicode.com这样的网站了。

要说最大的功臣，非本次介绍的编辑器“Visual Studio Code”（以下简称VSCode）莫属。

在这篇文章中，我将根据自己实际遇到的“坑”和“要是早知道就好了…”的经验，尽量不用专业术语，以一种教给当年还是初学者的自己的心态，从VSCode的安装到“这几项绝对要设置！”的初始化配置，进行彻底的解说。

只要读完这篇文章，你不仅能成功安装VSCode，更能获得一个舒适的开发环境，踏出享受“亲手编写代码并让它运行起来”的乐趣的第一步。

Visual Studio Code (VSCode) 究竟是什么？

VSCode是微软开发的一款免费的“文本编辑器”。所谓文本编辑器，顾名思义，就是用来编写和修改文本（文字）的软件。你可以把它理解为Windows“记事本”或Mac“文本编辑”的超级增强版。

市面上编辑器多如牛毛，为什么全世界的开发者都选择VSCode呢？我亲身体会到的优点主要有这3个：

免费但性能超强： 如此强大的功能竟然全部免费，说实话，这简直令人难以置信。可以看出微软是认真的。
运行流畅： 功能虽多，但启动和运行都非常轻快。即使在旧电脑上也能无压力使用，这一点非常棒。
可通过“扩展”打造专属工具： 这是VSCode最大的魅力所在。后文会详细解说，通过安装世界各地开发者制作的便利插件（扩展），你可以把它打造成只属于自己的最强开发利器。

还有一个名字很像的软件叫“Visual Studio”，但那是面向大型开发的“集成开发环境（IDE）”，是另一款软件，功能更复杂也更笨重。作为网页开发的入门，选择轻便易用的VSCode准没错。

【实践】开始安装VSCode吧

那么，我们立刻开始在你的电脑上安装VSCode吧。过程非常简单。

首先，请访问VSCode官网。

进入网站后，它会自动识别你的操作系统（Windows, Mac, Linux），并醒目地显示出最适合你的下载按钮。基本上只要点击那个按钮下载安装程序，然后按照屏幕上的指示操作即可。

※官网设计可能会有变动。

致 Windows 用户

运行下载好的 .exe 文件。安装过程中会出现几个复选框，如果没有特殊要求，建议勾选以下几项：

“添加到PATH(Add to PATH)”： 这个务必勾选。勾选后，将来就可以在命令提示符或终端里用 code 命令来启动VSCode，非常方便。
“将‘通过 Code 打开’操作添加到 Windows 资源管理器文件上下文菜单”
“将‘通过 Code 打开’操作添加到 Windows 资源管理器目录上下文菜单”

勾选后两项，当你右键点击文件或文件夹时，就会出现“通过 Code 打开”的选项。这个功能看似不起眼，却能实实在在地提升工作效率。

另外，如果你在使用较新的Windows 10/11，也可以用“winget”命令来安装。只需打开命令提示符或PowerShell，然后输入以下命令即可。

winget install Microsoft.VisualStudioCode

致 Mac 用户

解压下载的 .zip 文件后，会得到一个名为 Visual Studio Code.app 的文件。把它拖拽到“应用程序”文件夹里，安装就完成了。

对于Mac用户，同样推荐使用命令行工具“Homebrew”来安装。只需打开终端，执行以下命令即可。

brew install --cask visual-studio-code

致 Linux 用户

请从官网下载适合你的发行版（如Debian/Ubuntu系的 .deb 或Red Hat/Fedora/SUSE系的 .rpm）的软件包进行安装。许多发行版的软件中心也提供安装。

例如，在Ubuntu上，可以在终端使用以下命令：

sudo apt install code

【最重要】这些初始化设置必须完成

顺利安装完毕后，就到了关键的设置环节。这是最重要的一步。我精选了一些曾让我后悔“没早点这么做”的设置。只要完成这些，你的开发体验将发生翻天覆地的变化。

第一步：不管三七二十一，先汉化！

VSCode初始状态是英文的。虽然直接用也没问题，但错误信息和设置项都是英文，对初学者来说光是阅读就够累的了。我们先把它汉化，降低心理门槛吧。

点击左侧菜单栏中像四个小方块一样的图标（扩展视图）。
在顶部的搜索框中输入“chinese (simplified)”。
点击最上方出现的“Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code”的“Install”按钮。
安装完成后，右下角会弹出提示重启的消息，点击“Restart”即可。

仅需如此，VSCode的菜单就应该全部变成中文了。很简单吧！

第二步：打开设置文件 (`settings.json`)

VSCode的详细设置是通过写入一个名为 settings.json 的特殊文件来进行的。虽然也可以通过UI（图形界面）来设置，但习惯直接编辑这个文件，对日后管理和分享配置会非常方便。

打开 settings.json 最快的方式是使用快捷键。

Windows: Ctrl + Shift + P
Mac: Command + Shift + P

按下快捷键后，屏幕上方会出现一个叫“命令面板”的输入框。在里面输入“settings json”，然后选择“首选项: 打开用户设置 (JSON) (Preferences: Open User Settings (JSON))”。

随后，一个被 {} 包围的空文件（或已有一些内容的文件）就会打开。这就是你的 settings.json。接下来，我们把要介绍的设置复制粘贴进去吧。

第三步：复制粘贴最强初始设置！

久等了。这是我经过反复尝试后得出的“只要有这些就够了”的初始设置。请把下面的代码完整地复制粘贴到刚才打开的 settings.json 的 {} 里面。

（如果里面已经有内容，请在最后一个 } 前面加一个逗号 , 再粘贴。因为JSON格式要求每个设置项之间用逗号隔开。）

{
    // ----- 外观相关设置 -----
    "editor.fontFamily": "'UDEV Gothic NF', 'Source Han Code JP', 'Menlo', 'Monaco', 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.8,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",

    // ----- 文件操作相关设置 -----
    "files.autoSave": "onFocusChange",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,

    // ----- 编辑器行为相关设置 -----
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "breadcrumbs.enabled": true,

    // ----- 扩展“Prettier”相关设置 -----
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,

    // ----- 终端相关设置 -----
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "monospace"
}

设置项简单解说

没必要一次性全记住。大致浏览一下，知道“哦，原来还能这样”的程度就行了。

editor.fontFamily: 指定推荐的编程字体。易读的字体能提高代码可读性，也更容易发现bug。（可能需要另外安装字体）
editor.fontSize: 字体大小。可根据喜好调整。
editor.lineHeight: 行高。设置得宽一点，代码会更易读。
editor.wordWrap: 长代码行在屏幕右侧自动换行。这样就不用横向滚动了，必备设置。
files.autoSave: 当焦点从编辑的文件移开时自动保存。可以防止忘记按 Ctrl+S/Cmd+S。这个真的超方便！
files.insertFinalNewline, files.trim...: 保存时，在文件末尾自动插入空行，或自动删除行尾多余的空格。这些是保持代码整洁的设置。
editor.tabSize: 按下Tab键时输入的空格数。Web开发中，2个空格是主流。
editor.renderWhitespace: 将半角空格和制表符以符号形式显示出来。能立刻发现多余的空格或混入的全角空格等错误。
editor.minimap.enabled: 禁用右侧显示的代码缩略图（minimap）。让界面更清爽。
editor.bracketPairColorization.enabled: 为匹配的括号如 (), {}, [] 加上颜色。当嵌套结构很深时，能一目了然地看出括号的配对关系。
editor.defaultFormatter, editor.formatOnSave: 这个是神仙设置。它与后述的扩展“Prettier”联动，每次保存文件时，都会按照预设规则自动格式化整个代码。从此再也不用为代码缩进烦恼了。

【精选】这几个扩展一定要装

完成初始设置后，下一步是扩展。VSCode的真正价值就在于此。扩展多得让人眼花缭乱，但对于初学者来说，先装下面这3个就足够了。

和刚才汉化一样，在左侧的扩展视图中搜索名称并安装即可。

Prettier - Code formatter
就是刚才设置里提到的“代码格式化工具”。不装这个，formatOnSave 设置就不起作用。它能瞬间把HTML, CSS, JavaScript等多种语言的代码，按照行业标准的美观风格整理好。让你从“这个缩进用Tab还是空格？”“分号要不要加？”这类琐碎的烦恼中解放出来，专注于逻辑本身。
Live Server
这个扩展能给HTML/CSS编码带来革命性的变化。启用后，在你保存文件的一瞬间，浏览器中的显示就会自动刷新。无需再进行“修改代码→保存→切换到浏览器→点击刷新按钮”这种繁琐的操作。开发效率将得到极大提升，一定要装。
Material Icon Theme
这个不是功能性的，而是美化外观的扩展。它会根据文件类型（HTML, CSS, JS等），在资源管理器的文件名旁边显示漂亮的图标。文件类型一目了然，找起文件来也稍微轻松一点。还能帮助你保持好心情哦。

※因为在settings.json里设置了"workbench.iconTheme": "material-icon-theme"，所以只要安装了这个扩展，图标应该就会自动应用。

【体验】感受一下“代码跑起来”的乐趣！

辛苦了！现在你的VSCode已经拥有了让专业人士都羡慕的开发环境。最后，让我们用这个新环境来体验一下“代码跑起来”的感觉吧。

打开工作文件夹
首先，在桌面等方便的位置创建一个新文件夹，取个类似“vscode-test”的名字。然后，从VSCode的菜单选择“文件”→“打开文件夹...”，打开刚创建的文件夹。
创建文件
在左侧的资源管理器视图中，将鼠标悬停在文件夹名上，点击出现的“新建文件”图标，创建一个名为“index.html”的文件。
复制粘贴代码
将下面的代码复制粘贴到创建的 index.html 文件中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VSCode测试</title>
  <style>
    body {
      display: grid;
      place-content: center;
      min-height: 100vh;
      background-color: #282c34;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      color: #61dafb;
    }
  </style>
</head>
<body>

  <h1>你好，VSCode！</h1>
  <p>欢迎来到我的开发环境！</p>
  
</body>
</html>

启动 Live Server
在窗口右下角应该有一个“Go Live”的按钮。点击它。

怎么样？浏览器是不是自动启动，并显示了刚才创建的HTML页面！

再回到VSCode，试着把 h1 标签里的内容改成“Hello, World!”之类的，然后保存文件（Ctrl+S / Cmd+S）。不用切换到浏览器，页面内容是不是瞬间就变了？

这就是“Live Server”的力量，也是你所获得的新开发环境的力量。

总结：致拥有了最强武器的你

本次，我们一口气讲解了从VSCode的安装，到我由衷推荐的初始设置，再到“代码跑起来”的体验。

今天设置的内容，将成为你今后学习网页制作和编程的坚实基础。一开始可能觉得要记的东西很多很辛苦，但今天介绍的设置和扩展，全都是能将“繁琐的工作”自动化，帮助你专注于“思考”和“创造”的利器。

拥有了VSCode这个最强武器的你，已经不再是初学者了。你是一名“开发者”。请用这个舒适的环境，去编写大量的代码，创造出更多的东西吧！

下一步

编辑器准备就绪后，接下来就去熟悉VSCode的基本界面操作吧。了解如何高效地管理文件和文件夹，能让你的开发速度更上一层楼。

【VSCode用法】基本操作指南：文件管理、资源管理器、标签页的使用方法