1.2.2 代碼編輯器

“工欲善其事，必先利其器。”一款優秀的代碼編輯器能夠極大地提高程序的開發效率。常見的JavaScript代碼編輯器有Visual Studio Code、Sublime Text、HBuilder等。本書選擇基于Visual Studio Code代碼編輯器進行講解。

Visual Studio Code（簡稱VS Code）是由微軟公司推出的一款免費、開源的代碼編輯器。Visual Studio Code代碼編輯器具有如下特點。

● 輕巧快速，占用系統資源較少。

● 具備代碼智能補全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。

● 跨平臺，可用于Windows、Linux和macOS操作系統。

● 主題界面設計人性化。例如，可以快速查找文件、分屏顯示代碼、自定義主題顏色、快速查看最近打開的項目文件，以及查看項目文件結構等。

● 提供豐富的擴展，用戶可以根據需要自行下載和安裝擴展，以增強代碼編輯器的功能。

下面將講解如何下載和安裝Visual Studio Code代碼編輯器、如何安裝中文語言擴展、如何安裝Live Server擴展以及如何創建項目文件夾。

1．下載和安裝Visual Studio Code代碼編輯器

打開瀏覽器并訪問Visual Studio Code官方網站，如圖1-4所示。

在圖1-4所示的頁面中，單擊“Download for Windows”按鈕可以下載Windows操作系統的Visual Studio Code安裝包。如需下載其他操作系統的Visual Studio Code安裝包，單擊“”按鈕，即可看到其他操作系統版本的下載選項，如圖1-5所示。

Visual Studio Code安裝包下載成功后，在下載目錄中找到該安裝包，雙擊啟動安裝程序，按照程序的安裝向導提示操作，直到安裝完成。

Visual Studio Code安裝成功后，啟動該編輯器，即可進入Visual Studio Code初始界面，如圖1-6所示。

由圖1-6可知，Visual Studio Code初始界面默認顯示的語言是英文，如果要切換為中文，需要安裝中文語言擴展。

2．安裝中文語言擴展

為了提高Visual Studio Code代碼編輯器的易用性，使其界面和提示信息顯示為中文，需要安裝中文語言擴展。單擊Visual Studio Code初始界面左側的第5個按鈕“”進入擴展界面，在該界面的搜索框中輸入關鍵詞“Chinese”找到中文語言擴展，單擊“Install”按鈕進行安裝即可。安裝中文語言擴展界面如圖1-7所示。

需要說明的是，中文語言擴展安裝成功后，需要重新啟動Visual Studio Code代碼編輯器，該擴展才會生效。

3．安裝Live Server擴展

Live Server 擴展用于搭建具有實時重新加載功能的本地服務器，可以實現保存代碼后瀏覽器自動同步刷新，即時查看網頁效果。單擊Visual Studio Code初始界面左側的第5個圖標按鈕“”進入擴展界面，在該界面的搜索框中輸入關鍵詞“Live Server”找到Live Server擴展，單擊“安裝”按鈕進行安裝即可。安裝Live Server擴展界面如圖1-8所示。

安裝 Live Server 擴展后，可在編寫好的網頁文件中右擊，在彈出的快捷菜單中選擇“Open with Live Server”調用瀏覽器打開網頁文件。

4．創建項目文件夾

在開發項目時，需要創建項目文件夾，以保存項目所需的文件。下面在本地創建一個文件夾Chapter01，創建好文件夾后，首先在Visual Studio Code代碼編輯器的菜單欄中單擊“文件”，然后單擊“打開文件夾．..”并選擇Chapter01文件夾。打開文件夾后的界面如圖1-9所示。

在圖1-9中，可以進行新建文件、打開文件夾等操作。