#VSCode 導入編 ( 拡張機能 5選 ) 

# VSCode ( Visual Studio Code ) とは？
Microsoftが提供するクロスプラットフォームな高機能テキストエディタ。
```VSCode``` とは、```Visual Studio Code``` の略。( 以下、```VSCode``` と呼ぶ。)

<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/2d98090e-ca1e-2cb4-1b83-8afb92ed2c01.png" width="600">


- [Visual Studio Code](https://code.visualstudio.com/) ( Official Site ) 

# 導入環境
- Windows 10 ( ```Surface Book 2``` )
- Visual Studio Code ( ```1.32.1``` ) 
- Unity ( ```2018.3.8f1``` )

# VSCode 導入手順 ( 作業時間 : <font color="orange">5 minutes</font> )

- 公式サイトから```インストーラー```をダウンロード
- ```インストーラー``` 手順に従って、インストール
- ```Visual Studio Code``` 起動 

導入手順 ( 詳細 ) は、以下サイトを参照。  
- [WindowsにVSCode (Visual Studio Code) をインストールする方法](https://www.karelie.net/install-vscode-windows/)

# VSCode 画面構成

- __VSCode 基本画面__ ( 基本構成 )
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/55b2cc09-fe35-ec6b-83dd-241dc1ebcd5b.png" width="600">

- __VSCode 画面構成__ ( <font color="red">__※4つに分類__</font> )
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/fba32bee-eacd-f2f3-8d08-358a65e5e3d4.png" width="600">

# __VSCode__をカッコよくする拡張 ( Palenight Theme )
「[vscodethemes](https://vscodethemes.com/)」から、テーマの検索が可能。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/cd845f8d-5e55-4f8c-88ed-75f3aaca2a39.gif" width="600">

- __Default ( 変更前 )__
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/9c73c02c-bdda-859f-bb6f-c23b4f97ca66.png" width="500">

- __Palenight Theme ( 変更後 )__
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/da121cb8-db3b-09a8-83b1-01551ec1e2d8.png" width="500">


# Extension 検索方法 ( 2パターン )
## (1) Install Extensions
__Extension ( 拡張機能 )__ を導入するためには、```Shift``` + ```Ctrl``` + ```P``` を押して、
__Command Palette (コマンドパレット)__ を開いて、```Install Extensions``` を実行します！

( ```Menu``` > ```View``` > ```Command Palette..``` )
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/a219b005-5be5-b81c-58c4-ea7695da889c.gif" width="600">

## (2) VSCode Marketplace

「[Visual Studio Marketplace](https://marketplace.visualstudio.com/)」から、```Extension```を探すことも可能です。

<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/4c7f019d-a708-3c66-a124-d8826c63abf6.png" width="600">

# 便利な拡張機能 5選 ( Extensions )

## 1. Vim
__VSCode__を```Vim```ライクに、```Vimキーバインド``` を簡単に実現することができます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/5efea1b4-f475-5056-bb63-00e51eee62d4.gif" width="600">


## 2. Material Icon Theme
```サイドバー``` のアイコンに```Material Icon```を適用することができます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/36cf80f9-f219-6ba0-9a23-3eecee93897d.gif" width=600>

## 3. Shortcuts
```ステータスバー``` に、```ショートカット``` を追加することができます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/4c8ea25c-8e07-26d1-5f37-8483af1122b4.gif" width=600>

## 4. Markdown all in one
```マークダウン``` の ```入力補完機能``` を実現。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/c4d05ba6-f169-1935-b5e0-9e1caea3dda7.gif" width=600>

- ```Alt``` + ```C``` で、チェックリストにチェック追加
- ```List``` 作成時、```Enter```で、リスト追加

# 5. Trailing Spaces
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/93e1994c-d233-327c-becf-1a565fc028e8.png" width="600">


行末のスペースを、赤い枠で強調してくれる機能を追加します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/c05d5f52-77b7-ff5e-7e1c-b23c3f068f06.gif" width=600>


# ユーザー定義 ( settings.json ) について
``Menu`` > ``Preferences`` > ``Settings``
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/cf530d1d-1701-d08a-d5d2-3791cfdb4375.gif" width="900">

> C:\Users\ ``ユーザー名`` \AppData\Roaming\Code\settings.json

```settings.json
{
    "workbench.iconTheme": "material-icon-theme",
    "window.zoomLevel": 0,
    "editor.cursorStyle": "block",
    "workbench.colorTheme": "Palenight Theme"
}
```

# その他 ( ショートカット )
#### (1) フォントサイズ変更
- ```Ctrl +``` フォントサイズ ( 大 )
- ```Ctrl -``` フォントサイズ ( 小 )

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【 <a href="https://twitter.com/hashtag/VSCode?src=hash&amp;ref_src=twsrc%5Etfw">#VSCode</a> 便利なショートカット 】<br>〈フォーカス移動〉<br>・Ctrl + 0     「サイドバー」へ移動<br>・Ctrl + 1     「エディタ」へ移動<br>・Ctrl + @   「ターミナル」へ移動<br>・Alt + 1 ~   「エディタ領域のタブ」切り替え <a href="https://t.co/JSCpKrbqxW">pic.twitter.com/JSCpKrbqxW</a></p>&mdash; 堀尾 風仁 / Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1108481765079805952?ref_src=twsrc%5Etfw">2019年3月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


導入したばかりなので、これから本記事を更新しながら、
VSCodeを使いこなしていきたいと思います。

# __God is in the details.__　～ 神は細部に宿る ～
これからは、もっと自分の使うツールにこだわりを持とうと思いました！

料理人が包丁などの道具にこだわるように、
エンジニアなら、```キーボード```や、```テキストエディタ```にこだわれ。
というBOSSの言葉が身に染みた一日でした。