JavaScript开发环境搭建指南

一、基础工具安装

1. 代码编辑器（任选其一）：

Visual Studio Code（推荐）：免费开源，支持智能提示和调试

bash

# 官网下载：https://code.visualstudio.com/

WebStorm：专业级IDE（付费）

Sublime Text：轻量级编辑器

2. Node.js 环境：

包含npm包管理器

下载LTS版本：https://nodejs.org/

验证安装：

bash

node -v # 显示版本号如 v18.x

npm -v # 显示版本号如 9.x

二、核心组件配置

1. 包管理器（二选一）：

bash

# npm（Node自带）

npm install

# yarn（更快速）

npm install -g yarn

yarn add

2. 模块化支持：

json

// package.json中添加

ypemodule // 启用ES6模块

三、浏览器环境

1. 现代浏览器：

Chrome（推荐）：内置DevTools

Firefox：优秀调试工具

必备扩展：React Developer Tools / Vue Devtools

2. 实时刷新工具：

bash

npm install -g live-server # 自动刷新

live-server # 启动服务

四、进阶工具链（可选）

1. 构建工具：

bash

# Vite（推荐）

npm create vite@latest my-project

# Webpack

npm install webpack webpack-cli --save-dev

2. 代码质量：

bash

# ESLint

npm install eslint --save-dev

npx eslint --init

# Prettier

npm install --save-dev prettier

五、调试配置（VS Code示例）

1. 创建`.vscode/launch.json`：

json

{

2.0n configurations [

{

n equestlaunchn

ameLaunch Chromen urlhttp://localhost:3000webRootworkspaceFolder}n ]

}

2. 按F5启动调试

六、验证环境

1. 创建`index.js`：

javascript

console.log(环境搭建成功！n const sum = (a, b) => a b;

console.log(sum(2, 3)); // 输出5

2. 执行：

bash

node index.js # 终端输出结果

> 最佳实践建议：

> 1. 使用版本控制：`git init` GitHub仓库

> 2. 设置`.gitignore`排除`node_modules`

> 3. 定期更新工具：`npm outdated -g`

> 4. 探索容器化：Docker保证环境一致性

此配置支持现代JavaScript开发（ES6 、TypeScript、框架开发），可根据项目需求增减组件。