Visual Studio Codeを限りなくJetBrainsの挙動に近づける(PyCharm, WebStormなど)

Jetbrainsの製品を使っていたのだが無料期限が切れちゃうのでVS Codeで挙動を再現しました

全体的な見た目を変える

Darcula Theme という拡張機能をインストールすると全体的にPycharmっぽくなります拡張機能の検索の仕方はサイドバーの拡張機能のアイコンをクリックすると出てきます。拡張機能のリンクはこちら marketplace.visualstudio.com

アイコンを変える

こちらも拡張機能をインストールする拡張機能のリンクはこちら marketplace.visualstudio.com

キーマップを変える

拡張機能を入れる

marketplace.visualstudio.com

フォントを変える

次にフォントを変えていきます。⌘+ , または Ctrl + ,で設定画面を開き、editor.fontと入力

まずはフォントサイズを変更する。Editor: Font Sizeの値を13に変更する。

変更後はこのような見た目になっています。

次に JetBrains のフォントをパソコンにインストールします。申し訳ないですが長くなるので以下の記事を読んで各自お願いします。

qiita.com

フォントが変更されない場合は VS Code を再起動させてみてください。

ターミナルの文字の大きさを変える

設定画面で、terminal.fontと検索し、Terminal>Integrated: Font Sizeの値を14に変更する。

ターミナルのフォントはデフォルトでエディタと同じものになるので、何も触らなければ JetBrainsのフォントになっているはずです。

ファイルをクリックしても開かないようにする

VSCode に移行してから一番変えたかったのはこの挙動。サイドバーのファイルをクリックすると勝手に開いてしまうんですよね。これはプレビューモードというらしく、名前の通りワンクリックでファイルの中身が見れる仕様です。Jetbrainsの製品ではダブルクリックでファイルが開くのでVS Code もその挙動に合わせます。

⌘ + Shift + P or Ctrl + Shift + Pでパレットを開き、setting.json と入力し、ユーザー設定を開くをクリックし、setting.json を開く。文末に以下のコードを追加

"workbench.list.openMode": "doubleClick",

ディレクトリをクリックしても展開しないようにする

設定画面で workbench.tree.expandMode と検索し、double clickに変更

サイドバーのファイルの背景

マウスオーバーしても色を変更させないためには、list.hoverBackgroundを追記。RGBでは透明にできないのでサイドバーの背景の色と同じにして対応しています。別のテーマを使ってる人はカラーピッカーを使ってカラーコードを取得してください。

    "workbench.colorCustomizations": {
         // (略)
        "list.hoverBackground": "#3C3F41",

    },

そのほかサイドバーの色の設定

    "workbench.colorCustomizations": {
        "list.focusBackground": "#2F65CA", //サイドバーをカーソル移動してるときの背景色
        "list.focusForeground": "#fff", // サイドバーをカーソル移動してるときの文字色
        "list.inactiveSelectionBackground": "#0D293E", // ファイルをクリックしたあと別の画面をクリックしたときの背景色
        "list.inactiveFocusBackground": "#0D293E" // サイドバーでカーソル移動したあと別の画面をクリックしたときの背景色
    },

使用していない変数の色を変える

Jetbrains では未使用の変数のコードを灰色に表示してくれるのですが、調べた限りVS Codeではそのような機能は見つかりませんでした。未使用コードの設定は editorUnnecessaryCodeで管理されているのですが、変更できることはボーダーラインをつけることと、透明度を変えることの２つだけでした。

透明度を変えると言っても色は元の色を保持されるのでこんな感じで見分けがつきにくくイマイチピンとこない。

裏技的に、VS Code のcssファイルの設定をいじれば再現できそうな気がするのですが、stack overflow で教えてくれていることは、変数名のcssの色の変え方だけで、未使用コードが含まれている文章全体の色の変え方ではないんですよね。(ちなみに VS Code は Electron で作られているので、見た目は全て CSS で調整してあるのでこの方法が使えます)

visual studio code - Change color of unused variable/imports - Stack Overflow

VS Code の各パーツのクラス名も探せば見つかるのでしょうが諦めました。なので代わりに未使用の変数はピンク色のボーダーラインを引く設定にしました。

setting.jsonに以下のコードを追記してください。なお、透明度のopacity は末尾のcの文字を 0〜fに変えることによって薄くしたり濃くしたりできます。この値についての原理は分かりません。カラーコード見た目でカラーコードでもない。

    "workbench.colorCustomizations": {
         // (略)
        "editorUnnecessaryCode.border": "#f0f",
        "editorUnnecessaryCode.opacity": "#000c"
    },

ドキュメント

基本はググったらstackoverflowで出てくるのですが、出てこない場合はこのサイトのサイドバーから探せば見つかる

code.visualstudio.com

途中。必要な調査

JetBrainsではサイドバーをカーソルで移動させるとファイルの active と focusが同時に起こるが、VSCodeだとカーソル移動がfocusでクリックしたときがactive&focus状態になるから背景色が統一できない。何か設定がありそう。

空きっ腹のブルース

お腹が空いた冬