在 VS Code 中更快地編寫程式碼：JavaScript 和 React 開發人員必備的自訂功能

如果您使用 JavaScript 或 React 進行開發，Visual Studio Code 的自訂功能可以簡化您的工作流程並使開發更快、更順暢。在本指南中，我們將介紹每個 JS 和 React 開發人員都應添加到其 VS Code 設定中的必備片段和基本設定。

1.使用自訂片段加速開發✨

程式碼片段透過快速添加可重複使用的程式碼區塊來幫助您加快編碼速度。這裡有一些獨特、實用的片段，可以讓您的開發過程更有效率、更愉快！

如何在 VS Code 中加入程式碼片段：

1. 開啟指令面板：按Cmd Shift P (Mac) 或Ctrl Shift P (Windows)。
2. 搜尋「首選項：開啟使用者片段」並選擇它。
3. 選擇相關的語言檔案（例如，JavaScript 用於 JavaScript 片段，javascript.json 用於一般 JS 片段）。
4. 在透過複製並貼上以下範例開啟的 JSON 檔案中新增您的程式碼段。

片段範例

?️ 「智慧型 React 元件」—可自訂的 React 元件

此程式碼片段會產生一個帶有 src 和 props 等基本屬性的 React 元件模板，非常適合透過可選的自訂快速設定功能元件。

<span>{<br>  "React Smart Component": {<br>    "prefix": "rsc",<br>    "body": [<br>      "import React from 'react';",<br>      "",<br>      "const ${1:ComponentName} = ({ ${2:props} }) => {",<br>      "  return (",<br>      "    <div className='${1:componentName}'>",<br>      "      <img src='${3:/path/to/image.jpg}' alt='${4:description}' />",<br>      "      <p>${5:Your text here}</p>",<br>      "    </div>",<br>      "  );",<br>      "};",<br>      "",<br>      "export default ${1:ComponentName};"<br>    ],<br>    "description": "Creates a customizable React component with img and text"<br>  }<br>}</span>

?️ 「條件控制台日誌」 — 使用條件日誌記錄進行偵錯

透過輸入 clog，此程式碼片段會建立一個 console.log 語句，該語句僅在變數不為 null 或未定義時記錄，使偵錯更加智慧且不易出錯。

<span>{<br>  "Conditional Console Log": {<br>    "prefix": "clog",<br>    "body": [<br>      "if (${1:variable} !== null && ${1:variable} !== undefined) {",<br>      "  console.log('${1:variable}:', ${1:variable});",<br>      "}"<br>    ],<br>    "description": "Conditional console.log to check variable before logging"<br>  }<br>}</span>

?️ “API Fetch Snippet” — 用於取得 API 資料的範本

需要快速取得設定嗎？輸入 apif 會建立一個具有錯誤處理功能的即時 API 取得呼叫。

<span>{<br>  "API Fetch Call": {<br>    "prefix": "apif",<br>    "body": [<br>      "const fetch${1:Data} = async () => {",<br>      "  try {",<br>      "    const response = await fetch('${2:https://api.example.com/endpoint}');",<br>      "    if (!response.ok) throw new Error('Network response was not ok');",<br>      "    const data = await response.json();",<br>      "    console.log(data);",<br>      "    return data;",<br>      "  } catch (error) {",<br>      "    console.error('Fetch error:', error);",<br>      "  }",<br>      "};"<br>    ],<br>    "description": "Basic API fetch call with error handling"<br>  }<br>}</span>

2.清理你的檔案總管？

JavaScript 和 React 專案通常包含許多大型目錄（hello、node_modules），這些目錄會使您的工作空間變得混亂。以下是隱藏它們以保持文件瀏覽器整潔的方法。

？隱藏不需要的檔案和資料夾

將這些設定新增至您的settings.json以隱藏龐大的資料夾，例如node_modules和.log檔案：

<span>{<br>  "files.exclude": {<br>    "<strong>/node_modules"</strong>: <span>true</span>,<br>    "/build": <span>true</span>,<br>    "<strong>/dist"</strong>: <span>true</span>,<br>    "/<em>.log"</em>: <span>true</span><br>  },<br>  "search.exclude": {<br>    "<em>/node_modules"</em>: <span>true</span>,<br>    "<em>/coverage"</em>: <span>true</span><br>  },<br>  "files.watcherExclude": {<br>    "<em>/node_modules/</em><em>"</em>: <span>true</span>,<br>    "<em>/build/</em>*": <span>true</span><br>  }<br>}</span>

⚡提示：從搜尋和觀察程式進程中排除檔案可以讓 VS Code 運作明顯更流暢，尤其是在大型專案中。

按鍵設定說明

• files.exclude：從檔案總管中隱藏指定的檔案和資料夾。在這裡，我們隱藏了 node_modules、build、dist 和 .log 檔案。
• search.exclude：從搜尋結果中排除這些項目，使搜尋更快、更相關。
• files.watcherExclude：防止 VS Code 監視某些資料夾中的更改，從而透過減少 CPU 使用率來提高效能。

這些排除對於 React 和 Node.js 專案特別有用，在這些專案中，node_modules 和建置資料夾會變得很大，並且會降低搜尋和編輯器回應速度。

3.讓你的程式碼變得漂亮：一致的程式碼風格？

設定 VS Code 自動處理格式，讓您的程式碼始終看起來很優雅。

?️ JavaScript 程式碼樣式設定

更新 settings.json 以在所有專案中套用以下首選項：

<span>{<br>  "React Smart Component": {<br>    "prefix": "rsc",<br>    "body": [<br>      "import React from 'react';",<br>      "",<br>      "const ${1:ComponentName} = ({ ${2:props} }) => {",<br>      "  return (",<br>      "    <div className='${1:componentName}'>",<br>      "      <img src='${3:/path/to/image.jpg}' alt='${4:description}' />",<br>      "      <p>${5:Your text here}</p>",<br>      "    </div>",<br>      "  );",<br>      "};",<br>      "",<br>      "export default ${1:ComponentName};"<br>    ],<br>    "description": "Creates a customizable React component with img and text"<br>  }<br>}</span>

它們的作用：

• editor.tabSize：將縮排等級設定為 2 個空格，這是 JavaScript 的首選樣式。
• editor.insertSpaces：使用空格而不是製表符來保持格式統一。
• editor.formatOnSave：儲存時自動格式化程式碼。
• editor.trimAutoWhitespace：刪除尾隨空格，保持程式碼整潔。

？專業提示： 考慮將 .prettierrc 檔案添加到您的專案中，以便與隊友共享您的格式設置，確保整個團隊的樣式保持一致。

最後的想法？

這些自訂創造了一個更流暢、更有效率的工作空間，您可以在其中專注於程式碼本身。花幾分鐘時間實施這些調整，並親身體驗生產力的提升。小改變可以帶來大改變。

以上是在 VS Code 中更快地編寫程式碼：JavaScript 和 React 開發人員必備的自訂功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！