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、一般的な JS スニペットの場合は javascript.json)。
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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173633230534727.jpg?x-oss-process=image/resize,p_40" class="lazy" 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」と入力すると、このスニペットは、変数が null または未定義でない場合にのみログを記録する console.log ステートメントを作成します。これにより、デバッグがよりスマートになり、エラーが発生しにくくなります。

<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 フェッチ スニペット」 — 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 プロジェクトには、ワークスペースを乱雑にする多くの大きなディレクトリ (こんにちは、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 使用率が削減され、パフォーマンスが向上します。

これらの除外は、node_modules と build フォルダーが大きくなり、検索やエディターの応答性が低下する可能性がある React および Node.js プロジェクトに特に役立ちます。

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="%24%7B3:/path/to/image.jpg%7D" 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: インデント レベルを JavaScript の推奨スタイルである 2 スペースに設定します。
• editor.insertSpaces: タブの代わりにスペースを使用して、書式設定を均一に保ちます。
• editor.formatOnSave: 保存時にコードを自動的にフォーマットします。
• editor.trimAutoWhitespace: 末尾のスペースを削除し、コードをクリーンに保ちます。

?プロのヒント: .prettierrc ファイルをプロジェクトに追加して、フォーマット設定をチームメイトと共有し、チーム全体で一貫したスタイルを確保することを検討してください。

最終的な考え?

これらのカスタマイズにより、コード自体に集中できる、よりスムーズで効率的なワークスペースが作成されます。数分かけてこれらの調整を実装し、生産性の向上を直接体験してください。小さな変化が大きな違いを生む可能性があります。

以上がVS Code でのコードの高速化: JavaScript および React 開発者に必須のカスタマイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。