1.2 现代开发环境搭建

1.2 现代开发环境搭建（Node.js、npm、VS Code、ESLint）

现代 JavaScript 开发离不开强大的工具链支持。本节将指导你如何搭建一个高效的开发环境，包括安装 Node.js、npm、VS Code 编辑器以及配置 ESLint 代码检查工具。

1.2.1 安装 Node.js 和 npm

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它使 JavaScript 能够脱离浏览器运行在服务器端。npm（Node Package Manager）是 Node.js 的包管理工具，用于安装和管理第三方库。

步骤 1：下载并安装 Node.js

1. 访问 Node.js 官网。
2. 下载 LTS 版本（长期支持版），适合大多数用户。
3. 运行安装程序，按照提示完成安装。

步骤 2：验证安装
打开终端（Windows 用户可以使用 PowerShell 或 CMD，macOS/Linux 用户使用 Terminal），输入以下命令：

node -v
npm -v

如果显示版本号（如 v18.12.1），说明安装成功。

1.2.2 安装 VS Code 编辑器

VS Code 是一款轻量级但功能强大的代码编辑器，支持 JavaScript 开发的所有现代特性。

步骤 1：下载并安装 VS Code

1. 访问 VS Code 官网。
2. 下载适合你操作系统的版本。
3. 运行安装程序，按照提示完成安装。

步骤 2：安装常用扩展
VS Code 的强大之处在于其丰富的扩展生态系统。以下是一些推荐的扩展：

• ESLint：代码检查工具。
• Prettier：代码格式化工具。
• JavaScript (ES6) code snippets：提供 ES6 语法提示。
• Live Server：启动本地开发服务器，支持热更新。

安装方法：

1. 打开 VS Code，点击左侧扩展图标（或按 Ctrl+Shift+X）。
2. 搜索扩展名称，点击“安装”按钮。

1.2.3 配置 ESLint

ESLint 是一个静态代码分析工具，用于检查 JavaScript 代码中的错误和不规范的写法。它可以帮助你保持代码风格一致，并避免潜在的问题。

步骤 1：全局安装 ESLint
在终端中运行以下命令：

npm install -g eslint

步骤 2：初始化 ESLint 配置
在项目根目录下运行以下命令：

eslint --init

按照提示选择配置：

1. 选择代码风格（如 Airbnb、Standard 或自定义）。
2. 选择框架（如 React、Vue 或 None）。
3. 选择是否使用 TypeScript。
4. 选择运行环境（Browser、Node.js 或两者）。
5. 选择配置文件格式（如 JSON、YAML 或 JavaScript）。

完成后，会生成一个 .eslintrc 配置文件。

步骤 3：在 VS Code 中集成 ESLint

1. 打开 VS Code 的设置（Ctrl+,）。
2. 搜索 ESLint，确保以下选项已启用：
   • ESLint: Enable：勾选。
   • ESLint: Auto Fix On Save：勾选（保存时自动修复代码）。

1.2.4 创建第一个项目

步骤 1：初始化项目
在终端中运行以下命令：

mkdir my-first-project
cd my-first-project
npm init -y

这会生成一个 package.json 文件，用于管理项目依赖和脚本。

步骤 2：创建并运行 JavaScript 文件

1. 在项目根目录下创建 index.js 文件，并写入以下代码：

   console.log("Hello, JavaScript!");
   

2. 在终端中运行：

   node index.js
   

   如果输出 Hello, JavaScript!，说明运行成功。

1.2.5 使用 npm 安装依赖

npm 是 JavaScript 生态系统的核心工具，用于安装和管理第三方库。

示例：安装 Lodash 库

1. 在终端中运行：

   npm install lodash
   

2. 在 index.js 中使用 Lodash：

   const _ = require("lodash");
   console.log(_.chunk([1, 2, 3, 4], 2)); // 输出 [[1, 2], [3, 4]]
   

1.2.6 总结

通过本节的学习，你已经完成了现代 JavaScript 开发环境的搭建：

1. 安装了 Node.js 和 npm。
2. 配置了 VS Code 编辑器及其扩展。
3. 初始化了 ESLint 并集成到 VS Code 中。
4. 创建了第一个 JavaScript 项目并运行。

在接下来的章节中，我们将深入学习 JavaScript 的核心语法和特性。现在，你已经准备好开始编写现代化的 JavaScript 代码了！

思考题：

1. Node.js 和浏览器中的 JavaScript 有什么区别？
2. 为什么需要 ESLint？它如何帮助提高代码质量？
3. 如何通过 npm 安装一个特定版本的库？