Visual Studio Codeのオススメ初期セットアップ(Mac)

## はじめに

Visual Studio Codeのオススメ初期セットアップを紹介します:level_slider:

## 環境

- OS：macOS Catalina 10.15.5
- Visual Studio Code：1.48.1
- Japanese Language Pack for Visual Studio Code：1.48.3

## Visual Studio Codeのインストール

[Download for Mac]をクリックし、.zipファイルを解凍して.appファイルをアプリケーションフォルダに配置します。
https://code.visualstudio.com/

## 日本語化

デフォルトの言語が英語なので日本語化します。

__View > Extensions
「Japanese Language Pack for Visual Studio Code」を検索して「Install」をクリック__
![スクリーンショット_2020-08-23_12_06_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/ddc88a54-3d27-f668-7f3d-726006fe02eb.png)

インストールが完了したら、再起動すると日本語化が反映されます。

## 設定

`⌘,` で設定を開きます。

### 文字サイズを大きくする

__テキスト エディター > フォント > Font Size
12→14__
![スクリーンショット_2020-08-23_12_12_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/ef87af6b-4586-8eb5-4ed9-4ac48c03cd4f.png)

__機能 > デバッグ > Console: Font Size
12→14__
![スクリーンショット_2020-08-23_12_14_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/d20b0cd3-d0bf-1d65-c850-b4b4deed3ae5.png)

__機能 > デバッグ > Console: Line Height
0→1.1__
![スクリーンショット_2020-08-23_12_17_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/2df1b756-c535-db91-ebc3-0650cd0b9f7b.png)

__機能 > ターミナル > Integrated: Font Size
12→14__
![スクリーンショット_2020-08-23_12_45_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/76ec108b-b9f2-de7a-b6e9-03b5af104087.png)

__機能 > ターミナル > Integrated: Line Height
1→1.1__
![スクリーンショット_2020-08-23_12_48_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/8d121588-2b9f-7095-9e78-0c2753ac43fa.png)

### ミニマップを非表示にする

__テキスト エディター > ミニマップ > Enabled
ON→OFF__
![スクリーンショット_2020-08-23_12_51_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/ea9b65ab-3e8f-9ca7-0503-a68eea9022e0.png)

## ショートカットキー

### Ctrl + Tabで横のタブに移動するようにする

__キーボード ショートカット(⌘K, ⌘S) >
表示: 次のエディターを開く：Shift Command ]→^ Tab
表示: 以前のエディターを開く：Shift Command [→^ Shift Tab
表示: グループ内の最近使用したエディターのうち前のエディターをすばやく開く：^ Tab→Shift Command ]
表示: Quick Open のグループ内で最も長く使われていないエディター：^ Shift Tab→Shift Command \[__
![スクリーンショット 2020-08-23 13.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/3b971e48-e821-987b-e91a-ce7bf28fed90.png)
![スクリーンショット 2020-08-23 13.04.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/a335b237-c48d-57c6-d017-77895f3e7ff0.png)
![スクリーンショット 2020-08-23 13.15.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/8024d144-269c-8c84-dc77-07f199e2030d.png)
![スクリーンショット 2020-08-23 13.15.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/42e64800-14d6-fdd6-c6f3-31274692be44.png)

## プラグインのインストール

__表示 > 拡張機能__ からインストールします。

### Vim

Vimのキーバインドで操作できるようになります。
![スクリーンショット 2020-08-23 13.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/47c14243-9cec-2862-78f4-cfe2de882152.png)

### TypeScript Import Sorter

TSのインポート文をソートします。
![スクリーンショット 2020-08-23 13.22.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/e669b2e5-c62b-995c-745b-fb171eed8cb3.png)

`Ctrl + Shift + P` でソートするはずなのですが、反応しません、、
もし使い方を知っている方がいたら教えていただけると嬉しいです。

### TypeScript Import

TSのインポート文を自動で挿入します。
![スクリーンショット 2020-08-23 13.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/620778f3-a22e-5927-fb22-c8d11598ef5d.png)

## おわりに

これで今日から楽しいVSCodeライフの始まりです:computer::sparkles:

他にもオススメの設定がありましたらコメントなどでご連絡いただけると嬉しいです:blush:

## 参考リンク

- [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)
- [Visual Studio Codeでタブの切り替えショートカットキーをChromeみたいにする - ノウハウブログ - カンタローCGI](https://kantaro-cgi.com/blog/tool/vscode_tabmovekey_like_chrome.html)