====== VSCode ======

===== インストール =====
=== Ubuntuの場合 ===
aptで入れてしまうのが楽．
<code bash>
sudo apt-get install curl
curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

sudo apt-get update
sudo apt-get install code
</code>

=== macOS ===
<code bash>
brew install visual-studio-code --cask
</code>
===== コマンド =====
^ 操作 ^ コマンド ^
| 起動 | ''code'' |
| インストールされているプラグインの確認 | ''code %%-%%-list-extensions %%-%%-show-versions'' |
| プラグインのインストール | ''code %%-%%-install-extension hoge.fuga'' |
| プラグインのアンインストール | ''code %%-%%-uninstall-extension hoge.fuga'' |
| プラグインの無効化 | ''code %%-%%-disable-extension hoge.fuga'' |
| すべてのプラグインの無効化 | ''code %%-%%-disable-extensions'' |
| ワークスペースにフォルダを追加 | ''code %%-%%-add hoge'' |
===== 設定 =====
settings.jsonというファイルで設定が管理されている．\\
インストールした最初の状態ではsettings.jsonは生成されていない．

場所はそれぞれのOSごとに違う．
=== エディタ設定 ===
^ OS ^ パス ^
| Windows | ''%APPDATA%\Code\User\settings.json'' |
| Mac | ''~/Library/Application Support/Code/User/settings.json'' |
| Linux | ''~/.config/Code/User/settings.json'' |

=== ショートカットキーの設定 ===
^ OS ^ パス ^
| Linux | ''~/.config/Code/User/keybindings.json'' |

==== 空白とタブの可視化 ====
テキストの行頭にあるインデントがタブなのか空白なのかひと目でわかると便利なので設定する．\\
setting.jsonに以下を追加．
<code javascript>"editor.renderWhitespace": "boundary"</code>

==== 改行文字の可視化 ====
改行文字が\rなのか\nなのかわかると便利．\\
VSCodeはコマンドラインからプラグインをインストールする機能もあるので適当にシェルスクリプトを作って一括インストールできるようにしておくと良い．
<code>code --install-extension sohamkamani.code-eol</code>

初期設定の改行文字の色があまりよくないのでsettings.jsonに以下を追加
<code javascript>"code-eol.color":"#666"</code>

==== Activity Barの非表示 ====
デフォルトで表示されている左側にあるactivity barはデカくて邪魔なので，\\
機能を下のStatus Barのところに移して削除すると良い．\\
{{https://code.visualstudio.com/assets/docs/getstarted/userinterface/hero.png}}

activitus barというプラグインをインストールする．
<code>code --install-extension Gruntfuggly.activitusbar</code>

setting.jsonに以下を追加．
<code javascript>"workbench.activityBar.visible": false</code>

==== 特定の行に縦線を引く ====
プログラムの横幅が大きくならないように特定の行に縦線を入れて目印をつけておくと便利．\\
(PythonではPEP8などのコーディングルールによって「1行は80文字未満になるようにするべき」と定められている．)

setting.jsonに以下のように追加．(80行目，100行目，120行目に縦線が入る)
<code javascript>"editor.rulers": [ 80,100,120 ],</code>

==== Explorerのtree表示のインデントをもう少し深くする ====
デフォルトの設定ではインデントが浅くて視認性が低い．\\
setting.jsonに以下のように記述．
<code javascript>"workbench.tree.indent": 16</code>

==== minimapをショートカットキーで表示/非表示切り替えできるようにする ====
エディタの右側にファイルの全体が小さく表示された場所(ミニマップ)がある．\\
ファイルのどのあたりを編集しているかひと目でわかるので便利だが，\\
見なくてもいい時間も多いのでショートカットキーなどで表示非表示を切り替えられると便利．

keybindings.jsonに以下のように記述．\\
(OSによって初期設定のショートカットキーが多少違うため他の設定と衝突する可能性がある．\\
 以下の設定はUbuntuでは衝突しなかった．)
<code>
{
    "key": "ctrl+alt+a",
    "command": "editor.action.toggleMinimap"
}
</code>

==== Explorerの更新をショートカットに割り当てる ====
touchやmkdir，cp，mvなどでファイルを操作したときにVSCode側でファイルの変更を検知しないことが多いので\\
Explorerの更新を行う操作をキーボード・ショートカットとして用意する．\\
初期設定のショートカットと衝突するが，特に使わない機能であったので\\
この操作を行うように変更する．keybindings.jsonに以下を記述．
<code javascript>
 {   "key": "ctrl+r", "command": "-workbench.action.openRecent"   },
 {   "key": "ctrl+r", "command": "-workbench.action.reloadWindow",    "when": "isDevelopment"     },
 {   "key": "ctrl+r", "command": "-workbench.action.quickOpenNavigateNextInRecentFilesPicker",    "when": "inQuickOpen && inRecentFilesPicker"},
 {
     "key": "ctrl+r",
     "command": "workbench.files.action.refreshFilesExplorer"
 }
</code>

==== ファイルを選択するたびにExplorerが選択したファイルの位置に移動してしまうのを阻止 ====
編集するファイルを切り替えるたびに左にあるExplorerのツリーが見ているところではなく編集しているファイルのところに移動してしまって使いづらい．
<code javascript>"explorer.autoReveal": false</code>

==== VSCode の強制リロード ====

explorer の git color highlights が何故か反映されないときがあるので強制的に再起動したい。


linux なら ctrl alt h とかを割り当てとけばよいかと。
mac なら command r でも良さそう。

when を設定するときは true で。
===== まとめ =====

==== エディタ設定一覧 ====
^ 設定 ^ メモ ^
| ''"editor.renderWhitespace": "boundary",''     | 空白の可視化 |
| ''"editor.rulers": [ 80,100,120 ],''           | 特定の行に縦線を入れる |
| ''"code-eol.color":"#666",''                   | [拡張機能 sohamkamani.code-eol]の設定，改行コードの色を変更 |
| ''"workbench.activityBar.visible": false,''    | ActivityBarの非表示\\ 代わりに[拡張機能 Gruntfuggly.activitusbar]をインストール |
| ''"editor.minimap.enabled": false,''           | ミニマップの非表示\\ ショートカットで自動的に設定が切り替わるので設定ファイルに書く必要はない． |
| ''"workbench.tree.indent": 16,''               | ツリービューのインデントの深さを変える． |
| ''"workbench.startupEditor": "none",''         | welcomeページを表示しないようにする． |
| ''"extensions.ignoreRecommendations": true,''  | 拡張機能のインストールを勧めてこないようにする． |

==== キーボードショートカット ====
^ キー ^ 機能 ^
| ''Ctrl''+''b'' | サイドバーの表示非表示 |
| ''Ctrl''+''Alt''+''a'' | ミニマップの表示非表示 |
| ''Shift''+''Alt''+''↓'' | マルチカーソルを下に追加 |
| ''Ctrl''+''r'' | ファイルエクスプローラーの更新 |

==== 設定ファイル ====
=== エディタ設定 ===
<file javascript settings.json>
{
    "editor.renderWhitespace": "boundary",
    "editor.rulers": [ 80,100,120 ],
    "code-eol.color":"#666",
    "workbench.activityBar.visible": false,
    "editor.minimap.enabled": false,
    "workbench.tree.indent": 16,
    "workbench.startupEditor": "none",
    "extensions.ignoreRecommendations": true,
    "explorer.autoReveal": false
}
</file>

=== ショートカット設定 ===
<file javascript keybindings.json>
// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "ctrl+alt+a",
        "command": "editor.action.toggleMinimap"
    },
    {   "key": "ctrl+r",            "command": "-workbench.action.openRecent"   },
    {   "key": "ctrl+r",            "command": "-workbench.action.reloadWindow",    "when": "isDevelopment"     },
    {   "key": "ctrl+r",            "command": "-workbench.action.quickOpenNavigateNextInRecentFilesPicker",    "when": "inQuickOpen && inRecentFilesPicker"},
    {
        "key": "ctrl+r",
        "command": "workbench.files.action.refreshFilesExplorer"
    }
]
</file>

=== インストールシェルスクリプト ===
<file bash install_extention.sh>
code --install-extension sohamkamani.code-eol
code --install-extension Gruntfuggly.activitusbar
code --install-extension ms-vscode-remote.remote-ssh

code --install-extension ms-vscode-remote.vscode-remote-extensionpack
</file>

vscode-remote-extensionpack には
  * remote-ssh
  * remote tunnel
  * dev containers
  * wsl
が含まれる

===== エラー解決 =====
  * ''Unable to watch for file changes in this large workspace. Please follow the instructions link to resolve this issue.''\\ ワークスペースにあるファイルの数が設定の上限に達したときのエラー\\ [[https://qiita.com/neuwell/items/c827c80673de0d787d41]]

====== 未整理メモ ======

=== 非表示ファイルのカスタム ===

''.git'' フォルダを表示したい。設定に以下を追加。
<code javascript>
    "files.exclude": {
        "": true,
        "**/.git": false
    }
</code>

=== リモートのフォルダを直接コマンドで開く ===

<code bash>
code --folder-uri=vscode-remote://ssh-remote+kamex/path/to/dir
</code>

=== ワークスペースを簡単に見分けられるようにする ===

  * workspace ごとにタイトルバー(title bar)の色を変えて、リモートなのか(どのサーバーなのか)、ローカルなのかを見分けやすいようにする。
  * ウィンドウのタイトルの個所に表示される文字を変える

<code javascript hoge.code-workspace>
{
    "settings": {
        "window.title": "LOCAL",
        "workbench.colorCustomizations": {
            "titleBar.activeBackground" : "#4aa1c4",
            "titleBar.activeForeground" : "#003366",
            "titleBar.inactiveBackground" : "#4aa1c4",
            "titleBar.inactiveForeground" : "#003366",
        }
    }
}
</code>

色のアイディア
  * 水色系 : 背景 #4aa1c4, 文字 #003366
  * 紫色系 : 背景 #663399, 文字 #e6e6ff
  * 橙色系 : 背景 #ffa500, 文字 #663300