vscde の設定をいじってみる

はじめに

設定方法

設定方法は一つだけじゃない

1. vscode の設定画面を開いて設定を変更する
   設定を開く(cmd + , もしくは ctrl + ,)
2. settings.json を編集する
   設定を開き(cmd + , もしくは ctrl + ,)、検索バーにsettings.json と入力する。
   すると「settings.json で編集する」と表示されるはずなので、それをクリックすると開ける。

の2種類ある。

実際に設定を変えてみる

• vscode の設定画面を開いて設定を変更する
  検索バーに font size と入力し検索
  
  画像の数字を変更することで、vscode 内でのフォントサイズを変更できる。

---

• settings.json を編集する
  設定を開き(cmd + , もしくは ctrl + ,)、検索バーにsettings.json と入力する。
  すると「settings.json で編集する」と表示されるはずなので、それをクリックすると開ける。

{
    "editor.fontSize": 10,
}

さらに他にも追加する場合は下に追加していく。

{
    "editor.fontSize": 10, // フォントサイズ
    "workbench.colorCustomizations": { // カラーの設定ができる
        "editorLineNumber.foreground": "#CCCCCC", // 行番号の色を設定
    	"editorLineNumber.activeForeground": "#FF6666", // アクティブ行番号の色を設定
    }
}

行番号の色も変えられるみたい。

---

片方を編集すればもう片方にも反映されるため、どちらで設定を変更しても反映される。
個人的には settings.json での設定の方が好み。(丸ごとコピーしてどこかに控えておけばコピペで別PCでも同じ設定が使えるし。)

他に

拡張機能の設定もできる。
indent-rainbow の色を変えてみる。

{
    "editor.fontSize": 10, // ↑ で設定したフォントサイズ
    "workbench.colorCustomizations": { // カラーの設定ができる
        "editorLineNumber.foreground": "#CCCCCC", // 行番号の色を設定
    	"editorLineNumber.activeForeground": "#FF6666", // アクティブ行番号の色を設定
    },
    "indentRainbow.colors": [    
        "#8B000030",
        "#00FF0030",
        "#0073e630",
        "#FFFF0030",
        "#bd19b830",
        "#00FFFF30"
    ],
}

見やすいかは置いておいてこんな風に色を変えられる。

まとめ

調べてみると結構細かく設定を変えられるみたい。
いろいろ変更してみて自分が使いやすい、見やすいカスタマイズにできるからいいですね〜。