VSCodeをより使いやすくする設定——フロントエンド開発の視点から

☝🏻後ほど動画で説明する予定です。設定の効果は実際に動きを見せないと違いが分かりにくいためで、ブログにGIFを作るのが面倒だからです。

はじめに

フロントエンドの勉強を始めた頃、VSCodeはまだなく、WebStormを使っていました（当時学生で、違法コピーを使っていました）。すぐに使える体験は素晴らしかったです。しかし、オフィスPCのスペック低下、4Kやマルチディスプレイでのカクつき問題が長年解決されないこと、同僚の影響もあり、最終的に「設定の同期」機能が決め手となりVSCodeに移行しました。

独立したホバー検索ボックスがないという重大な違和感に慣れた後、すぐに自分にとって使いやすい設定を見つけました。以下で詳しく説明します。もしもっと良い設定があると思われる方は、コメント欄に理由と効果のスクリーンショットを添えて教えてください。

📖デフォルト設定は基本的に説明しません（特に便利な場合を除く）。デフォルトから変更した部分に焦点を当てます。VSCodeでは「右側のミニマップに現在行を表示するか」など、ほとんどの設定が変更可能で素晴らしいです。

見た目

テーマ/フォント

テーマはOne Dark Proを使用：

marketplace.visualstudio.com https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

フォントはFira Code：

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures プログラミング用リガチャー付きの無料等幅フォント。tonsky/FiraCode開発にGitHubアカウントで貢献しよう。 https://github.com/tonsky/FiraCode?tab=readme-ov-file#download--install

Fira Codeは公式推奨フォントで、社内でも使用されています。

Fira Codeは特定の記号の変種サポートが優れており、===や<=などが美しく表示されます（一部は手動で文字セットと変種を有効にする必要があります）：

Fira Codeのデフォルトの&記号が苦手な人も多いですが、設定で変種を無効にできます。詳細はGitHubの説明を参照してください。私の設定は：

1
2
3
4
5

{
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontFamily": "'Fira Code', Monaco, 'Courier New', monospace",
  "editor.fontLigatures": "'ss01', 'ss02' off, 'ss03', 'ss04', 'ss05', 'ss07', 'cv29', 'cv28', 'cv13'"
}

また、行間は1.4、フォントサイズは13です。

エディタ

最も重要なのがエディタ設定です。良いエディタはコーディング効率を上げるためにあります。以下で個別に説明します。

空白文字の表示

私はデフォルトのselection設定を使用しています。つまり、選択範囲内に空白文字（スペース）がある場合のみ表示され、それ以外は表示されません。常に表示するboundary設定は見た目が悪いです：

自動で括弧を追加/削除

これらの設定は、開始括弧（({[など）を入力すると自動的に終了括弧（)}]）が生成される機能です。削除時も同様にペアで削除されます。デフォルトでは挿入時にペア生成、削除時もペア削除です。

括弧の色付け（プール）

最初の設定を有効にすると、各括弧に色が付きます（白一色ではなく）。二つ目の設定を有効にすると、括弧の種類ごとに独立した色設定が適用されます（実際には異なる括弧でも色が重複しますが、表示順ではなく括弧種類ごとの順序で色付けされます——私の理解とテストによる）。

矩形選択

デフォルトでは上から下に選択すると、行頭や行末を通過すると行全体が選択されます：

この設定を有効にすると、マウス選択が矩形選択になります（コード位置ではなくマウス位置に基づく選択）。JSONのキーなど、複数行の類似したインデントを同時編集する際に便利です：

補足：ターミナルで選択中にOptキーを押すと同様の効果が得られます。

コピー時にシンタックスハイライトを保持

リッチテキストエディタによっては特別な処理がなく、VSCodeから直接コードをコピーすると色情報も一緒にコピーされてしまいます。これは通常望ましくありません。この設定で色なしでコピーできます。

ドラッグ操作

私は長年コーディングしてきましたが、「ドラッグ」でコードブロックを移動する操作はほとんど使わないので、無効化を推奨します。二つ目の設定は、shiftを押しながらファイルをVSCodeにドラッグすると、メディアファイルの場合ファイル名のみ表示され、shiftなしでドラッグするとメディアファイルが開きます。予期せぬ用途に備えて便利です（デフォルトで有効）。

空選択時の現在行コピー

選択範囲がなくカーソルだけの状態でコピー操作をすると、現在行全体が選択されます。現在行のコピーが簡単になります（デフォルトで有効）。

自動折りたたみ

コード折りたたみは確実に必要です。折りたたみ範囲のハイライトも必要です（マウスが行を通過する効果や現在行のハイライトと同様）。そうしないと、現在の行が折りたたまれているかどうか分かりません。最後に、import部分の自動折りたたみは不要だと思います。

折りたたみに関しては、私は常に表示される設定を好みます。この機能は非常に頻繁に使用するため、毎回ホバーして折りたたまれている行を確認し、クリックして展開するのは効率が悪いからです。一目でどこが折りたたまれているか分かるようにしたいので、alwaysに設定する必要があります：

括弧/インデントガイド

以下の図のようになりますが、「インデントガイド」が何かテストできなかったので、とりあえず有効にします。

ホバー時のポップアップ表示位置

通常、コードは上から下に読んでいくため、この設定ではコードをホバーした際にポップアップが上に表示され、内容が遮られます。ポップアップを消して再表示させるためにマウスを動かす必要があり、お勧めしません。

ホバー時のヒント表示

マウスを外した時は表示したくないので、直接0に設定します。

マウスでのフォントサイズ変更

誤操作が多いので無効にします。

エディター領域上部のパディング

私は2に設定しています。下部のパディングは不要です。

スクロールバー

水平スクロールバーは幅6、垂直は25（デフォルトは水平12、垂直14）：

私はスクロール範囲外に移動する機能が好きではなく、1画面で完全に表示できる内容でもスクロールバーが表示されてしまうため、最後の「Scroll Beyond Last Line」は無効にしています。

垂直スクロールバーを20に大きくした理由は、その領域にはスクロールバーだけでなく3つの情報が含まれているからです：

1. スクロールバー右側の明るい黄色はエディターの警告情報です。

2. スクロールバー中央の暗い黄色ブロックは検索にマッチした項目（グローバル検索と現在のエディター検索を含む）です。暗い黄色ブロックは灰色（カーソルで選択された部分や類似内容）や薄いピンク（カーソルで選択された内容の宣言部分）の場合もあります。

3. スクロールバー全体にわたる青い線はカーソルがある行です。

4. スクロールバー左側の緑色部分はコードが変更された部分です。Gitを有効にしている場合、薄い黄色（変更部分）になることもあります。

このように情報表示が豊富なため、幅を広くしています。

スムーズスクロール

強く推奨します。これにより、スクロール時にどのくらい行が移動したか分かり、突然ジャンプして「どこにスクロールしたか分からない」ということがなくなります。

スクロール固定

スクロール時に現在の画面外のスコープを確認する必要がある場合、このオプションを有効にします。また、水平スクロール時にsticky関数がスクロールされてしまうため、私はスクロールさせない設定を好みます。最後のオプションは無効にします。

カーソル

1つ目はカーソルの点滅効果、2つ目は異なる位置をクリックした際にカーソルが前の位置からアニメーションで移動する効果です。これにより、今回のクリック位置が前の編集位置からどこにあるか分かり、情報が豊富になります。

検索

これは無効にすることをお勧めします。検索時に無効にしていないと、ファイル上部に余分なスペースが生じ、検索ボックスを閉じるとエディターが跳ねるように動いてしまいます。

ただし、このオプションを有効にするとエディター内容が遮られる可能性があるため、各自で判断してください（通常、上部はimport後の改行内容なので、遮られても問題ありません）。

検索ウィジェットへの自動入力

これは無効にすることをお勧めします。検索後に特定の内容を選択し、さらに別の内容を検索しようとすると、エディターが自動的に選択内容を検索ボックスに入力してしまい、前回の検索内容が消えてしまうからです。

サムネイル

エディター右側のサムネイルは常に表示しています。現在の編集位置や特定の関数・コンポーネントに対する相対位置を把握するために使用するため、サムネイルはスクロールせず、色ブロックのみをレンダリングする設定にしています。

提案

このスイッチはデフォルトのまま無効にすることをお勧めします。Copilotの提案と混同する可能性があるためです。以下はCopilotの提案です：

そしてこれはプレビューの提案です：

このオプションのデフォルトは「first」、つまり常に最初の提案を選択する設定ですが、私が頻繁に直面する問題は、CSSでwidと入力した場合、当然widthを期待しているのに、widowという提案が最初に表示されることです。この属性は使わないのですが、毎回最初に表示されるため、矢印キーで切り替える必要があります。そこで、ここは「最近使用したもの」に変更することを提案します。これは入力メソッドの「動的頻度調整」に似た機能です:

ワークベンチ

コマンドパレット

同じコマンドを繰り返し入力することが多いため、コマンド履歴リストを開くのは便利です。また、入力内容を保持する機能も有用です。例えば「Toggle Screen Capture Mode」のような「toggle」で始まるコマンドの場合です。

注意点として、入力後にescキーを押して入力ボックスを閉じた場合、次回呼び出した時に入力内容は保持されません。コマンドを選択して実行した後、再度呼び出すと前回の入力内容が保持されます。

エクスプローラーツリー

アニメーションは通常有効にしています。「優雅さは永遠に色褪せない」からです。この設定は「設定」画面のスクロールにも影響します（以前はエディター設定のスムーススクロールが「設定」画面やエクスプローラーツリーのスクロールに影響しませんでした）。

クイックオープン履歴

cmd + pを押すとクイックオープン入力ボックスが表示されます。履歴を記憶するのは良い機能です。また、フォーカスが外れた時に自動的に消えるかどうかのオプションもあります。ほとんどの場面では自動的に消える方が良いですが、稀に必要ない場合もあるため、デフォルトの自動消去を維持しています。

ワークベンチのアニメーション効果軽減

64GBメモリのM1 Maxではアニメーションを減らす必要はありません（デフォルトはautoで、システム構成に応じて自動調整されます。複数のコンピューター間で設定を同期する問題に対応しています）。

フォントスムージング

CSSの-webkit-font-smoothing: antialiased;に似ています。defaultはほとんどの非Retinaディスプレイで最もシャープなフォント表示（サブピクセルレベル）を行い、antialiasedはピクセルレベルのスムージングで、フォントが細くなる可能性があります。図を参照:

この設定は「ワークベンチ」ブロックにありますが、エディター領域にも影響します。antialiasedを有効にすると、エディター領域とワークベンチ領域の両方でフォントがより暗く（コントラストが弱く）、細くなることがわかります。私は後者が好きなので有効にしています。

注意点として、「サブピクセルレベル」とはピクセルよりも小さいレベルという意味ではなく、「ピクセルに至らない」レベル、つまりより低いレベルを指し、より高いレベルではありません。

エクスプローラーツリーのsticky

非常に便利で、スクロール時に現在のスクロールパスを確認できます。唯一の欠点はbox-shadowを追加できればより区別しやすくなることです:

stickyの最大レベルも変更可能で、デフォルトは7で十分です（エディターのstickyデフォルトは5レベル）。

注意点として、この設定は「設定」画面にも適用されます（設定画面はエディターではなくワークベンチに属していることがわかりました）:

エクスプローラーツリーのインデントは14に変更しました。ガイドラインは常に表示するようにしています。同レベルのファイルが多すぎると見つけにくいためです:

アウトラインナビゲーション

アウトラインナビゲーションは必要ですが、ファイル/フォルダアイコンは不要です。これにより、ファイル内の配列やクラスと明確に区別でき、非常に便利です:

変更されたタブ

これに関連する設定が複数あります。例えば、変更後保存されていないファイルのタブ上部にハイライト線を表示する設定:

デフォルトでは点が表示されますが、このオプションを有効にすると点と線の両方が表示されます。エディターを再起動すると青い線のみが表示されます（バグかもしれません。再起動しなくても有効になるべきです）。

効果:

「点」もタブのスペースの一部を占有するため、より多くのタブ内容情報を表示できなくなります。そのため、このオプションを有効にすることをお勧めします。

マウスナビゲーション

これはデフォルトオプションですが、説明しておきます。左側にボタン（右手用の4、5ボタン）があるマウスでは、直接ナビゲーションに使用でき、非常に便利です。

タブの固定

固定されたタブはデフォルトでエディターグループの左側に表示されますが、別の行に分けて表示すると、固定されていないタブとの区別がより直感的になります。効果は以下の通り:

注意点として、デフォルトでは固定されたタブはマウス中ボタンやcmd + wで閉じることができません（押すと固定されていないタブが開かれます）。この動作は変更可能です:

タブ閉じるボタン

左手で cmd + w を使ってタブを閉じることに慣れているため、このオプションは無効にできます。また、実はタブをダブルクリックして閉じる方がより慣れていますが、公式の返答では実装しないとのことです。以下を参照：

Allow to double click on a tab to close it · Issue #52628 · microsoft/vscode Notepad++などのエディタでは、ダブルクリックでタブを閉じる機能があります。VS Codeにもこの機能があると素晴らしいです。 https://github.com/Microsoft/vscode/issues/52628#issuecomment-420887497

タブの折り返し

多くのタブを開いている場合、タブをスクロールするのが面倒で全体像を把握しづらくなるため、私はタブの折り返しを好みます。効果は以下の通り：

少し困る点は、折り返しによって複数行になったタブが、前述の「タブ上部の青色ハイライト」と混同される可能性があることです（青い線が上のタブのものか下のタブのものか、一瞬考えてしまうため直感的ではありません）。タブにより多くの内容を表示するか、直感的に分かりやすくするかは、各自で選択してください：

タブの高さ

コンパクトなレイアウトは全体像の把握とスペースの節約に役立ちます。

タブをダブルクリックで閉じる（？）

このオプションは文字通り、公式が実装しないと表明した「タブをダブルクリックで閉じる」機能（前述の通り）のようです。しかし、競合する可能性のある「タブをダブルクリックしてエディターグループを自動拡張」を無効にしても、この設定は機能しません。私の理解が間違っているのか、それともバグなのかは不明です。

ネイティブタブ

これに関連する設定は2つあります：

最初の設定を有効にすると、複数のプロジェクトウィンドウを1つのウィンドウに統合できます。「ウィンドウ」オプションに「すべてのウィンドウを統合」が表示され、1つのウィンドウで複数のプロジェクトを切り替えることができ、非常に便利です：

ただし、この場合、カスタムタイトルは使用できません（個人的にはあまり有用ではないと思います）。カスタムタイトルは以下のようになります：

最初の設定を有効にすると、2番目の設定は無効になり、native や custom に設定しても効果がありません。最初の設定を無効にし、2番目の設定を native にすると、「すべてのウィンドウを統合」も「カスタムタイトルバー」も使用できなくなります（この設定の意義がわかりません）。

ツリービューのドラッグ＆ドロップ

誤って操作してしまうことが多く、数百の変更が発生する可能性があるため、無効にしています。

検索結果の自動折りたたみ

デフォルトでは常に展開されますが、検索結果が多すぎる場合（通常は入力が完了していないため）、展開する必要がなく、全体像の把握を妨げます。

また、検索バーに「除外ファイル」を追加していない場合、NextJSプロジェクトの.nextディレクトリなど、膨大な検索結果が表示される可能性があるため、この設定も必要です。

注意点として、この「展開」「折りたたみ」の10ファイル制限は、検索結果全体のフォルダ数ではなく、特定のフォルダ内に表示されるファイル数です：

したがって、特定のフォルダ内に検索結果に一致するファイルが多すぎる場合（フォルダが折りたたまれる）、通常はさらに検索情報を提供する必要があるかどうかを確認する必要があります。

検索ボックスへの自動入力

通常、選択した内容を検索したい場合があるため、「Seed On Focus」オプションを使用すると、cmd + v の操作を省略できます。

ただし、「検索ウィジェット」で選択後にフォーカスを移動した際に自動的に選択内容を入力する機能とは異なります。エディターで内容を選択し、検索ウィジェットにフォーカスを移動する場合、必ずしも検索のためではなく、現在のエディターで選択した同じ内容をハイライトして表示するためだけの場合もあります。しかし、この場合、選択後にフォーカスを移動すると自動的に選択内容が置き換えられ、多くの場合期待通りではありません。

一方、内容を選択した後に検索ビュー（右側）にフォーカスを移動する場合は、ほぼ確実に検索のためです。

また、検索結果については、そのドキュメント内での位置を特定するために行番号を知りたいため、行番号を表示することも重要です。

最後に、Smart Caseは小技です。すべて小文字で入力した場合は、検索名をあまり覚えていないことを意味し、検索内容（キャメルケースの関数名など）の特定の文字が大文字であることを確信している場合は、大文字と小文字を区別して検索します。非常に便利です。

さらに、前回入力した内容を記憶していて、それが選択状態であれば、自分の入力予想と一致しない場合でも、直接入力すれば問題ありません。以前の検索内容がまだ役立つのであれば、それはさらに良いでしょう。↓

検索でグローバルなignoreを無視

Gitにはグローバルなデフォルトのignore設定があり、このオプションを有効にすると検索時にリストされたファイルやフォルダを無視できます。通常は有効にしておくのが良いでしょう。

また、親ディレクトリでignoreを有効にするオプションもあります。意味がよく分かりませんが、多階層のGit管理のためかもしれません。とにかく無視するのであれば、ということで私もチェックを入れました：

デバッグとテスト

私の技術レベルが限られているため、VSCodeのデバッグとテスト機能はほとんど使っていません。NextJSのようなNodeJSアプリケーションをデバッグする際に使用した程度で、使い方はChromeとほぼ同じです。使用頻度が低いため、特に問題点も見つからず、最適化できる設定もないので、ここでは触れません。

ファイル変更の表示効果

行番号表示の列で、差分を実線で表示するか「ガター」で表示するかを設定できます：

私は実線の方が好みなので、これらのオプションは両方とも無効にしました。

Gitコミットボタンの無効化

正直なところ、左側のこのコミットボタンは一度も使ったことがありません。常にコマンドラインでGit操作を行っているので、このオプションは無効にしました。

同様に、このボタン（GitHub Copilotのボタンのようで、自動的にコミットメッセージを生成するもの）も無効にしました。特に会社のプロジェクトでは、要件/bugカード番号をメッセージに含めることが強制されているため、このようなインテリジェントなコミットメッセージ生成はさらに役に立ちません：

拡張機能

通知の無効化

拡張機能から何かを教えてもらう必要はありません。必要があれば、自分から探します。

ターミナル

右クリックの動作

通常、マウスの左クリックで選択した後、右クリックでコンテキストメニューを表示します。しかしVSCodeのデフォルト動作は、内容（単語）を選択すると右クリックで表示されるようになっています。可能ではありますが、必要ありません。

ターミナルの最大行数

これは実際には変更しなくても構いません。まれにかなり前のログ情報を見る必要がある場合があり、私の64GBメモリを考慮すると、大きく設定しても問題ありません。

ターミナルのスクロールアニメーション

アニメーションは好きですが（エレガントです）、ターミナルのスクロールアニメーションには慣性があるようで、スクロール量を制御しにくく、エディタやワークベンチ内のスクロール効果とは大きく異なるため、無効にしました。

CSS/Less/Sass

重複プロパティのlint警告

これは非常に有用です。外部から複数のプロパティ値をコピー＆ペーストする場合（ブラウザの要素検査からstyleをコピーするのが一般的）、重複するプロパティを削除する必要があります。

Git

自動Stash

図の通り、説明は十分です。有効にすることをお勧めします。操作が1ステップ減ります。

サードパーティ拡張機能

特に言うことはありません。拡張機能をインストールするのは、自分のニーズがあるからです。自分の要件に合わせて設定してください。

GitLens

ただし、一部のプラグインでは有料機能の推薦を無効にできます。そうです、GitLensのことです。Gitブランチのマージ状況を（偶然）確認する際に、有料機能のプロンプトが表示されることがあります。これは無効にできます（プラグイン開発者の寛大さに感謝します）：

One Dark Pro

これは私のお気に入りです。メソッドや関数名がより目立つようになります：

あとがき

これだけ多くの設定を紹介しましたが、自分に合ったものが最も重要です。皆さんが効率的に作業し、早く帰宅できることを願っています！

• 前の記事
  【動画】Notion Flowでブログ公開フローをシンプルに
• 次の記事
  Apple TVで北京聯通IPTVを視聴する