VIsualStudioCodeの設定やあれこれ

## はじめに  
VSCodeのインストール後から日本語化を代表する手順などを記載する  
備忘録を主目的に作成する  
また、推奨アドインなども含め随時、追加を行う

## 日本語化手順  
日本語パックのアドインを追加することでUIを日本語化させる
### 手順
1. アドインの検索ボックスへ移動  
    `Ctrl + Shft + X` で拡張機能の検索ボックスに移動  
1. 日本語パックの検索とインストール  
    `Japanese Language Pack for VS Code`を検索ボックスに入力  
    対象のアドインを選択しインストールを行う  
    ![2020-12-20-11-05-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/faff8185-4023-4858-d0db-86060d725757.png)

1. コマンドパレットの表示  
    `Ctrl + Shft + P`でコマンドパレットに移動  
1. 日本語を選択する  
    `Configure Display Language`を入力し実行する  
    `ja`を選択し、再起動を行う  

### 参考リンク先
参考1 : [Japanese Language Pack for VS Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)  
参考2 : [Display Language](https://code.visualstudio.com/docs/getstarted/locales)

## 拡張機能の追加  
### [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)の導入
クリップボードにある画像を`Ctrl + Alt + V`で簡単にコピペするツール

1. アドインの検索ボックスへ移動  
    `Ctrl + Shft + X` で拡張機能の検索ボックスに移動  
1. Paste Imageの検索とインストール  
    `Paste Image`を検索ボックスに入力  
    ![2020-12-20-17-17-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/c96f1855-4665-edad-658c-fdfdc866a2c1.png)
1. 貼り付け画像の出力先の変更  
    現在のパスにあるimgフォルダに出力先を変更
    ![2020-12-20-17-02-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/74a23bc4-d364-f3fa-d2ce-39b3ea59dd79.png)


### [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)の導入
gitの履歴を`Alt + H`で確認する

1. アドインの検索ボックスへ移動  
    `Ctrl + Shft + X` で拡張機能の検索ボックスに移動  
1. Git Historyの検索とインストール  
    `Git History`を検索ボックスに入力  
    ![](img/2020-12-20-22-40-13.png)![2020-12-20-22-40-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/9442c38f-278a-78d9-bdce-f24a1fc5a9b8.png)
1. リポジトリの履歴表示  
    1. `Ctrl + Shft + P`でコマンドパレットを表示  
        ![2020-12-27-23-27-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/459452f4-b8dc-0dbd-9e3b-db9d0315da87.png)  
    1. `git log`を入力してGit View History(git log)を選択する  
        ![2020-12-27-23-29-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/3a691839-b860-8b98-e2c9-a6a64c86880f.png)  

### [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)の導入  
VSCodeでAnacondaの仮想環境を使用してPython開発を効率化する  

1. アドインの検索ボックスへ移動  
    `Ctrl + Shft + X` で拡張機能の検索ボックスに移動  
1. Pythonの検索とインストール  
    `Python`を検索ボックスに入力  
    [2021-01-04-13-16-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/39b2be15-a70f-ead1-5b11-45adae7f91ec.png)  
1. VSCodeで仮想環境を使用するための設定  
    Anacondaで作成した仮想環境を[サイト](https://code.visualstudio.com/docs/python/environments)を参考して設定する  
    1. `Ctrl + Shft + P`でコマンドパレットを表示  
        ![2020-12-27-23-27-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/a58e09cb-619a-7ac7-86c0-47737b1780bb.png)  
    1. `Python: Select Interpreter`を入力してインタプリタを選択する  
        ![2021-01-04-13-20-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/c07bb9f7-9d23-24d7-15ac-e508424d10f3.png)  
    1. 仮想環境を選択  
        ![2021-01-04-13-39-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/469c4ebd-08f3-27fe-b86e-6a199a03f6de.png)

    1. 'conda activate 仮想環境'がVSCode上でエラーが出る場合は環境変数にパスを追加する  
        ![2021-01-04-14-04-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/37202907-7afd-9003-23c9-2dab19c0f6e4.png)

### Docker連携
DockerとWSL2による設定関連は[別記事](https://qiita.com/kumab2221/items/0393708f31e8af102e89)を参照  

Docker,WSL2,VSCodeを使用してアプリケーションの開発を効率化する

1. アドインの検索ボックスへ移動  
    `Ctrl + Shft + X` で拡張機能の検索ボックスに移動  
1. [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)の導入  の検索とインストール  
    `Docker`を検索ボックスに入力  
    ![2021-01-10-13-37-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/0a575ef9-319d-d812-1915-3ed177ae3a27.png)
 
1. [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)の検索とインストール  
    `Remote - Containers`を検索ボックスに入力  
    ![2021-01-10-13-46-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/c7234fff-9c11-06b9-5d56-06ecf1db684e.png)
1. Dockerコンテナの起動とアタッチ  
    ![startup_container.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517181/a393b769-279a-1a3c-a56c-5d59ef58d0c8.gif)