程式碼編輯器

有哪些可用的程式碼編輯器？

在開始編碼之前，你可能已經有在 Microsoft Word 等程式中處理文字文件的經驗。你可能還會想知道是否可以在這些相同的程式中處理程式碼。不幸的是，答案是“不完全可以”。

• 像 Microsoft Word 這樣的程式是 二進位制檔案 編輯器；它們的檔案包含只能由這些程式理解的非文字格式。另一方面，網站原始碼則以純文字形式儲存。
• Word 可以 開啟和編輯純文字檔案，但它處理得不好。它沒有為處理程式碼而設計的功能集——它是用於編寫信件和報告等文件的。你需要一個專門設計用於乾淨地處理和輸出純文字，並處理程式碼的程式。

你的計算機上可能已經有一個純文字編輯器。預設情況下，Windows 包含 記事本，macOS 附帶 文字編輯。Linux 發行版各不相同；Ubuntu 22.04 LTS 版本預設附帶 GNOME 文字編輯器。預設的作業系統純文字編輯器還算可以，但它們的功能集也有限。

你最好使用功能齊全的程式碼編輯器，例如 Visual Studio Code（多平臺，免費）、Sublime Text（多平臺，不免費）或 Notepad++（Windows，免費）。

我們推薦 Visual Studio Code (VS Code)，因為它是我們主要使用的編輯器。如果你還沒有安裝 VS Code（或其他程式碼編輯器），你應該 在繼續之前安裝它。

基本程式碼編輯器功能

在本節中，我們將介紹你在程式碼編輯器中會發現的一些最重要的功能，並說明它們如何幫助你進行編碼工作。

開啟和編輯檔案

這似乎是顯而易見的一點，但安裝程式碼編輯器非常有用，因為它會為你提供一個應用程式，可以開啟你在開發工作中可能需要使用的所有程式碼檔案。沒有什麼比在計算機上雙擊一個檔案，結果它卻在一個隨機的、不相關的應用程式中開啟，或者作業系統告訴你它無法識別該檔案更令人煩惱的了。

當你安裝 VS Code 時，這一切都應該自動發生，但如果你仍然遇到某些檔案型別的問題，你可以手動設定它們透過該應用程式開啟。這可能會因你的作業系統而異，所以要找出答案，請訪問你喜歡的搜尋引擎並搜尋“選擇什麼應用程式開啟檔案型別 ”——例如，如果你使用的是 Windows 11，則搜尋“選擇什麼應用程式開啟檔案型別 windows 11”。

你可以在下一篇文章中找到更多關於開啟和編輯檔案及資料夾的資訊。

語法高亮

像 VS Code 這樣的程式碼編輯器提供了語法高亮——也就是說，識別出的程式碼特性會以不同的顏色顯示不同的部分。這使得程式碼比全部一種顏色更容易閱讀。讓我們以以下 JavaScript 函式為例：

function createGreeting(name) {
  const greeting = `Hello, ${name}!`;
  return greeting;
}

你現在不需要理解這段程式碼在做什麼，但你已經可以看到上面的語法高亮是什麼樣子的。是的，MDN 也提供了語法高亮！

我們來在 VS Code 中進行一次練習。

1. 將上面的程式碼示例複製到剪貼簿（MDN 程式碼塊的右上角有一個複製圖示，你可以點選它來完成此操作）。
2. 開啟 VS Code 並選擇 檔案 > 新建檔案... 來建立一個新檔案。
3. 在新檔案中，點選 選擇語言 文字，然後從開啟的下拉選單中選擇 JavaScript。
4. 將程式碼貼上到新檔案中，看看 VS Code 的 JavaScript 語法高亮效果如何。

VS Code 也提供了其他語法特性。例如：

• 你會看到一條細細的垂直線從 `function` 關鍵字一直延伸到結束的大括號（`}`）——這些線用於標記程式碼中不同的 縮排 級別，從而更容易識別程式碼塊的開始和結束位置。
• 還可以嘗試將閃爍的文字游標移到左大括號（`{`）或右大括號（`}`）上——你會看到兩者都被高亮顯示。這也有助於識別程式碼塊的開始和結束，當你有一個包含許多巢狀塊的更復雜的結構時，這有助於你找到缺少字元的位置。這種高亮也適用於其他分隔符，如圓括號（`(` 和 `)`）和方括號（`[` 和 `]`）。

程式碼補全/建議

當你將程式碼輸入到程式碼編輯器中時，它通常能夠建議你接下來應該輸入什麼，併為你填寫一些樣板程式碼（這意味著始終相同的標準程式碼）。

現在在 VS Code 中試試這個

1. 回到你在上一節建立的 JavaScript 檔案。

2. 將游標移到檔案底部，按幾下 Enter/Return 鍵，確保你在一新行上。

3. 開始輸入“function”——文字右側應該會出現一個選項列表。

4. 選擇右側寫有 Function Statement 的 function 選項。它將為你填寫以下程式碼：

   js

   function name(params) {
   
   }
   

5. 點選函式內部，在兩個花括號之間的空白行。開始輸入“document”，你將再次獲得一個選項列表。選擇第一個。這是對 `Document` 物件的引用（同樣，現在不用擔心這表示什麼）。

6. 在 `document` 之後，輸入一個點（`.`）——你將再次獲得一個選項列表，這次包含 `document` 物件上所有可用的屬性和方法！

現在就到這裡。我們繼續吧。

除錯幫助

程式碼編輯器無法自動修復你所有的程式碼問題，但它們無疑可以幫助你找到打字錯誤和其他簡單的錯誤。讓我們看幾個例子。

1. 回到你的 JavaScript 檔案，刪除當前所有程式碼。替換為以下內容：

   js

   function createGreeting(name) {
     const greeting = `Hello, ${Name}!`;
     return greeting;
   }
   
   const helloChris = createGreeting("Chris);
   
   console.log(helloChris;
   

2. 上述程式碼列表右側的小叉圖示是 MDN 表示錯誤程式碼示例的方式，而且非常正確——上述程式碼中有三個錯誤！看看 VS Code 的高亮顯示，看看你是否能發現它是如何高亮顯示錯誤的，然後我們將一起解決它們。

3. 第一個錯誤是我們在第一行使用了 `name`，但在第二行使用了 `Name` 來指代同一個變數。這是一個問題，因為 JavaScript 區分大小寫，因此將它們視為兩個不同的名稱。VS Code 以兩種不同的方式高亮顯示了這一點——將 `name` 塗成深灰色，表示該值已宣告但從未使用過（這通常是你在某個地方打錯字的好跡象），並在 `Name` 下方放置了三個點，表示它為你提供瞭如何改進程式碼的建議（在這種情況下是詢問你是否想寫 `name`）。要修復此錯誤，請將 `Name` 更改為 `name`。

   注意： 你可以將滑鼠指標懸停在每個指示的高亮處以獲取更多資訊。

4. 第二個錯誤在第六行，我們寫了 ` "Chris`。在 JavaScript 中，一段文字（稱為 字串）必須用兩個引號括起來，但第二個引號丟失了。VS Code 透過在首次發現錯誤的地方（可能不是錯誤實際發生的確切位置）用紅色波浪線標記文字來突出顯示這一點，就像 Microsoft Word 中用於突出顯示拼寫錯誤的那樣。要修復此錯誤，請將 ` "Chris` 更新為 ` "Chris"`。

5. 在最後一行，即使我們已經修復了之前的錯誤，末尾附近仍然有一小段紅色波浪下劃線。這是因為第三個錯誤——在 JavaScript 中，一個左括號總是需要一個配套的右括號。透過將 `(helloChris` 更新為 `(helloChris)` 來修復此問題。

搜尋和替換

每個有價值的程式碼編輯器都具有強大的搜尋和替換功能。例如，如果你發現某個特定函式中出現錯誤並想在程式碼中找到它，或者你決定更改變數名稱並需要確保在所有引用它的地方都進行更改，此功能都非常有用。

如果你以前使用過電腦，搜尋和替換的概念對你來說應該很熟悉，但為了完整起見，我們還是快速探索一下。

1. 回到 VS Code 中的 JavaScript 檔案，透過選擇選單中的 編輯 > 查詢，以查詢模式開啟查詢和替換面板。
2. 在 查詢 框中輸入 `createGreeting` — 你會看到這兩個例項都被高亮顯示，並且你可以使用面板中的上下箭頭在它們之間移動。當前活動高亮的例項具有更亮的亮色。
3. 現在，透過選擇選單中的 編輯 > 替換，或者單擊 查詢 框左側的箭頭，以替換模式開啟查詢和替換面板。
4. 在現在應該可見的 替換 框中輸入 `sayHello`。
5. 現在，你可以使用 替換 框右側的兩個按鈕，將程式碼中所有 `createGreeting` 的例項替換為 `sayHello`。左側按鈕單擊一次移動到搜尋字串的下一個例項，再單擊一次將其替換。右側按鈕單擊一次替換所有例項。

VS Code 擁有許多強大的查詢和替換功能——請參閱 查詢和替換。

使用擴充套件增強你的程式碼編輯器

大多數程式碼編輯器都有擴充套件或外掛系統，允許你向程式新增預設情況下不可用的功能。這些功能可以執行各種任務，例如：

• 啟用預設不支援的語言的程式碼補全、程式碼檢查或除錯功能，或為已支援的語言提供附加功能。
• 允許你直接在程式碼編輯器中使用其他工具的功能，例如版本控制工具或本地測試伺服器。
• 提供額外的使用者介面或程式碼高亮主題/配色方案。
• 提供程式碼片段以滿足要求。這些片段可以由靜態模板生成，也可以透過 AI 工具生成。使用 AI 生成程式碼片段與使用 AI 生成搜尋結果具有許多相同的優點和注意事項（有關更多資訊，請參閱 搜尋資訊 > 使用 AI）。

探索 VS Code 擴充套件

VS Code 擴充套件透過 VS Code 中的“擴充套件市場”面板進行管理，該面板可透過 檢視 > 擴充套件 選單訪問。現在讓我們來探索它。

1. 開啟擴充套件市場面板。
2. 在面板頂部的 搜尋... 框中，輸入“JavaScript”以檢視可用的 JavaScript 相關擴充套件。嘗試點擊出現的幾個搜尋結果，看看它們都能做什麼。現在不要安裝任何一個。
3. 相反，讓我們安裝一個易於理解且對你在本模組集中處理的幾乎任何程式碼檔案都很有用的擴充套件。在 搜尋... 框中輸入“Prettier”，然後點選 Prettier - 程式碼格式化工具 結果。安裝 Prettier 擴充套件後，每次儲存檔案時都可以使用它來格式化你的程式碼，從而使你的程式碼更容易閱讀。
4. 點選 擴充套件 選項卡上的 安裝 按鈕。安裝完成後關閉該選項卡。
5. 要讓 Prettier 工作，你需要更新幾個設定。開啟 VS Code 設定選項卡（macOS 上為 程式碼 > 設定... > 設定，Windows 上為 檔案 > 首選項 > 設定）。
6. 在頂部的 搜尋設定 框中，輸入“formatter”以過濾設定列表，只顯示包含“formatter”的設定。
7. 找到 編輯器：預設格式化工具 選項，並從相關下拉選單中選擇 Prettier - 程式碼格式化工具 選項。
8. 找到 編輯器：儲存時格式化 選項，點選其複選框啟用它。
9. 關閉 設定 選項卡。

所有設定都已完成；現在讓我們看看 Prettier 的實際效果。

1. 回到你的 JavaScript 檔案選項卡並儲存它（檔案 > 儲存）。檔案需要儲存才能使 Prettier 工作。將其命名為 `test.js`。你儲存它的位置並不重要。

2. 將當前內容替換為以下程式碼：

   js

   function sayHello(name){const greeting = `Hello, ${name}!`;
   return greeting;}
   

3. 再次儲存檔案；此時，Prettier 應該會很好地重新格式化程式碼，如下所示：

   js

   function sayHello(name) {
     const greeting = `Hello, ${name}!`;
     return greeting;
   }
   

• 上一頁
• 概述：環境設定
• 下一頁