VSCodeで楽するためのスニペット講座

はじめに

筆者は普段からVSCodeを使用してコーディングしています。
変数の値を知りたい時などconsole.logを使いますが、どうも毎回打ち込むのは無駄というか疲れますね。

VSCodeにはエイリアスを登録することで簡単にコードを生成してくれるスニペット機能があります。

グローバルに登録する

ローカルに限らずグローバルで適応するスニペットを登録します。

1. VSCodeを開いて左下歯車、Configure User Snippetを選択
   

2. New Global Snippets file ...項目が現れるので選択
   好きなファイル名を入れて作成します。
   

3. 新たなjsonファイルができますので、以下のように記述する

{
  "console log": {
    "prefix": "cl",
    "body": [
      "console.log($1)"
    ]
  }
}

これでjsファイルにて、clを入力すればconsole.log()が出力されるようになりました。
$1部分にはカーソルが自動で移動するようになります。

プロジェクト別に登録する

基本的にグローバル登録と同じ手順です。違いのみ説明します。

さきほどNew Global Snippets file ...を選びましたが、プロジェクト別ではNew Snippets file for 'project-name'を選択します。

また、ファイルを作成するとプロジェクトルートに .vscode が生成されます。
これを元にVSCodeが判断してスニペットが使用可能になります。

さいごに

VSCodeを使っている方は、スニペットを登録しましょう。
コーディングはなるべく楽してしましょう。