Visual Studio Code(2021年睦月)

# 初めに

いつも読んでくださってありがとうございます。今回から開発ツールに入ります。

# Visual Studio Code
## これは何
[Visual Studio Code](https://www.electronjs.org/apps/visual-studio-code) はマイクロソフトが提供するフリーな開発環境で、Windows、Linux、macOSに対応する。ソースはフリーでオープンソースであり、Electron(NodeJS/Javascript,HTML,CSS)[^1][^2] で作成されている。ElectronはNodeJSをデスクトップアプリに変換する枠組みであり、[Slack](https://www.electronjs.org/apps/slack)や[Atom](https://www.electronjs.org/apps/atom)などもElectron製である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/3de38246-5d0e-9de9-f7b0-89143cbcd032.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/400cae5e-955f-0bb0-382d-11c57caa6171.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/bee6381b-60f9-62c2-f071-91956c88e7d9.png)

## インストール
```powershell
scoop search vscode
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/a2321dd7-ee2f-57d2-5f6e-a329d6b141af.png)

```powershell
scoop install vscode
```
おっと、以前インストールしていたようだ、忘れてた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/161d8bc5-83fc-9e51-e6f9-197194ac97f7.png)
更新してみる。

```powershell
scoop update vscode
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/827d3876-83bb-d56e-9cf6-e973ade70af7.png)
コンテクストメニュー(ファイル右クリック)に追加するには、以下を実行。

```powershell
C:\Users\stake\scoop\apps\vscode\current\vscode-install-context.reg
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/5997fb46-57ed-3d7c-2b43-e07bce3c53ca.png)
レジストリの変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/d48da069-51b2-8c56-6cc5-39d343fcd897.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/48e05ce4-063d-0bf0-6ee3-94a9ba813d64.png)
コンテクストメニューに追加された。(Open with Code)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/a07fcc44-fc7b-1ee3-a244-e2ec8f9590a4.png)

## 起動
```powershell
mkdir c:\home\develop
cd c:\home\develop
code .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/eb5a4806-b668-23dd-05ff-9fc6dea1be56.png)

## 設定
### 改行コード
Dockerでの開発であり、Linuxと同じ環境になるが、素のVisualStudioCodeだと、Windows系の改行コードで書類を作ってしまい、bashスクリプトが動作不良を起こすことがある。[^3] gitの改行設定[^4]と合わせて以下のように設定を変更しておく。

#### gitの設定を変更
WindowsのGitでは、インストール時のデフォルトとして、CRLFの変換機能がONになっていて、チェックアウトやクローンにて勝手にCRLFに変えられてしまう。WSL2/Dockerと組合せて使用する場合、この設定は有害な結果をもたらすことが多いので、以下のように、PowerShellなどから設定変更する。もしローカル設定がある場合は、そちらを変更する。
CRLFが必要な場合は、ローカルで「git config --local core.autocrlf false」とするか、VSCの設定を変更する。

```powershell
# 改行コードをコミット時にのみ CRLF=>LF に変換(それ以外の操作では無変換)
git config --global core.autocrlf input
# 設定の確認：グルーバル
git config --list --global
# 設定の確認：ローカル(グローバルより優先となる)
git config --list --local
```

#### 設定一覧を表示
左下のギヤマークをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/48178daa-c82e-318e-1e9c-8cfeb8de09ea.png)
「Settings   Ctrl+,」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/24c40b23-08e1-80f6-34fa-3b2b9d751ba7.png)

#### eol を検索し設定
- 上部の検索ボックスに「eol」と入力
- 結果一覧から「Files」を選択
- 設定対象の「Files: Eol」 を 「\n」に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/8b6adbdf-508e-aa14-96ac-fca1b2509d12.png)

## その他の小ネタ
既存ファイルの改行コード変更(CRLF->LF)などの小技は、別途まとめた[^5]ので、そちらを参照。

## 拡張機能
右下に表示された「Show Recommendations」をクリックすると推奨のものが見える。それ以外にも開発に役立つ拡張を入れておく。

#### Remote Container
https://github.com/Microsoft/vscode-remote-release
コンテナの生成、起動、接続をし、VSCodeで内部から開発。ログインしたコンテんなのターミナル(linux bash)も使える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/49b93c0d-d4a7-cd28-6a36-0db82734a765.png)

#### Docker
https://github.com/microsoft/vscode-docker
DockerコンテナのBuildや管理を容易にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/866d2dd3-dc87-4b38-3e13-1d496bd26cae.png)

#### Docker Explorer
https://github.com/formulahendry/vscode-docker-explorer
Dockerコンテナの一覧やVSCodeとの連携管理が便利になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/1f134af0-c59c-7791-5ea0-fbb80eabb1be.png)

#### Remote WSL
https://github.com/Microsoft/vscode-remote-release
現時点では、Previewではあるが、一応入れておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/1738c5a0-678a-af57-593f-a34e5a3d5d9d.png)

#### Markdown All in One
https://github.com/yzhang-gh/vscode-markdown
.MDファイルを実際の表示状態で見れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/da1f81a0-1acd-40db-834b-e1d87c52a127.png)

#### Markdown Preview Mermaid Support
https://github.com/mjbvz/vscode-markdown-mermaid
フローチャート作成用。リアルタイムで Preview 可能。
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/7710ebd2-bb57-ef5d-f644-373144868a16.png)

#### GitLens
https://github.com/eamodio/vscode-gitlens
強力なGit用ツール
https://gitlens.amod.io/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/a30b6ce3-b33a-ac3e-7afd-ce7c83572e0f.png)

#### Git Graph
https://github.com/mhutchie/vscode-git-graph
見やすいgit log。
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/35a5413f-e48b-14b1-8368-76a325da1853.png)

#### Todo Tree
https://github.com/Gruntfuggly/todo-tree
ファイルの中のTODOコメントを一覧化する
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/7c6fad74-7600-cbda-849c-4fcbb5c8eea2.png)

### 必要に応じて入れる拡張

#### Live Share
https://github.com/MicrosoftDocs/live-share
コードの同時編集用ツール。メンバーへの説明や引継ぎなどに便利。
https://code.visualstudio.com/blogs/2017/11/15/live-share
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352975/ea7f8568-970a-9ec9-c35e-1f3c000c0a4f.png)

設定
Liveshare: Guest Approval Required を On にする

#### 言語別ツール
Lintやらドキュメント作成ツールなどはお好みで。
例）
Python: Python Docstring Generator

# 終りに

次回から、各言語向けの開発・デバッグ環境をDockerで作ってゆく。

親記事：[WSL2とVSCで作るWindowsでのDocker内開発環境(2021年睦月)](https://qiita.com/CinTAKE/items/ee348acec54195ef5bd1)

[^1]: [Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS](https://www.electronjs.org/)
[^2]: [【Electron】HTML/CSS/JavaScript でデスクトップアプリを作った【インストールから exe 化まで】]( https://qiita.com/ndj/items/a07b433aa3f6f6e8742f)
[^3]: [WSL2/Dockerのトラブル治療室](https://qiita.com/CinTAKE/items/76ee1ae96f389623d99f)
[^4]: [Git 小技集](https://qiita.com/CinTAKE/items/608b655aad842e16f6bb)
[^5]: [Visual Studio Code 小技集](https://qiita.com/CinTAKE/items/4ac8f03d4ba32a2348ce)