2、开发环境搭建：Node.js与npm安装、VS Code配置、Git版本管理初始化

说实话，很多初学者容易忽略环境搭建这一步。觉得不就是装个软件嘛，有什么好讲的？

但我见过太多人，因为环境没配好，卡在一个小问题上浪费半天。我自己刚入行那会儿，就因为在Windows上装Node.js时没注意路径问题，折腾了整整一个下午。嗯，从那以后，我对环境搭建就格外上心。

2.1 Node.js 与 npm 安装

我们的规范检查工具，底层依赖Node.js运行环境。说白了，它就是让JavaScript能在服务器端跑起来的那个东西。

2.1.1 下载与安装

去官网下载LTS版本就行。我个人习惯用LTS，稳定，不容易踩坑。

• Windows用户：下载.msi安装包，一路Next。注意勾选「Add to PATH」
• macOS用户：建议用Homebrew安装，命令是 brew install node
• Linux用户：用包管理器，比如Ubuntu用 sudo apt install nodejs npm

2.1.2 验证安装

装完之后，打开终端，敲两行命令验证一下：

node -v
npm -v

能看到版本号，就说明装好了。我一般习惯看到类似 v18.17.0 这样的输出才放心。

2.1.3 npm 镜像配置

为什么要配镜像？因为npm默认的源在国外，下载速度慢得让人抓狂。你想想看，一个项目装依赖要等十分钟，谁受得了？

我建议用淘宝镜像：

npm config set registry https://registry.npmmirror.com

或者用nrm管理多个源，切换起来更方便：

npm install -g nrm
nrm use taobao

2.2 VS Code 配置

编辑器我推荐VS Code，免费、轻量、插件生态丰富。做前端开发，它基本是标配了。

2.2.1 必装插件

这些插件是我做规范检查工具开发时一定会装的：

插件名称	用途	推荐理由
ESLint	代码规范检查	和我们的工具一脉相承
Prettier	代码格式化	团队协作必备，统一风格
GitLens	Git增强	看代码历史变更很方便
Path Intellisense	路径自动补全	写import时省心省力

2.2.2 用户设置

我个人习惯把下面这些配置加到 settings.json 里：

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "onFocusChange",
  "workbench.colorTheme": "One Dark Pro"
}

这里有个细节要注意：formatOnSave 设为 true 后，每次保存都会自动格式化代码。配合ESLint一起用，能保证你写的每一行代码都符合规范。

2.3 Git 版本管理初始化

做项目不用Git？那简直是裸奔。我见过有人写代码从来不提交，结果改了一周发现方向错了，想回退都回不去...那叫一个惨。

2.3.1 全局配置

装好Git后，先配一下用户名和邮箱：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

这个信息会记录在每次提交里。团队协作时，一看就知道是谁改的代码。

2.3.2 初始化项目仓库

进入项目目录，执行：

git init

这时候项目里会多出一个 .git 文件夹。别删它，那是Git的心脏。

2.3.3 创建 .gitignore 文件

有些文件不该被提交到仓库里，比如 node_modules、.env 等。我建议一开始就写好 .gitignore：

node_modules/
dist/
.env
*.log
.DS_Store

2.3.4 第一次提交

来，做第一次提交：

git add .
git commit -m "feat: 初始化项目结构"

提交信息我习惯用「约定式提交」的格式，比如 feat: 表示新功能，fix: 表示修bug。这样看日志时一目了然。

2.4 本章知识体系

下面这张图，把整个开发环境搭建的核心逻辑串起来了：

你看，这三个环节是环环相扣的。Node.js提供运行环境，VS Code提供开发体验，Git保证代码可追溯。少了哪一个，后面的开发都会磕磕绊绊。

好了，环境搭好了，下一章我们就可以正式开始写规范检查工具的核心代码了。

---

公众号:蓝海资料掘金营，微信deep3321