Visual Studio Codeを使う

# 何？Visual Studio Codeって？
> Visual Studio CodeはMicrosoftが開発したWindows、Linux、macOS用のソースコードエディタである。
> [Visual Studio Code - Wikipedia](https://ja.wikipedia.org/wiki/Visual_Studio_Code)

# インストールする

<details><summary>CentOSにRpmでインストール</summary><div>

## CentOSにRpmでインストール
- 環境 : CentOS Linux release 7.9.2009 (Core)
- 参考
    - [CentOS7.6にVisual Studio Code をインストール](https://qiita.com/kusanoiskuzuno/items/c323446f2707f9950ebb)
    - [Running Visual Studio Code on Linux](https://code.visualstudio.com/docs/setup/linux)

[インストールしたらランチャーに入れておくと便利](https://qiita.com/ponsuke0531/items/0cc2cd4dacbee65fbdcf)

```bash
# 1. GPG鍵をインポートする
$ sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
# 2. リポジトリファイルを作成する
$ sudo bash -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
## 内容はこんな感じ
$ cat /etc/yum.repos.d/vscode.repo 
[code]
name=Visual Studio Code
baseurl=https://packages.microsoft.com/yumrepos/vscode
enabled=1
gpgcheck=1
gpgkey=https://packages.microsoft.com/keys/microsoft.asc

# 3. アップデートをチェックする
$ sudo yum check-update
# 4. インストールする
$ sudo yum -y install code
```
</div></details>
















<details><summary>MacにHomebrewでインストール</summary><div>

## MacにHomebrewでインストール
- 環境 : macOS Big Surバージョン11.1

```bash
# 1. 使う前にはアップデートして、
$ brew update
Updated 3 taps (homebrew/core, homebrew/cask and homebrew/cask-fonts).
==> New Formulae
...
# 2. お医者さんに健康診断してもらう
$ brew doctor
Your system is ready to brew.

# 3. 一応存在を確認して
$ brew search visual-studio
==> Casks
visual-studio                              homebrew/cask-versions/mono-mdk-for-visual-studio
visual-studio-code                         homebrew/cask-versions/visual-studio-code-insiders

# 4. インストールする
$ brew install visual-studio-code
==> Downloading https://update.code.visualstudio.com/1.52.1/darwin/stable
==> Downloading from https://az764295.vo.msecnd.net/stable/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/VSCode-darwin.zip
######################################################################## 100.0%
==> Installing Cask visual-studio-code
==> Moving App 'Visual Studio Code.app' to '/Applications/Visual Studio Code.app'
==> Linking Binary 'code' to '/usr/local/bin/code'
🍺  visual-studio-code was successfully installed!
```
![スクリーンショット 2021-01-28 21.42.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/0cbdc6ec-a595-9dde-14d2-3df8b63d10c8.png)
</div></details>

<details><summary>Windows10にEXEでインストール</summary><div>
## Windows10にEXEでインストール
- 環境 : Windows10 Pro バージョン1909

ダウンロードしたEXEをポチポチしていけばインストールできる

1. [Visual Studio Codeのサイト](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)からexeファイルをダウンロードして起動する![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/b4421f33-5030-dd23-485c-5fe6db0f5688.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/02a64243-10a4-e39a-2f66-28f229f7aa01.png)
    - 今回は`VSCodeUserSetup-x64-1.60.0.exe`をダウンロード
1. ダイアログが起動するので契約書に同意して進む![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/826bf50f-6f4d-48a7-77a7-0dd89ac8e179.png)
2. インストールディレクトリを指定して進む
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/75f0056b-2664-4320-1987-fe08ed05f34b.png)
3. どんどん進んで[インストール]ボタンでインストールする![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/a38465a7-1480-e732-b7bc-daf3cb0e95f0.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/0de764cd-80db-4145-0c92-b8202af7aa62.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/19a22d2b-895a-67dd-20a5-2e26332042c6.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/1f96bf7d-2ca3-3147-fa27-16250ac61159.png)
</div></details>


# 設定する
1. [File] > [Preferences] > [Setting]で設定を開く
2. やりたいことを検索して設定をする![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/af39cee4-c303-6702-b284-09ecc298ed29.png)
    - 例えばテーマはデフォルトの暗いのじゃなくて明るいのにしたいので検索に「theme」を入れて表示された[Workbench]の[Color Theme]で「Light+(default light)」を選ぶと明るくなる![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/669dde96-4ba6-aa14-f1d7-95c6a5c99164.png)
1. 保存は、設定を変更するだけで即時適用となる

[設定ファイルの場所 - Qiita](https://qiita.com/ponsuke0531/items/ddde9c80360777a991fc#visual-studio-code)

## TerminalをGitBashにする
- 環境
    - Windows10 Pro バージョン20H2
    - Git Bash : mintty2.7.3
    - 参考 : [VSCode のターミナルを Git Bash に変更 - Qiita](https://qiita.com/daikiozawa/items/48a9fe0e2898c7dd78ae))

1. `Ctrl + ,`で[Settings]を開く > `Terminal.Integrated.Default Profile: Windows`で設定を検索
1. `Terminal.Integrated.Default Profile: Windows`のプルダウンを確認する
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/7d2427f0-9ce1-c7aa-d3fa-65840372a324.png)
    - プルダウンにGitBashが表示される場合 : GitBashを選択する
    - プルダウンにGitBashが表示されない場合 :
        1. 近くにある[setting.jsonで編集]リンクでsetting.jsonを開く
        1. 下記の`"terminal.integrated.profiles.windows"`の設定を追記して保存する
        1. プルダウンにGitBashが表示されるようになるのでGitBashを選択する
1. `Ctrl + @`で[TERMINAL]タブを開いてBashになっていることを確認する
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/87fe341e-db71-a1ad-9c1d-cc411db22b89.png)

```json
{
...省略...pathには「{GitBashのインストール場所}\\Git\\bin\\bash.exe」を記載する...
    "terminal.integrated.profiles.windows": {
        "GitBash": {
            "path": ["C:\\app\\Git\\bin\\bash.exe"]
        }
    },
...省略...
}
```

### ターミナルから「{ユーザー}@{ホスト} MINGW64'」を消す
参考 : [Git Bashのプロンプトから不要な箇所を消してスッキリさせる - Qiita](https://qiita.com/EichiSanden/items/6dd7edb24ffb66b01276)

1. ターミナルで以下を実行してGitBashのプロンプト設定を開く
    1. `$ code -r /c/apps/Git/etc/profile.d/git-prompt.sh`
1. PS1の設定を変更して保存する : [具体的な内容はこちら](https://qiita.com/ponsuke0531/items/9823645fa22ded5abefd#git-bash--%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%9B%E3%82%B9%E3%83%88-mingw64%E3%82%92%E6%B6%88%E3%81%99)
2. Visual Studio Codeを再起動して`Ctrl + @`で[TERMINAL]タブを開くと「{ユーザー}@{ホスト} MINGW64'」が消えている
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/80912ef5-7fc8-af01-6dbc-c6761879894c.png)



## ファイルの種類毎に設定する
参考 : [Visual Studio Code User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings#_languagespecific-editor-settings)

1. Command Palette表示 > 「Preferences: Configure Language Specific Settings」入力(候補が表示されるので途中まででもOK)
1. ファイルの種類を選択
1. settings.jsonが開いてファイルの種類毎に設定ができる


```json:例えばこんな感じのが簡単に書ける、しかも補完機能があって便利
{
    "[yaml]": { # <<<YAMLファイルの設定
        "editor.tabSize": 2 # <<<タブサイズは2
    }
}
```

## スペースを表示する
1. 半角スペースを見えるようにする
    - [Settings] > `editor.renderWhitespace` > 「all」(全ての空白文字を描画する)を選択
1. 全角スペースを見えるようにする
    1. 拡張機能 > 「zenkaku」を検索 > [zenkaku - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)の[Install]ボタンでインストール
    1. Command Palette表示 > 「Enable Zenkaku」を選択

![スクリーンショット 2021-02-15 20.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/ee23d005-c0da-29d6-ba2a-12237c3371e1.png)




# Terminalのシェルを一時的に変える
普段は使わないけど、たまに*.batとか*.exeとか実行したいとかでコマンドプロンプトを使いたい、とかちょっとPowerShell使いたいとか、そんなときのお話。

```bash
# コマンドプロンプトに切り替える
/c/path/to/dir (develop)
$ cmd
Microsoft Windows [Version 10.0.18363.1379]
(c) 2019 Microsoft Corporation. All rights reserved.

# Bashに切り替える
C:\path\to\dir>bash

# PowerShellに切り替える
/c/path/to/dir (develop)
$ powershell
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6

PS C:\path\to\dir> 
```




# ショートカット
|やりたいこと|Macのショートカット|Windowsのショートカット|
|:--|:--|:--|
|Command Palette表示|Command + Shift + P|Cntrl + Shift + P|
|行を削除したい|Command + Shift + K|Cntrl + Shift + K|
|行をコピーしたい||Alt + Shift + ↓|
|Terminalを表示|Cntrl + Shift + @|Cntrl + @|
|新しくTerminalを表示|Cntrl + Shift + ^|Cntrl + Shift + @|
|拡張機能表示|Command + Shift + X|Ctrl + Shift + X|
|Markdownのプレビューを横に表示したい||Ctrl + K > V|
|大文字(小文字)変換||Command Palette表示 > [Transform to Uppercase(Lowercase)]|
|拡大(縮小)|Command + 「+」(Command+Shift+「+」)||

# そのほか
- [エディタで置換する事例集 - Qiita](https://qiita.com/ponsuke0531/items/2140b3c46bf5ec03af7b)
- [Visual Studio CodeとDockerを使ってでVue.jsをやってみる - ponsuke_tarou’s blog](https://ponsuke-tarou.hatenablog.com/entry/2022/02/28/171429)