還是老規(guī)矩，工欲善其事，必先利其器。來看看 JavaScript 開發(fā)環(huán)境的準(zhǔn)備。

客戶端的 JavaScript 的學(xué)習(xí)，只要有編輯器和瀏覽器就足夠了，不需要安裝其它。

代碼編輯器 VSCode

依然沿用學(xué)習(xí) HTML 和 CSS 時的編輯器 VSCode，如果還沒有準(zhǔn)備，參考 HTML 入門準(zhǔn)備和 CSS 入門準(zhǔn)備做相應(yīng)準(zhǔn)備。

在確保安裝了 VSCode 之后，安裝以下三個插件。

1. 安裝必要的擴(kuò)展：

   打開 VSCode，點擊左側(cè)的擴(kuò)展圖標(biāo)。

   在搜索框中輸入“JavaScript”，確保安裝了以下推薦的擴(kuò)展：

ESLint：用于代碼檢查和格式化。



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



Live Server：前面已經(jīng)用過，它用于實時預(yù)覽網(wǎng)頁文件。



2. 配置 VSCode，自動格式化代碼：

打開 VSCode，點擊左下角的齒輪圖標(biāo)，然后選擇“Settings”。



在搜索框中輸入“format on save”，勾選“Editor: Format On Save”選項，這樣每次保存文件時，代碼都會自動格式化。

瀏覽器開發(fā)者工具

JavaScript 的學(xué)習(xí)，搭配瀏覽器的開發(fā)工具，可以更好地調(diào)試和分析 JavaScript 代碼。

1. 打開開發(fā)者工具：

• 在 Chrome 瀏覽器中，按下 F12 或 Ctrl+Shift+I（Windows）/Cmd+Option+I（Mac）打開開發(fā)者工具。

• 你會看到一個分為多個標(biāo)簽頁的面板，常用的標(biāo)簽頁包括“Elements”、“Console”、“Sources”、“Network”等。

2. 使用 Console 標(biāo)簽頁：

• 在“Console”標(biāo)簽頁中，你可以輸入和執(zhí)行 JavaScript 代碼，查看輸出結(jié)果。

• 例如，輸入 console.log('Hello, world!'); 然后按下回車鍵，你會在控制臺中看到輸出的“Hello, world!”。

3. 調(diào)試 JavaScript 代碼：

• 在“Sources”標(biāo)簽頁中，你可以查看和調(diào)試頁面中的 JavaScript 代碼。

• 你可以在代碼行號處點擊，設(shè)置斷點（breakpoint），然后刷新頁面，當(dāng)代碼執(zhí)行到斷點處時，程序會暫停，你可以逐步執(zhí)行代碼，查看變量的值和執(zhí)行流程。

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

總結(jié)

• ?? 客戶端的 JavaScript 的學(xué)習(xí)，只要有編輯器和瀏覽器就足夠了。

• ?? 使用 VS Code 作為編輯器，并安裝 ESLint、Prettier 和 Live Server 擴(kuò)展。

• ?? 使用 F12 打開瀏覽器的開發(fā)者工具，在 Console 里可以執(zhí)行 JavaScript 代碼。