🖖

Visual Studio Codeのインストールと設定と拡張と僕

2021/11/21に公開

VS Code

idea

概要

Visual Studio Code(以下VS Code)インストールと、日本語化、テーマの変更、おすすめ拡張機能インストールとかやる。

環境

Windows10 20H2
VS Code バージョン1.63.0

インストール

何はともあれインストール

下記VS Codeのページにアクセスし、Download now！(デビッドカッパーフィールド。古い)。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
User InstallerとSystem Installerとzip版がある。どれでもいいが、今回はUser Installer版の64bitをクリック。
インストーラーを実行
同意する→次へ
インストール場所を選んで次へ(今回はデフォルトのまま)
スタートメニューの名前を決めて次へ(今回はデフォルトのまま)
何か追加したいタスクがあったらチェックして次へ。今回はエクスプローラーに「Codeで開く」のアクションを追加した。

1.　今まで選択した内容が表示される。インストール。

オワタ。完了。

日本語化

ワシは日本男児じゃけえ日本語化する。

左端にある拡張機能のアイコンをクリックし、検索欄に「japanese language」と入力する。候補に「Japanese Language Pack for Visual Studio Code」が表示されるので「Install」。
数秒でインストールが完了する。完了したら右下に「再起動させてえなあ」と表示されるので「Restart」。俺たちの戦いはこれからだ！
日本語化されたってばよ。

テーマ変更

公開されている配色テーマを適用する

VS Codeではいろんな配色テーマが公開されているので、デフォルトのテーマが見にくかったりするようであればテーマを変える。

手順

下記サイトにいろいろなテーマが公開されている。どのブラウザで開いてもいいっちゃいいが、後でブラウザからVS Code開くときに楽なのでChromeを推奨。
https://vscodethemes.com/
好きなテーマにマウスを乗せると「View Extension」と表示されるのでクリックする。
画面が表示されるので「Open in VSCode」をクリックする。
ブラウザからメッセージが表示されるので、「Visual Studio Codeを開く」をクリックする。
※Chrome以外のブラウザだと、直接VS Codeで開かれず、プログラムを選択する必要があるかも。
VS Code上でそのテーマの詳細が表示される。「インストール」
テーマの中には、更に複数パターンに分かれているものもある。選んで確定する。
すでにVS Codeにインストールされているテーマから選びなおす場合は、ショートカットキーでCtrl+k → Ctrl+tで選ぶことができる。

配色テーマを自由にカスタマイズ

公開されている配色テーマを適用するの項目で配色テーマを選ぶ方法を書いたが、更にカスタマイズしたい場合もあるかと思う(というかどのテーマも大体おしゃれぶってコントラスト低くて見にくい、タブの境界線とかはっきりせーや)。
その場合はテーマを定義しているjsonファイルを編集することでカスタマイズすることができる。

ここではデフォルトのdark+テーマをコピーしてdark customとして変更する手順を説明する。
(コピーせずに元のテーマを変更してしまうとVS Codeバージョンアップ時に元に戻ってしまう)

手順

C:\Users\[ユーザー名]\AppData\Local\Programs\Microsoft VS Code\resources\app\extensionsにあるtheme-defaultsのフォルダを、C:\Users\[ユーザー名]\.vscode\extensions配下にコピーする。
※上記パスは、デフォルト設定でVS Codeをインストールした場合のパス。
コピー先のtheme-defaults内のpackage.jsonをVs-Codeで開く。
1行になっていてわかりにくいので、右クリックしてドキュメントのフォーマットで見やすくする。
先頭にあるnameの値をtheme-defaultsからtheme-customに変更する。
※変更しないと、元々あるデフォルトテーマとかぶって、テーマを上書きしてしまう感じになる。
contibutesオブジェクト内で下記のように変更して保存する。
- idがDefault Dark+のものに対し
  - idをDark Customに変更
  - LabelをDark Customに変更
  - uiThemeはvsかvs-darkかhc-blackにする。これはテーマの基本カラーとなるもの。
- それ以外のidのものは不要なので消す。
themesフォルダを開き下記を実施する。
- hc-black.json、light_plus.json、light_vs.jsonは不要なので消す。
- dark_vs.jsonをVS Codeで開く
  ※dark_plusは残しておく。今回はdrak_plusを変更する目的だが、内部的にはdark_vsを引用しているので、実際の変更はdark_vsに対して行う。
Dark Customテーマを選択しておく、変更時にわかりやすいので。
Ctrl+k → Ctrl+t → Dark Custom
※Dark Customが表示されていない場合は、VS Codeを再起動すると出るはず。
colorsオブジェクト内で文字を入力すると、使えるキーが補完入力される。
どんなキーがあるかは補完入力でいろいろ試してみたり、ネットの情報を参照したり。
参考：Visual Studio Codeの設定「虎の巻」：配色編：特集：Visual Studio Codeを使いこなせ（2/4 ページ） - ＠IT
そのキーに対し、値(色)を設定する。色はカラーパレットでも指定できる。
必要なキーを設定したら、jsonファイルを保存する。しかしその場で色が反映はされないので、画面のリロードが必要になる。
Ctrl+Shift+pを押すとコマンドパレットが表示されるので、「reload windows」と入力し、候補に表示された「ウィンドウの再読み込み」をクリックする。
それで色が反映される。気に入らなかったらjsonファイルを修正して同じ作業を繰り返す。
ちなみに自分の設定。
- package.jsonで、uiThemeを「hc-black」に変更。これで基本のテーマがハイコントラストになり、境界線などがくっきりする。
- dark_vs.jsonの設定

"editor.background": "#000000",
"editor.foreground": "#D4D4D4",
"editor.inactiveSelectionBackground": "#3A3D41",
"editorIndentGuide.background": "#636363",
"editorIndentGuide.activeBackground": "#ff0000",
"editor.selectionHighlightBackground": "#ADD6FF26",
"list.dropBackground": "#383B3D",
"activityBarBadge.background": "#cc0000",
"sideBarTitle.foreground": "#fffdfd",
"input.placeholderForeground": "#A6A6A6",
"menu.background": "#252526",
"menu.foreground": "#CCCCCC",
"statusBarItem.remoteForeground": "#FFF",
"statusBarItem.remoteBackground": "#16825D",
"ports.iconRunningProcessForeground": "#369432",
"sideBarSectionHeader.background": "#86868667",
"sideBarSectionHeader.border": "#00acf0cb",
"tab.lastPinnedBorder": "#f00000cb",
"list.activeSelectionIconForeground": "#FFF",
// 以下追加キー
"list.focusOutline": "#ff0000",	//リストやツリーがアクティブな場合の、フォーカスされた項目のリストやツリーのアウトライン色
"editorGroup.border": "#ff0000",	//複数のエディター グループを互いに分離するための色
"editor.selectionHighlightBorder": "#ffee00",	//選択範囲と同じコンテンツの境界線の色
"editor.findMatchBorder": "#ffee00",	//現在の検索一致項目の境界線の色
"editor.findMatchHighlightBorder": "#ffee00",	//他の検索一致項目の境界線の色
"editor.findMatchHighlightBackground": "#ffee0031",	//その他の検索条件に一致する項目の色。
"editor.findMatchBackground": "#ffee00",	//現在の検索一致項目の色
"editor.rangeHighlightBackground": "#1135ff79",	//(Quick Open や検出機能などにより) 強調表示されている範囲の色
"editorBracketMatch.border": "#ff0000",	//一致するかっこ内のボックスの色
"minimap.background": "#202020",	//ミニマップの背景色。
"sideBar.background": "#161616",	//サイド バーの背景色。
"button.background": "#1990ff",	//ボタンの背景色。
"button.border": "#1990ff",	//ボタンの境界線の色。
"statusBar.background": "#1900ff",	//ワークスペースまたはフォルダーが開かれているときのステータス バーの背景色
"statusBar.border": "#00000000",	//サイドバーとエディターを隔てるステータス バーの境界線色
"activityBar.background": "#3A3D41",	//アクティビティ バーの背景色
"titleBar.activeBackground": "#3A3D41",	//ウィンドウがアクティブな場合のタイトル バーの背景色
"titleBar.inactiveBackground": "#000000",	//ウィンドウが非アクティブな場合のタイトル バーの背景色
"titleBar.inactiveForeground": "#A6A6A6",	//ウィンドウが非アクティブな場合のタイトル バーの前景色
"tab.inactiveBackground": "#252526",	//非アクティブ タブの背景色。
"tab.inactiveForeground": "#A6A6A6",	//アクティブ グループ内の非アクティブ タブの前景色。
"tab.unfocusedActiveBackground": "#252526",	//フォーカスされていないグループ内のアクティブ タブの背景色。
"tab.unfocusedActiveForeground": "#A6A6A6",	//フォーカスされていないグループ内のアクティブ タブの前景色。
"tab.unfocusedInactiveForeground": "#A6A6A6",	//フォーカスされていないグループ内の非アクティブ タブの前景色。
"editorGutter.background": "#161616",	//エディターの余白の背景色。
"editor.lineHighlightBackground": "#161616",	//カーソル位置の行を強調表示する背景色。
"editor.lineHighlightBorder": "#ff0000",	//カーソル位置の行の境界線を強調表示する背景色。
"activityBar.foreground": "#ff8800",	//アクティブなアクティビティ バー項目の前景色。
"editorSuggestWidget.selectedIconForeground": "#FFEE00",	//候補ウィジェット内で選択済み入力のアイコン前景色。
"editorSuggestWidget.focusHighlightForeground": "#FFEE00",	//項目がフォーカスされている場合に、候補ウィジェットでの一致の強調表示の色
"editorSuggestWidget.selectedBackground": "#383B3D",	//候補ウィジェット内で選択済みエントリの背景色。
"selection.background": "#1900ff",	//ワークベンチ内のテキスト選択の背景色 (例: 入力フィールドやテキストエリア)。
"editorWhitespace.foreground": "#16825d",	//スペース文字の前景色
"gitDecoration.addedResourceForeground": "#00a808",	//Gitで追加したリソースの色
"diffEditor.diagonalFill": "#3a3d41",	//差分エディターの対角線の塗りつぶし色。
"diffEditor.insertedTextBackground": "#9bb95533",	//挿入されたテキストの背景色
"diffEditor.insertedTextBorder": "#00000000",	//挿入されたテキストの輪郭の色
"diffEditor.removedTextBackground": "#ff000033",	//削除したテキストの背景色
"diffEditor.removedTextBorder": "#00000000",	//削除されたテキストの輪郭の色
"list.hoverBackground": "#333333"	//マウス操作で項目をホバーするときのツリーリスト背景

こんな感じになる。ごちゃごちゃしてるけどこういうのでいいんだよ。

設定

設定画面はメニュー→ユーザー設定→設定、で開ける。

フォント

デフォルトのフォント、日本語が等幅じゃなくなあい？
プログラミングに適したMyrica Mというフォントをインストールしよう。似ている文字もちゃんと識別できるようになる、0(ゼロ)とO(オー)とか1(イチ)とI(アイ)とl(エル)とか。

フォント変更手順

Myricaのサイトにアクセス。
https://myrica.estable.jp/
ページ真ん中あたりにあるフォントをダウンロード。今回はMyricaM.ttc。7zip版でもzip版でも同じ。
zipファイルを展開したらMyricaM.TTCをダブルクリックで開く。
フォントファイルが開かれたらインストール
特に大した表示なかったはずだけどインストールは終わっている。zipおよび展開したファイルは削除しちゃってよい。
VS Codeの設定画面でテキストエディター→フォントで、Font Familyの欄の先頭に
'MyricaM M' と入力する(シングルクォーテーションで囲む)。あと隣のフォントとはカンマで区切る。なんでここフリーテキスト入力なん？間違えるやん。
ごめん、SyricaM Mはフォントサイズ14だとちょっと見にくい気がした、フォントサイズ16にするわ。見にくい人は、他のプログラミング用フォント使ってください…。

デフォルトターミナルをGit Bashに

Gitを使うときだったりNode.Jsのコマンドを使うときだったり、PowerShellでもいけるけどGit Bashを使おうと思うんだ。事前に下記Gitインストールが完了していること。

で実際の変更手順は下記。

手順

ネットで調べるともっとややこしいやり方が出てくるけど、下記の手順ポチポチでいけた。インストール版VS Codeだから出来るだけ？知らんけど。

VS Codeを開いたら、Ctrl + @でターミナルを開く。デフォルトはコマンドプロンプトだったような…。
ターミナルパネルの右側にある＋の横にあるプルダウンメニューを開き、既定のプロファイルの選択をクリック。
今度はウィンドウ上側のあたりに選択メニューが表示されるので、Git Bashを選ぶ。
次からターミナルを開くと、Git Bashで開かれるようになる。
ついでに、ターミナルのフォントが小さくて見にくかったので設定でフォントサイズを14から16に上げる。
メニューの設定を開き、絞り込み欄で「terminal font」と入力し、表示されたFont Sizeを変更する。

スペースを表示する

スペースを意味する・を表示するようにする。

手順

設定画面の絞り込みでwhitespaceと入力し、表示されたEditor:Render Whitespaceで好きな表示方法を選ぶ。個人的にはboundary。
- none：表示しない
- boundary：単語間の単一スペース以外の空白文字を表示する
- selection：選択したテキストにのみ空白文字を表示する(既定)
- trailing：末尾の空白文字のみを表示する
- all：すべての空白文字を表示する
(boundaryの例)先頭のスペースは表示、単語間の単一スペースは非表示、単語間でも2以上のスペースは表示、となっている。

括弧ペアの表示方法変更

テーマでも色付けたりしてるけど、更に設定で括弧ペアの表示方法を変える。

手順

設定画面の絞り込みでbracketと入力し、表示されたEditor > Bracket Pair Colorization:Enabledのチェックを入れる。
表示はこんな感じに変わる。(対応する括弧ごとに色が変わる)
ついでにBracket Pair Colorizationの下にあるEditor > Guides:Bracket Pairsの設定をtrueに変える。
表示はこんな感じに変わる。

ファイルを新しいウィンドウで開く

デフォルトでは、すでにVS codeで何かのファイルを開いているとき他のファイルを開くと、同じウィンドウの別タブで開く。好みの問題だが、新しいウィンドウで開くようにする。

手順

ウィンドウ→新しいウィンドウ→Open Files In New Windowの設定をonかdefaultに変える。

拡張機能

拡張機能は左端の拡張機能アイコンをクリックしてから検索する。

全角スペースを表示(zenkaku)

全角スペースを表示したい───僕はそんな想いでいっぱいだった。

説明

検索で「zenkaku」と入力して出てきたやつをインストール。
こんな感じに表示が変わる。
機能をオンオフを切り替えたい時は、コマンドパレット(Ctrl＋Shift＋p)欄でzenkakuと入力するとEnableとDisableの候補が出てくるので、切り替えたい方をクリックする。

Gitの変更履歴をグラフで見たい(Git Graph)

Gitの変更履歴をグラフで見たい──僕はそんな想いでいっぱいだった。

説明

検索で「git graph」と入力して出てきたやつをインストール。
※ちなみにその下の「Git History」も同様の拡張機能。だが調べた感じだと個人的にはGit Graphの方が好みだったので今回はGit Graphにした。
左端のアクティビティバーでソース管理のアイコンをクリックし、ソース管理のセクションでView Git Graph (git log)のアイコンをクリックする。そうするとエディタ領域にグラフが表示される。
※画像だと全然ブランチ分けてないから参考にならないが、ブランチが分かれているとカラフルに表示される。
コミットをクリックすると詳細が見られる。

ショートカット

よく使うショートカットキーを適宜追加。

キー	名称	説明
Ctrl + Shift + p	コマンドパレットを開く	VScodeでなんかするときは結構コマンドパレットを使う。
Ctrl + p	クイックオープン？	一見コマンドパレットと同じ感じの入力欄が出るけど、ワークスペースとか開いてるファイルを検索したいときなどに使う
Alt + ↑か↓	行移動	今いる行の内容を上下に移動する
Shift + Alt + ↑か↓	行コピー	今いる行の内容を上下にコピー