オンラインコードからスニペットへの変換ツール、JavaScript / TypeScript / React / JSX / TSX をサポート
VS Code スニペットは、よく使用されるコード ブロックの挿入を自動化することで、コーディングの生産性を高める強力な方法です。単純なテキスト拡張や、プレースホルダーと変数を含むより複雑なテンプレートにすることができます。スニペットを活用する方法は次のとおりです。
スニペットの作成:
スニペット設定にアクセスする: [ファイル] > [設定] > [ユーザー スニペット] (macOS の場合は [コード] > [設定] > [ユーザー スニペット]) に移動します。または、コマンド パレット (Ctrl+Shift+P または Cmd+Shift+P) を使用して、「設定: ユーザー スニペットの構成」と入力します。
言語の選択: スニペットの言語 (javascript.json、python.json など) を選択するように求められます。これにより、スニペットがその特定の言語でのみ使用可能になります。また、すべての言語でスニペットにアクセスできるようにする場合は、「グローバル スニペット」ファイルを作成することもできます。
スニペットの定義: スニペットは JSON 形式で定義されます。各スニペットには、名前、プレフィックス (スニペットをトリガーするために入力するショートカット)、本文 (挿入されるコード)、およびオプションの説明があります。
例 (JavaScript):
{
"For Loop": {
"prefix": "forl",
"body": [
"for (let i = 0; i < $1; i++) {",
" $0",
"}"
],
"description": "For loop with index"
}
}この例では、次のようになります。
「For Loop」: スニペットの名前 (参照用)。
「forl」: プレフィックス。「forl」と入力して Tab キーを押すと、スニペットが挿入されます。
「body」: 挿入するコード。$1、$2 などはタブストップ (プレースホルダー) です。$0 はカーソルの最終位置です。
「description」: IntelliSense の候補に表示されるオプションの説明。
スニペットの使用:
プレフィックスの入力: 適切な言語タイプのファイルで、定義したプレフィックス (例: forl) の入力を開始します。
スニペットの選択: VS Code の IntelliSense がスニペットを提案します。矢印キーまたはクリックして選択します。
タブストップの使用: Tab キーを押してタブストップ ($1、$2 など) 間を移動し、値を入力します。
変数:
スニペットでは、$TM_FILENAME、$CURRENT_YEAR などの変数も利用できます。完全なリストについては、VS Code のドキュメントを参照してください。
変数を使用した例 (Python):
{
"New Python File": {
"prefix": "newpy",
"body": [
"#!/usr/bin/env python3",
"# -*- coding: utf-8 -*-",
"",
"# ${TM_FILENAME}",
"# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
]
}
}スニペットをマスターすることで、繰り返し入力する作業を大幅に減らし、コードの一貫性を確保できます。よく使用されるコード パターンに合わせて独自のスニペットを作成して、コーディング効率が飛躍的に向上するのを体験してください。