用VSCode搭建前端(Web)开发环境
1. 本文目标
本文旨在介绍如何使用 VSCode 搭建一套高效、跨平台的前端开发环境，涵盖常用插件、配置、快捷键等内容，帮助前端开发者提升开发效率。
2. 准备工作
从官网下载并安装 VSCode：https://code.visualstudio.com/
3. 安装 Node.js 和 npm
3.1. Windows
- 访问 Node.js 官网
- 下载 LTS（长期支持）版本的安装包
- 运行安装程序，按照向导完成安装
- 安装完成后会自动包含 npm
3.2. Linux(Ubuntu)
# 更新系统包
sudo apt update
sudo apt upgrade -y
# 安装 Node.js 和 npm
sudo apt install nodejs
3.3. macOS
# 安装 Homebrew（如果尚未安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 安装 Node.js
brew install node
3.4. 验证是否安装成功
安装完成后，在终端中执行以下命令验证是否安装成功：
node -v
npm -v
4. 安装插件
VSCode 的强大之处在于其丰富的插件生态。以下是前端开发中常用的插件推荐：
| 插件名称 | 发布者 | 功能介绍 |
|---|---|---|
| Prettier - Code formatter | Prettier | 代码格式化工具，Prettier支持的语言： - JavaScript、TypeScript、Flow、JSX、JSON - CSS、SCSS、Less - HTML、Vue、Angular HANDLEBARS、Ember、Glimmer - Markdown、MDX、YAML、GraphQL |
| ESLint | Microsoft | JSX语法检查: 检查 React 组件的语法错误、未定义的变量等。 自动修复: 自动修复一些常见的代码问题。 自定义规则: 支持团队自定义代码规范。 |
| MDX | unified | 语法高亮: 为.mdx文件提供精确的语法高亮，能正确区分 Markdown 部分和 JSX 部分。语法检查: 集成了 remark-lint 和 eslint，可以检查 Markdown 和 JSX 的语法错误（需要额外配置）。 代码折叠: 支持对 JSX 块和 Markdown 章节进行代码折叠。 自动补全: 提供基本的自动补全功能。 |
| Live Server (Five Server) | Yannick | Five Server的升级版，支持热重载、本地服务器、默认浏览器打开等功能。 |
| Auto Rename Tag | Jun Han | 自动重命名配对的 HTML 标签 |
| Auto Close Tag | Jun Han | 自动闭合 HTML 标签 |
| JavaScript (ES6) code snippets | charlampos karypidis | 提供 ES6 语法代码片段 |
| TypeScript Importer | pmneo | 自动导入 TypeScript 模块 |
| Thunder Client | Ranga Vadivel | 轻量级 REST API 客户端，替代 Postman |
| TODO Highlight | Jonathan Clark | 高亮 TODO、FIXME 等注释 |
更多编程开发通用的插件(如GitLens、TODO Highlight等)，可参考《VSCode通用插件》
5. 插件的用法
5.1. ESLint
5.1.1. 插件介绍
ESLint 是 JavaScript/TypeScript 最常用的代码检查工具，可以捕捉语法错误、代码风格问题，并支持自动修复。
5.1.2. 插件配置
在项目根目录下创建 .eslintrc.js 或 .eslintrc.json 文件，配置规则。示例：
{
"extends": ["eslint:recommended"],
"rules": {
"no-unused-vars": "warn",
"no-console": "off"
}
}
在 VSCode 的 settings.json 中启用自动修复：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
5.2. Prettier
5.2.1. 插件介绍
Prettier 是代码格式化工具，支持 JavaScript、TypeScript、HTML、CSS、JSON 等。
5.2.2. 插件配置
在项目根目录创建 .prettierrc 文件：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
在 settings.json 中设置默认格式化工具：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
5.3. Live Server
5.3.1. 插件介绍
Live Server 可以快速启动一个本地服务器，并支持文件修改后自动刷新浏览器。
5.3.2. 使用方式
在 HTML 文件上右键选择 Open with Live Server，或点击底部状态栏的 Go Live 按钮。
5.4. Auto Rename Tag 和 Auto Close Tag
这两个插件可以大幅提升 HTML/JSX 编写效率，自动闭合和同步重命名标签，无需额外配置。
6. 前端开发常用快捷键
| Windows/Linux | macOS | 功能描述 |
|---|---|---|
| Ctrl + ` | Cmd + ` | 打开/关闭终端 |
| Ctrl + Shift + P | Cmd + Shift + P | 打开命令面板 |
| Ctrl + D | Cmd + D | 选中下一个相同词 |
| Alt + Click | Option + Click | 多光标编辑 |
| F12 | Fn + F12 | 跳转到定义 |
| Ctrl + / | Cmd + / | 注释/取消注释 |