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

1.使用自訂片段加速開發(fā)?

程式碼片段透過快速添加可重複使用的程式碼區(qū)塊來(lái)幫助您加快編碼速度。這裡有一些獨(dú)特、實(shí)用的片段，可以讓您的開發(fā)過程更有效率、更愉快！

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

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

片段範(fàn)例

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

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

<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>

?? 「條件控制臺(tái)日誌」 — 使用條件日誌記錄進(jìn)行偵錯(cuò)

透過輸入 clog，此程式碼片段會(huì)建立一個(gè) console.log 語(yǔ)句，該語(yǔ)句僅在變數(shù)不為 null 或未定義時(shí)記錄，使偵錯(cuò)更加智慧且不易出錯(cuò)。

<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 資料的範(fàn)本

需要快速取得設(shè)定嗎？輸入 apif 會(huì)建立一個(gè)具有錯(cuò)誤處理功能的即時(shí) 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），這些目錄會(huì)使您的工作空間變得混亂。以下是隱藏它們以保持文件瀏覽器整潔的方法。

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

將這些設(shè)定新增至您的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>

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

按鍵設(shè)定說(shuō)明

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

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

3.讓你的程式碼變得漂亮：一致的程式碼風(fēng)格？

設(shè)定 VS Code 自動(dòng)處理格式，讓您的程式碼始終看起來(lái)很優(yōu)雅。

?? JavaScript 程式碼樣式設(shè)定

更新 settings.json 以在所有專案中套用以下首選項(xiàng)：

<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：將縮排等級(jí)設(shè)定為 2 個(gè)空格，這是 JavaScript 的首選樣式。
• editor.insertSpaces：使用空格而不是製表符來(lái)保持格式統(tǒng)一。
• editor.formatOnSave：儲(chǔ)存時(shí)自動(dòng)格式化程式碼。
• editor.trimAutoWhitespace：刪除尾隨空格，保持程式碼整潔。

？專業(yè)提示： 考慮將 .prettierrc 檔案添加到您的專案中，以便與隊(duì)友共享您的格式設(shè)置，確保整個(gè)團(tuán)隊(duì)的樣式保持一致。

最後的想法？

這些自訂創(chuàng)造了一個(gè)更流暢、更有效率的工作空間，您可以在其中專注於程式碼本身?；◣追昼姇r(shí)間實(shí)施這些調(diào)整，並親身體驗(yàn)生產(chǎn)力的提升。小改變可以帶來(lái)大改變。

以上是在 VS Code 中更快地編寫程式碼：JavaScript 和 React 開發(fā)人員必備的自訂功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！