如果您使用 JavaScript 或 React 进行开发，Visual Studio Code 的自定义功能可以简化您的工作流程并使开发更快、更顺畅。在本指南中，我们将介绍每个 JS 和 React 开发人员都应添加到其 VS Code 设置中的必备片段和基本设置。

1.使用自定义片段加速开发✨

代码片段通过快速添加可重用的代码块来帮助您加快编码速度。这里有一些独特、实用的片段，可以让您的开发过程更加高效和愉快！

如何在 VS Code 中添加代码片段：

Code Faster in VS Code: Must-Have Customizations for JavaScript & React Developers

打开命令面板：按Cmd Shift P (Mac) 或Ctrl Shift P (Windows)。
搜索“首选项：打开用户片段”并选择它。
选择相关的语言文件（例如，JavaScript 用于 JavaScript 片段，javascript.json 用于一般 JS 片段）。
在通过复制并粘贴以下示例打开的 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>

登录后复制

它们的作用：