Visual Studio Code (VS Code) |下载与前端开发环境配置(带图详细）

前言：

本篇教程将在10 分钟左右配置一个专为 Vue 3 + TipTap 项目优化的开发环境。

如果需要偏后端的，推荐这篇来自巴巴巴林特的《VS Code安装与配置》，接下来略微介绍下区别，看过再决定方式也不迟。
https://blog.csdn.net/weixin_47951693/article/details/127410136?fromshare=blogdetail&sharetype=blogdetail&sharerId=127410136&sharerefer=PC&sharesource=Ama_tor&sharefrom=from_linkhttps://blog.csdn.net/weixin_47951693/article/details/127410136?fromshare=blogdetail&sharetype=blogdetail&sharerId=127410136&sharerefer=PC&sharesource=Ama_tor&sharefrom=from_link

对比维度	Web 前端方向（本篇）	C/C++ 方向（超链接的文章）
目标语言	JavaScript / TypeScript (Vue 3)	C / C++
应用场景	制作网页、微信公众号编辑器、小程序、React/Vue 应用	制作操作系统、游戏引擎、高性能计算、单片机程序、LeetCode 刷题
核心依赖	Node.js (运行环境) + npm (包管理器)	MinGW / GCC (编译器) + GDB (调试器)
VS Code 角色	代码编辑器 + 终端运行器 (JS 由 Node 直接运行)	代码编辑器 + 配置复杂的编译任务 (C 代码需编译成 .exe 才能跑)
关键配置文件	`package.json` (管理依赖), `vite.config.js`	`.vscode/c_cpp_properties.json`, `tasks.json`, `launch.json`
配置难度	⭐⭐ (简单，主要是装插件和 npm install)	⭐⭐⭐⭐ (困难，需配环境变量、编译器路径、构建任务、调试器)
产出物	可以在浏览器运行的网页代码	`.exe` 可执行文件 (Windows 程序)

1. 运行机制不同

C/C++ (文章中的内容)：
- C/C++ 是编译型语言。你写的代码人类能看懂，但电脑看不懂。
- 必须通过 编译器 (GCC) 把代码"翻译"成机器能执行的 .exe 文件。
- VS Code 本身不会编译 C 代码，所以C++那篇文章花了大量篇幅教你怎么配置 tasks.json 告诉 VS Code："嘿，去调用那个 gcc.exe 文件来编译我的代码"。
- 痛点：配置环境变量、路径错误、中文乱码、不同电脑环境不一致。
JavaScript/Vue (我提供的教程)：
- JavaScript 是解释型/即时编译语言。
- 它依赖 Node.js 环境。Node.js 安装好后，本身就包含了运行 JS 的能力。
- 现代前端工具链 (如 Vite) 已经帮你把编译、打包、热更新全部自动化了。
- 优势：你只需要运行 npm run dev，剩下的全是自动的，不需要手动配置编译器路径。

2. 配置文件的不同

C++文章中的 .vscode 文件夹：
- c_cpp_properties.json: 告诉编辑器 C 语言的标准和编译器在哪。
- tasks.json: 定义"构建"命令（即调用 gcc 编译）。
- launch.json: 定义"调试"命令（即启动 gdb 调试器）。
- 这是 C/C++ 开发特有的痛苦来源，每个新项目可能都要配一遍。
前端项目中的配置：
- 通常不需要手动写 .vscode 里的复杂配置。
- 核心是 package.json，里面定义了项目依赖和脚本命令。
- 插件 (Volar, Prettier) 会自动处理大部分智能提示和格式化工作。

3.通俗总结：

C/C++那篇文章是给造轮子的人 （写底层系统）看的教程；
本篇是给造车的人 （写 Web 应用）看的教程。
您要造车，请跟我走！ 🚗💨

正文：

📥 第一步：下载与安装

1. 访问官网

打开浏览器，访问 VS Code 官方下载页：

👉 https://code.visualstudio.com/
(网站会自动识别您的操作系统，推荐下载"稳定版")

2. 安装 (分系统操作)

💻 Windows 用户:
1. 下载 .exe 安装包并运行。
2. 关键步骤 ：在安装向导中，当看到 "其他任务" 页面时，务必勾选 以下两项：
  - ✅ 将"通过 Code 打开"操作添加到文件资源管理器上下文菜单
  - ✅ 将"通过 Code 打开"操作添加到目录上下文菜单
  - (可选但推荐) ✅ 添加到 PATH
3. 点击"下一步"直到完成安装。
🍎 macOS 用户:
1. 下载 .zip 文件，解压后将 Visual Studio Code.app 拖入 应用程序 (Applications) 文件夹。
2. 打开 VS Code，按 Cmd + Shift + P，输入 shell command，选择 Install 'code' command in PATH。
3. 这会让您能在终端直接用 code . 命令打开项目。
🐧 Linux 用户:
- 推荐使用包管理器安装 (如 sudo snap install code --classic 或 sudo apt install code)。

🧩 第二步：安装核心插件 (至关重要)

VS Code 的强大在于插件。对于您的 Vue 3 + Tailwind 项目，以下 5 个插件是必装的。

打开 VS Code。
点击左侧侧边栏的 扩展图标 (四个方块组成的图标，或按 Ctrl+Shift+X / Cmd+Shift+X)。
在搜索框依次搜索以下名称，点击 安装 (Install)：

插件名称	作者	作用	必装指数
Volar	Vue.js	Vue 3 的核心。提供代码高亮、智能提示、错误检查。(注意：如果安装了旧的 Vetur，请禁用或卸载它，不要同时使用)	⭐⭐⭐⭐⭐
Prettier - Code formatter	Prettier	代码自动美化。保存文件时自动对齐代码、处理引号和分号。	⭐⭐⭐⭐⭐
Tailwind CSS IntelliSense	Brad Cornes	Tailwind 神器。写 `class="text-"` 时自动弹出颜色、大小列表，无需查文档。	⭐⭐⭐⭐⭐
ESLint	Microsoft	代码质检。发现潜在的错误写法（如未使用的变量）。	⭐⭐⭐⭐
Material Icon Theme	Philipp Kief	美化图标。让文件和文件夹的图标更直观好看 (可选，但推荐)。	⭐⭐⭐

⚙️ 第三步：关键配置 (让编辑器更听话)

为了让开发体验丝滑，我们需要修改两个设置：默认格式化程序 和 保存时自动格式化。

打开设置：
- Windows/Linux: Ctrl + ,
- macOS: Cmd + ,
- 或者点击左下角齿轮图标 ⚙️ -> 设置 (Settings)。
在搜索框输入 format，找到以下选项并修改：
- Default Formatter : 选择 Prettier - Code formatter。
- Format On Save : 勾选 ✅ (这样每次按 Ctrl+S 保存时，代码会自动变整齐)。
在搜索框输入 vue，确保以下设置正确 (通常 Volar 会自动配置，但检查一下更好)：
- 搜索 vue.languageFeatures.format，确保它是启用的。
(可选) 修改字体：
- 搜索 font family。
- 如果您喜欢编程字体，可以改为 'Fira Code', 'Consolas', 'Courier New', monospace。
- (进阶：去下载 "Fira Code" 字体安装后，开启 "Font Ligatures" 可以让 => 显示为箭头等漂亮符号)。

🚀 第四步：验证环境 (创建第一个测试项目)

让我们用刚才配置好的环境，快速创建一个空的 Vue 项目来测试是否成功。

打开终端：
- 在 VS Code 顶部菜单栏点击 终端 (Terminal) -> 新建终端 (New Terminal)。
- 或者直接按 ``Ctrl + ``` (反引号键)。
创建项目 (复制粘贴以下命令并回车)：
复制代码
```
npm create vite@latest test-editor -- --template vue
```
(如果提示确认，输入 y 并回车)
进入目录并安装依赖：
复制代码
```
cd test-editor
npm install
```
安装我们需要的额外库 (模拟您的真实项目)tailwind选择版本3，因为v4 移除了 CLI 可执行文件：
复制代码
```
npm install @tiptap/vue-3 @tiptap/starter-kit tailwindcss@3 postcss autoprefixer
```
初始化 Tailwind (生成配置文件)：
复制代码
```
npx tailwindcss init -p
```
启动项目：
复制代码
```
npm run dev
```
查看效果：
- 终端会显示一个地址，通常是 http://localhost:5173/。
- 按住 Ctrl (Mac 上是 Cmd) 点击该链接，浏览器会自动打开。
- 如果您看到了一个带有计数器的网页，且代码没有报错，恭喜！您的环境配置完美成功！

💡 给新手的常用快捷键速查表

功能	Windows / Linux	macOS
打开命令面板 (搜任何东西)	`Ctrl + Shift + P`	`Cmd + Shift + P`
快速打开文件	`Ctrl + P`	`Cmd + P`
保存文件	`Ctrl + S`	`Cmd + S`
格式化当前文件	`Shift + Alt + F`	`Shift + Option + F`
显示/隐藏侧边栏	`Ctrl + B`	`Cmd + B`
打开终端	``Ctrl + ```	``Ctrl + ```
多光标编辑 (神器)	`Alt + Click`	`Option + Click`