还是老规矩，工欲善其事，必先利其器。来看看 JavaScript 开发环境的准备。

客户端的 JavaScript 的学习，只要有编辑器和浏览器就足够了，不需要安装其它。

代码编辑器 VSCode

依然沿用学习 HTML 和 CSS 时的编辑器 VSCode，如果还没有准备，参考 HTML 入门准备和 CSS 入门准备做相应准备。

在确保安装了 VSCode 之后，安装以下三个插件。

1. 安装必要的扩展：

   打开 VSCode，点击左侧的扩展图标。

   在搜索框中输入“JavaScript”，确保安装了以下推荐的扩展：

ESLint：用于代码检查和格式化。



Prettier - Code formatter：用于代码美化。



Live Server：前面已经用过，它用于实时预览网页文件。



2. 配置 VSCode，自动格式化代码：

打开 VSCode，点击左下角的齿轮图标，然后选择“Settings”。



在搜索框中输入“format on save”，勾选“Editor: Format On Save”选项，这样每次保存文件时，代码都会自动格式化。

浏览器开发者工具

JavaScript 的学习，搭配浏览器的开发工具，可以更好地调试和分析 JavaScript 代码。

1. 打开开发者工具：

• 在 Chrome 浏览器中，按下 F12 或 Ctrl+Shift+I（Windows）/Cmd+Option+I（Mac）打开开发者工具。

• 你会看到一个分为多个标签页的面板，常用的标签页包括“Elements”、“Console”、“Sources”、“Network”等。

2. 使用 Console 标签页：

• 在“Console”标签页中，你可以输入和执行 JavaScript 代码，查看输出结果。

• 例如，输入 console.log('Hello, world!'); 然后按下回车键，你会在控制台中看到输出的“Hello, world!”。

3. 调试 JavaScript 代码：

• 在“Sources”标签页中，你可以查看和调试页面中的 JavaScript 代码。

• 你可以在代码行号处点击，设置断点（breakpoint），然后刷新页面，当代码执行到断点处时，程序会暂停，你可以逐步执行代码，查看变量的值和执行流程。

目前只要熟悉以上这三个基本功能即可。

总结

• 🍑 客户端的 JavaScript 的学习，只要有编辑器和浏览器就足够了。

• 🍑 使用 VS Code 作为编辑器，并安装 ESLint、Prettier 和 Live Server 扩展。

• 🍑 使用 F12 打开浏览器的开发者工具，在 Console 里可以执行 JavaScript 代码。