Featured image of post VSCode の操作性を向上させる 5 つのインターフェース設定

VSCode の操作性を向上させる 5 つのインターフェース設定

VSCode の UI を改善する 5 つの簡単な設定を紹介します。コードの構造を把握しやすくする「スティッキースクロール」の有効化、快適な操作感を実現するカーソルのスムーズなアニメーション、そして macOS でウィンドウを整理するための「ネイティブタブ」機能など。

サイドバーのエクスプローラー:親フォルダ名を上部に固定する

大量のフォルダがある大規模なプロジェクトで作業していると、今どの階層にいるのか見失いがちです。この機能を有効にすると、ファイルツリーをスクロールしても親フォルダが上部に固定(ピン留め)されるため、現在の位置を一目で把握できるようになります。

親フォルダを上部に固定

workbench.tree.enableStickyScroll をチェック

設定で workbench.tree.enableStickyScroll を検索し、チェックボックスをオンにして有効化します。

エディタウィンドウ:スクロール中に関数名や HTML タグを固定する

長いソースファイルを扱っているとき、現在編集しているコードの「ヘッダー(関数名、HTML タグ、Markdown の見出しなど)」をエディタの上部に固定する機能です。これにより、自分が今どの関数やブロックの中を編集しているのかが非常に分かりやすくなります。

このコードはどこに属している?

editor.stickyScroll.enabled をチェック

設定で editor.stickyScroll.enabled を検索し、チェックボックスをオンにします。

カーソルの移動と入力をよりスムーズにする

設定で editor.cursorSmoothCaretAnimation を検索し、オンにします。これを有効にすると、カーソルが瞬間的に移動するのではなく、次の位置へ滑らかに滑るようになります。また、入力時にもわずかなフェードイン効果が加わり、コーディング体験全体がより洗練された印象になります。ぜひ一度試してみてください!

カーソルの点滅を滑らかにする

設定で editor.cursorBlinking を検索し、点滅アニメーションの設定をより滑らかなオプション(smooth など)に変更します。標準の「パッパッ」と切り替わる点滅から、じんわりとフェードイン・アウトするような動きになり、目への負担が軽減されます。

マルチウィンドウのタブ化(macOS 限定)

macOS 限定

VSCode で複数のプロジェクトウィンドウを開きすぎると管理が大変になります。「ワークスペース」機能もありますが、7〜8 個ものプロジェクトを同時に開くと画面が煩雑になりがちです。

設定で window.nativeTabs を検索して有効化し、VSCode を再起動します。その後、メニューバーの ウィンドウ -> すべてのウィンドウを結合 を選択してください。これにより、バラバラだった VSCode のウィンドウが、ブラウザのように一つのウィンドウ内でタブとして綺麗にまとまります。