Windows10にVSCodeをインストールしたするときの初期設定をご紹介します。
ベーシックな設定なので、開発言語や職種に関わらず、参考にしていただければうれしいです。
導入環境
VSCode: ver1.36
OS: Windows10
日本語化
まずはメニューを日本語化する。
- Ctrl + Shift + X でサイドバーに"EXTENSIONS"を表示
- 検索ボックスで「Japanese Language Pack」を検索しインストール
- Ctrl + Shift + P でコマンドパレットに"config"を入力し、プルダウンに表示された"ja"を選択
- 案内に従い、VSCodeを再起動すると、日本語化が完了
Tabキーでスペースを入力
メニュー[ファイル]-[基本設定]-[設定]で
"Insert Spaces" にチェックを入れる。
スペースの数は、"Tab Size" で設定。
（半角）空白文字の表示
[ファイル]-[基本設定]-[設定]で
"Render Whitespace"で all に設定する。
行を画面幅で折り返す
行を画面幅で折り返す（横スクロールを出さない）ようにしたい。
[ファイル]-[基本設定]-[設定]で
"Word Wrap" を on に変更する。
ファイルタブ切り替えのショートカット変更
ファイルのタブ切り替えがデフォルトでは、
次のファイル：Ctrl + PageUp
前のファイル：Ctrl + PageDown
となっている。
これを次のように変更したい。
次のファイル：Ctrl + tab
前のファイル：Ctrl + shift + tab
[ファイル]-[基本設定]-[キーボードショートカット]
メニュー右上にあるアイコン「｛｝」で、keybindings.jsonを開き、以下を追加する。
[
{
"key": "ctrl+tab",
"command": "workbench.action.nextEditor"
},
{
"key": "ctrl+shift+tab",
"command": "workbench.action.previousEditor"
}
]
インデントのガイド線の表示切替
デフォルトでインデントのガイド線（タテの線）が表示されるが、これを非表示にしたい。
[ファイル]-[基本設定]-[設定]で
"Render Indent Guides"のチェックを外すと非表示になる。
テーマ配色の変更
テーマの配色をカスタマイズしたい。
[ファイル]-[基本設定]-[設定]で
メニュー右上にあるアイコン「｛｝」で、settings.jsonを開き、設定を追加する。
以下例では、カーソル行の背景に色をつける、という場合。
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#FFF0F5", //カーソル行に背景色
},
配色について公式リファレンス
https://code.visualstudio.com/api/references/theme-color
文字コードの自動判定
デフォルトでOFFとなっているのを、ONにする。
メニュー[ファイル]-[基本設定]-[設定]で
"Auto Guess Encoding" の有効にチェックを入れる。
以上になります。
参考
https://qiita.com/HiroCh/items/481adfa969dbe689f566
https://qiita.com/ustakr/items/acad8dc12c166c2ad5e9
https://qiita.com/deren2525/items/6bc099ae8c05e3076055
https://www.off-soft.net/ja/software/develop2/visual-studio-code-preuse-settings.html