とりあえず入れておいたVSCode拡張機能(Python使い向け)

## はじめに

VSCodeの拡張機能が便利なので、何の開発をするときでもVSCode一つで済ませるようになってしまった。
これぐらい入れとけば開発できた、という拡張機能のリストのメモ。

使用言語はPyhon、時々Javascript、クラウドはAWS。
利用環境は以下。

- Windows10
- VSCode Ver 1.68.1(anacondaと一緒にインストール)

ウェブアプリとかHTMLが多い方はこちらのほうが参考になります。
[VSCodeのおすすめプラグイン9選を一挙紹介！プログラミングを効率的にサポート](https://www.tikgadget.com/vscord-plugin-osusume-matome/)

## 必要不可欠
### Python/Pylance
Pythonを使用するので最初にインストール。
入力補完や必要なモジュールの自動インポートなど。Kiteがなくても問題ないくらい便利。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/fab9da29-cb8d-64f3-d7e8-c3b0056aab1a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/0499a20f-4b21-61c3-c161-02f9948feb23.png)
参考：
[VisualStudioCodeでPython開発支援のPylanceを利用する](https://bluebirdofoz.hatenablog.com/entry/2020/07/12/030238)


### Docker
コンテナの起動など、Docker Desktopで実施するような作業が可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/a96cf019-fc2c-536c-c0da-dd4972d77967.png)
![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/b4d47e33-6e5c-a058-5b8c-d9c2666477b3.png)
参考：[VSCodeで"Docker"拡張機能を使ってみる](https://qiita.com/829yasubee/items/d336c26f3a5393a264ac)


### Compare Folders
コマンドパレットから使用する。Githubを使用しないフォルダの比較に便利。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/7127fb9b-f40d-244f-ba8d-4fd67af6e2f1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/0f40797a-9e2f-d5e4-4c84-b23ca640ad3f.png)


### Json Editor
Jsonファイルの構造をツリーで分かりやすく表示できる。
コマンドパレットからJSON editorを起動してJsonファイルを開くと内容を表示できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/51f4c08d-fb6e-f154-5574-b41881b85cd3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/cf3a5e6b-4bb0-e84f-1d02-9d1bd2da3691.png)
![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/c43db2dc-38f3-2de4-c5e8-baad98c37e6e.png)


### Edit csv
csvファイルをExcelのように見易くする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/918ab06c-5b56-979a-6e19-51dfbd4e0dcc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/26f20d00-fc64-4958-e26a-f4d76d190a05.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/86c100ba-c38e-aec0-7144-4f6dd6db2f1d.png)


### Jupyter
Jupyter notebookの閲覧・編集に使用。
Jupyterを起動するのが面倒なので重宝する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/d4f78504-a392-0170-1220-42f206632719.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/7945e758-d421-0ef3-298c-9b0d3a0cc09a.png)


### Remote Development
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/15955e39-4d41-ef68-aeb4-9dda58602db7.png)

以下の3つのアドオンがセットになっている。

#### Remote - Containers
Dockerで作成したコンテナへのアクセスが可能になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/3cc9169f-37be-e331-63f5-4db7150a44fb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/7073dc85-ee98-4b60-d9ab-02d56323019a.png)

#### Remote - SSH
SSH接続。ファイルブラウズも可能。configファイルを指定しておけばSSHターゲットが自動でリストされる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/598122ce-992f-c32d-bfc3-fbb86dac4cec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/f79772f4-6e27-9e30-021c-4a10a60a58aa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/4c8eadb8-a44b-8a1c-24b8-d01fe5b383e1.png)

#### Remote - WSL
wslに設定したLinuxにアクセスできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/92d48fb6-319b-8662-ede5-47c69edf03dc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/1b970961-1a54-eaa0-3dbf-85cb40103b5e.png)
![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/d7369cb7-413d-d1e8-329a-83f447a15ebc.png)


### YAML
yamlファイルのアウトライン表示、オートコンプリートほか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/d9ddab32-4e05-c574-274c-cfdc0edc8363.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/b337a2d8-f843-4fbe-7e84-e4c89e91b8a7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/ce4de20d-1583-e055-62df-2d2cb42adb72.png)


## あると便利
### Japanese Language Pack for Visual Studio Code
コマンドパレットなどは普通に英語のままなので別になくてもよいが…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/83dc6d77-7e46-aea8-f15a-f22086ea6ddd.png)


### AWS Toolkit
LambdaやS3などに直接アクセスしながら開発が可能。
参考：[Lambda開発のためのVScode](https://dev.classmethod.jp/articles/lambda-vscode-environment/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/a80f6b0e-91f3-1d61-6dd9-405ced652bf9.png)
![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/ad545a78-0e42-2115-c360-4f12bb899d63.png)


### Kite
コーディング時の候補表示やオートコンプリート。
アドオンのほかにアプリとしてKiteのインストールが必要。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/56b57819-accf-2be5-e63c-df8b74986a77.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/d7df9458-5ac8-2c95-992b-1c64b9b4c426.png)


#### zenkaku
全角スペースをわかりやすく表示してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/dc7c2fdd-b583-74b5-fd8b-b5737faf924c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/2a6d8e8a-6606-733d-e566-15148a0446dc.png)


### VS Code Pets
動物などのマスコットが表示される。かわいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/5d97e52d-6dbc-0058-0d4e-bc8eb9eb0455.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/ae28dad6-3992-e893-3bea-f960f5a0b95c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259842/bea3fb73-0db3-c7f0-263c-bf0d92a2fc35.png)