最近知ったVSCodeの便利機能 3選

## はじめに
本記事では、私が最近知った**VSCodeの便利機能**を3つご紹介します。

すべて以下の本から学んだことです。

https://book.impress.co.jp/books/1121101051

とてもわかりやすくてためになる本なので、おすすめです！

では、ここから便利機能をご紹介していきます。

## 便利機能① 独自のスニペット

スニペットとは、「**再利用可能なソースコードのまとまり**」を指します。

独自のスニペットを作成すると、自分のよく書くコードを**自動入力**できるようになります！

↓`var_export($array, true);`を自動入力する例
![391aa1df28ad0fe5f0956877da76470f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/d51ca446-dfeb-7f2c-e0c0-69b098e4e11a.gif)


IF文を記述する際などに、VSCodeが補完候補を提示してくれることがありますよね。

補完候補から自動入力されるのが**スニペット**です。

そのスニペットは、**自分で作成**することができます！

作成手順は以下の通りです。

（ここではMacで作業をしています。Windowsでは名称などが異なるかも知れません）

### スニペット作成手順 1. Code → ユーザー設定 → ユーザースニペット
![image-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/fa35e3e4-2972-9be6-c364-1fccc40c5de3.png)

### スニペット作成手順 2. 言語を選択

今回は例として、PHPを選択します。
![image-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/5aa852bb-17af-d758-ad02-3dc915883ba0.png)

### スニペット作成手順 3. JSONファイルを編集
②を行うと、以下のようなJSONファイルが表示されます。

![image-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/8928c5b7-7645-3024-6a64-754ac9ed1506.png)

このJSONファイルを編集することで**スニペットを作成**できます。

今回は、「`var_export($array, true);`」をスニペット登録してみます。

「`var_export($array, true);`」は、私がPHPで開発する際によく使う処理で、配列の中身をログファイルに出力してくれます。

便利な反面、毎回**関数を書く＆第2引数を指定するのが面倒**に感じていたので、スニペット登録してみます！

JSONファイルを以下のように編集して保存します。

![image-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/95aff245-28d0-e677-887d-6e618142d884.png)

そして、PHPファイル内で「`export`」と入力すると……

**補完候補が表示されました！**

![image-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/17f14892-d090-a121-e71c-0cb34116a8f9.png)

表示された「export_array」を選択した状態でEnterキーを押すと……

![image-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/454da59c-45e9-9d8d-45f2-6483e952ab4d.png)

「`var_export(array, true);`」が自動入力されました！

「array」にカーソルがあたっている状態なので、このまま変数名を入力すればOKです。

![391aa1df28ad0fe5f0956877da76470f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/d51ca446-dfeb-7f2c-e0c0-69b098e4e11a.gif)

**めっちゃ便利じゃないですか……**！！

これで開発効率がグッと上がるはずです！

**感動**:joy:

## 便利機能② ワークスペース

ワークスペースとは、「1つのウインドウ内で複数フォルダを開ける機能」です。

以下の画像をご参照ください。

![image-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/76e5cbf7-284a-f275-19aa-0887f8c28945.png)

「**src**」、「**Docker**」はそれぞれPC内の**別の場所**にあるフォルダです。

**別のフォルダを1つのVSCodeウインドウで開ける**のでとても便利です！

今までは、2つのフォルダを開きたいときは2つのウインドウを開いていました……。

↓**Before**

![image-21-2048x1057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/04c579dc-68dc-1982-6de8-4ed9e29928d1.png)

↓**After**
![image-24-2048x817.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/05b0c49e-7fe8-0e4e-65c9-ee379b06d45e.png)

とてもすっきりしました！

**嬉しい**:blush:

## 便利機能③ Zenモード

**Zenモード**とは、**ソースコードのみを全画面で表示する機能**です。

実際の動作は以下のアニメーションを見ていただければわかりやすいかと思います！


![b978ae66517de9f57f9e503f97c3276f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/78199300-5c1b-376b-2239-3b0d5723a424.gif)

これは……

**めちゃくちゃ集中できそう**:triumph:

（ちなみに、ZenモードはEscキーで終了できます）

　

## おわりに

今回は私が最近知った**VSCodeの便利機能**を3つご紹介しました。

まとめると、以下の通りです。

:::note
便利機能① 独自のスニペット
便利機能② ワークスペース
便利機能③ Zenモード
:::

**もっと早く知りたかった**！

どの機能も、これからどんどん使っていきたいと感じました。

以上、もしなにかの参考になれば幸いです。