前端开发环境搭建 - Node.js + VS Code + 必备插件

一套高效的前端开发环境能让你的编码效率翻倍。本文带你从零开始搭建一个完整的前端开发环境。

一、Node.js 安装与配置

1.1 安装 Node.js

访问 Node.js 官网 下载 LTS 版本（长期支持版）。

安装完成后验证：

1
2
node -v    # 查看 Node.js 版本
npm -v     # 查看 npm 版本

1.2 配置 npm

1
2
3
4
5
6
7
8
9
10
11
# 查看当前配置
npm config list

# 设置淘宝镜像（国内用户推荐）
npm config set registry https://registry.npmmirror.com

# 查看镜像是否设置成功
npm config get registry

# 恢复默认镜像
npm config set registry https://registry.npmjs.org

1.3 npm 常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 初始化项目
npm init              # 交互式
npm init -y           # 快速初始化

# 安装依赖
npm install <包名>         # 安装到 dependencies
npm install <包名> --save-dev   # 安装到 devDependencies
npm install -g <包名>      # 全局安装

# 卸载依赖
npm uninstall <包名>

# 更新依赖
npm update
npm outdated           # 查看可更新的包

# 运行脚本
npm run <脚本名>
npm start              # 等同于 npm run start

1.4 使用 nvm 管理 Node 版本（推荐）

1
2
3
4
5
6
7
8
9
# 安装 nvm-windows
# 下载地址: https://github.com/coreybutler/nvm-windows/releases

# 常用命令
nvm list                # 查看已安装版本
nvm list available      # 查看可安装版本
nvm install 18.0.0      # 安装指定版本
nvm use 18.0.0          # 切换版本
nvm uninstall 16.0.0    # 卸载版本

二、VS Code 安装与配置

2.1 安装

访问 VS Code 官网 下载安装。

2.2 基础设置

打开设置（Ctrl + ,），推荐以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.fontSize": 13,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme"
}

2.3 必备插件

插件 用途 安装量
Chinese (Simplified) 中文语言包 必装
Prettier 代码格式化 必装
ESLint 代码检查 必装
Material Icon Theme 文件图标美化 推荐
One Dark Pro 主题配色 推荐
GitLens Git 增强 推荐
Live Server 本地热更新 推荐
Auto Rename Tag 自动重命名标签 推荐
Path Intellisense 路径智能提示 推荐
Markdown All in One Markdown 增强 推荐
Code Spell Checker 拼写检查 推荐
Better Comments 注释高亮 推荐

2.4 快捷键速查

快捷键 功能
Ctrl + P 快速打开文件
Ctrl + Shift + P 命令面板
Ctrl + D 选中下一个相同词
Ctrl + Shift + L 选中所有相同词
Alt + ↑/↓ 移动当前行
Ctrl + / 注释/取消注释
Ctrl + B 切换侧边栏
Ctrl + `` 切换终端
Ctrl + Shift + K 删除当前行
Ctrl + Enter 下方插入空行

三、Git 集成

3.1 VS Code 内置 Git

VS Code 自带 Git 可视化操作：

  • Source Control 面板（Ctrl + Shift + G）：查看变更、暂存、提交
  • 状态栏：显示当前分支
  • 文件颜色：绿色=新增、黄色=修改、红色=删除

3.2 推荐 Git 配置

1
2
3
git config --global core.autocrlf input
git config --global pull.rebase true
git config --global init.defaultBranch main

四、终端美化

4.1 Windows Terminal

推荐安装 Windows Terminal，支持多标签、分屏、自定义主题。

4.2 Oh My Posh（PowerShell 美化）

1
2
3
4
5
6
7
8
# 安装 Oh My Posh
winget install JanDeDobbeleer.OhMyPosh

# 启用主题
oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\jandedobbeleer.omp.json" | Invoke-Expression

# 添加到 PowerShell 配置文件
notepad $PROFILE

五、高效工作流

5.1 项目结构建议

1
2
3
4
5
6
7
8
9
10
11
12
13
14
project/
├── src/              # 源代码
│   ├── components/   # 组件
│   ├── pages/        # 页面
│   ├── utils/        # 工具函数
│   └── styles/       # 样式
├── public/           # 静态资源
├── tests/            # 测试文件
├── docs/             # 文档
├── package.json      # 依赖配置
├── .gitignore        # Git 忽略
├── .eslintrc.js      # ESLint 配置
├── .prettierrc       # Prettier 配置
└── README.md         # 项目说明

5.2 常用配置文件

.prettierrc

1
2
3
4
5
6
7
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

.gitignore

1
2
3
4
5
node_modules/
dist/
.env
.DS_Store
*.log

总结

搭建开发环境是一次性投入，但能带来持续的效率提升。建议：

  1. 花时间配置好：磨刀不误砍柴工
  2. 保持工具更新：享受新功能和修复
  3. 形成自己的习惯：适合自己的才是最好的

工欲善其事，必先利其器