普段VSCodeをメインのエディタにしています。
この記事では自分の設定を紹介していますが、ほぼ自分のための備忘録です。
基本的な設定
VSCodeのデフォルトで設定可能な設定は、すべてJSONの設定ファイルで管理しています。
JSON設定ファイルの開き方
- VSCode上で
ctrl+shift+Pでコマンドパレットを開く open settingsと検索Preferemces: Open Settings (Json)を選択
カラーテーマをMonokaiへ
"workbench.colorTheme": "Monokai",ミニマップ（エディタ横の縦長のマップ）のオフ
"editor.minimap.enabled": false,保存時に末尾のスペースは削除
"files.trimTrailingWhitespace": true,マウスホイールでズーム
"editor.mouseWheelZoom": true,長い行は折り返し
"editor.wordWrap": "on",フォントの設定
フォントにはRictyを普段から使っているので、WindowsにRictryをインストールした上でVSCodeにも登録します。
Rictyのインストール
ttfファイルのダウンロード
下記から、zipファイル形式でダウンロードします。
フォントのインストール
Step1でダウンロードしたzipファイルを展開します。
解凍したディレクトリ内に含まれるファイル（.ttf）をすべてダブルクリックして、インストールボタンを押します
VSCodeにフォントの設定を追加
VSCode上でctrl+shift+Pでコマンドパレットを開き、open settingsと検索し、Preferemces: Open Settings (Json)を選択します。
下記を追加します。
"editor.fontFamily": "Ricty Diminished",VSCodeにフォントを設定する
"editor.fontFamily": "Ricty Diminished",
"terminal.integrated.fontFamily": "Cascadia Code",
"editor.fontSize": 16,端末のフォントには、MicrosoftがWindowsターミナル用に開発したCascadia Codeを利用しています。
参考：https://docs.microsoft.com/ja-jp/windows/terminal/cascadia-code
ショートカット関係
VSCodeではショートカットを簡単に追加できるで、よく利用する機能にショートカットを追加します。
ショートカットの追加方法
ショートカットの追加方法を紹介します。
- コマンドパレットを起動 (
ctrl + shift + P) Prederence: Open Keyboard Shortcutを選択
上記の操作で、登録されているコマンドとKeyBindingの一覧が出てきます。
ショートカットを追加したいコマンドを検索し、対象のコマンドをダブルクリックすることでショートカットを追加することが可能になります。
追加するショートカット
自分が必ず追加するショートカットです。
| ショートカット | コマンド | 説明 |
|---|---|---|
| ctrl + shift + J | View: Toggle Maximized Pannel | 端末ウィンドウをフルサイズで表示 |
よく利用するデフォルトのショートカット
| ショートカット | 挙動 |
|---|---|
| ctrl + J | 端末パネルの表示/非表示 |
| ctrl + B | サイドパネルの非表示 |
| ctrl + shift + K | 行を削除 |
| alt + cursor-key | 行を移動 |
拡張機能
必ずインストールする拡張機能です。
| 拡張機能 | 説明 |
|---|---|
| vscode-icons | アイコンを綺麗に表示 |
| YAML | yamlの編集が楽になる |
| RainbowCSV | CSVファイルをきれいに表示する |
| Remote SSH/Container/WSL | リモート開発に必須 |
| Prettier – Code formatter | コードフォーマット |
