Zenn
Open18

vs code Tips & Trouble Shooting

VS Code
kabeckabec

記事として投稿するほどまとまっていないものを書き置きする。

kabeckabec

アウトライン折りたたみをデフォルトにしたい

デフォルトでは変数まで全て展開されてしまうので個人的には非常に見辛い。
以下の手順で折りたたみをデフォルトに変更する。

  1. ctrl + ,で設定を開く
  2. outline.collapseItemsで検索
  3. allwaysCollapseに変更
  4. vs codeの再起動(ウィンドウの更新ではなく)

references

kabeckabec

スクロールバーに表示される四角形について

スクロールバーに色のついた線がついていることがある。
これはルーラーと呼ばれるもので各色で意味が異なる。

vs codeでのデフォルトカラーがわからないのでこちらを参考に表にまとめた。
現状の自分の設定を見る限り、一部異なっている部分があるので要調査。

色 意味 表示列
灰色 現在表示している範囲(スクロールバー) 中央
オレンジ 検索でヒットした箇所 中央
赤 エラー 右
ゴールド 変更箇所(未保存) 左
青 キャレットの位置 中央
緑 変更箇所(保存済み) 左
紫 ブレークポイント 中央

公式ドキュメントを見ると例えば、editorOverviewRuler.errorForegroundを設定することで
エラーのルーラーマーカーの色を変更することができるらしい。
ただし、デフォルト色の記載についての情報が見つからない。

references

kabeckabec

エディタでファイルを開いたときにファイルツリーを展開しない

  1. ctrl + ,で設定を開く
  2. explorer.autoRevealで検索
  3. falseを選択
  4. vs codeの再起動(ウィンドウの更新ではなく)
kabeckabec

workspaceStorage,CacheStorageの削除

  • %appdata%\Code\User\workspaceStorage, %appdata%\Code\Service Worker\CacheStorageは意図せずPC容量を占有してしまうので定期的に確認すること。
  • ただし、workspaceStorageは削除すると各ワークスペースでの作業履歴がクリアされるので注意。
    ※作業中のデータは消去されない
kabeckabec

改行 ショートカット

IntelliJ IDEA Keybindingsをインストールしている前提で記載

アクション キーバインド コマンド名
現在行の前に行を追加 ctrl + alt + Enter editor.action.insertLineBefore
現在行の次に行を追加 ctrl + shift + Enter editor.action.insertLineAfter

キーボードショットカット(ctrl + k -> ctrl + s)でコマンド名列に記載の文字列を入力すれば現在のキーバインドを確認できる。

kabeckabec

アクティブなファイルをエクスプローラーで開く

  1. ctrl + shift + \(ファイル: エクスプローラービューでアクティブなファイルを表示する)
  2. shift + alt + r(ファイル: エクスプローラーで表示する)
kabeckabec

新しく開いたワークスペースが英語になる

  1. コマンドパレットを開いて(ctrl + shift + p)、Configure Display Languageを選択し、日本語に変更
  2. 変更後にvs codeを全て終了し再度開く。
kabeckabec

エディタ内のフォントサイズの縮小

コマンドパレット(ctrl + shift + p)でEditor Font Zoom Outを選択

レイアウトの表示サイズを縮小

コマンドパレット(ctrl + shift + p)でView: Zoom Outを選択

kabeckabec

関数ジャンプ

ctrl + shift + oでインクリメンタルサーチをしながら関数定義行や変数定義行にジャンプできる。
※キーボードショートカットでのコマンド名はエディターでシンボルに移動

kabeckabec

行の折り返しの切り替え

alt + zで行の折り返しを切り替えることができる。
※キーボードショートカットでのコマンド名は表示: [右端で降り返す] の設定/解除

kabeckabec

マルチカーソル

ctrlを押下しながら適当な場所をクリックすることでカーソルを複数配置することが可能。
矢印キーを入力するとすべてのカーソルに移動が適用される。

マルチカーソル状態でshiftやhomeやendを組み合わせることで、複数行を選択状態にすることが可能となる。
他にもctrl + alt + 矢印キー上下で現在のカーソル行から上または下の行に1つずつカーソルを追加することが可能。

また、ホイールをクリックしながらマウスを動かすことでもマルチカーソルを実行できる。

自分はテーブルの特定列の文字列を複数行まとめてコピーする時によく使う。以下の手順で実行。

  1. 先頭行にカーソルを置く
  2. ctrl + alt + 矢印キー下でコピーしたい行までマルチカーソルで選択
  3. ctrl + shift+矢印キー右`で単語単位でカーソルと移動し文字列を選択
  4. ctrl + cでコピー

references

kabeckabec

vs codeでのgit logの効率的な確認方法

拡張機能のインストール

まずは以下の拡張機能をインストール

よく使うコマンド

  • Git: View History (git log)： git logの可視化
    ソース管理レポジトリの履歴アイコンからでも表示可能
  • Git: View File History： アクティブなファイルのコミット履歴を追跡することができる
  • Git Graph: View Git Graph (git log)： git logの可視化
    前述の可視化コマンドとは呼び出している拡張機能が異なる。
    ソース管理レポジトリのgit graphアイコンからでも表示可能
  • GitLens: Show Commit Graph View ： git logの可視化のpro版
    GitKrakenにサインインしないと使えなくなった??
    上記の現象はssh接続先だと発生しているが、ホストPC上では問題なく使えたので要調査

references

kabeckabec

コードの折り返しのデフォルトOFF設定

折り返しをoffに設定したい場合は %APPDATA%\Code\User\settings.jsonに以下の記述を追加

"editor.wordWrap": "off"

ただし、mdファイルは上記の設定では機能しないので個別に記述

"[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one",
    "editor.wordWrap": "off"
}
kabeckabec

フォーカスしているエディタを閉じる

他のアプリケーションのショートカットからctrl + wが妥当だが、IntelliJ IDEA Keybindingsの拡張機能を追加している状態だとeditor.action.smartSelect.growがctrl + wのショートカットと競合しているので上手く機能しない。

上記のキーバインドを削除することでctrl + wでエディタを閉じることができる。

kabeckabec

ターミナルのフォントサイズの変更

terminal.integrated.fontSizeのサイズを変更
個人的にはターミナルのフォントサイズは17くらいが丁度よい。

kabeckabec

ssh接続

Remote - SSHの拡張機能を入れることで導入することができる。
インストール後、vs codeを再起動すると左メニューにリモートエクスプローラーが追加される。

使い方

リモートエクスプローラーから接続したいSSH TARGETSを選択すればOK
初回接続の場合は事前に設定する必要がある。以下の手順でリモートアクセス先を登録。

  1. リモートエクスプローラーのSSH TARGETSにマウスポインタを移動させる
  2. 設定アイコンが表示されるのでクリック
  3. Select SSH configuration file to updateのウィンドウが表示されるので自分のPCのホームディレクトリ直下の.ssh/configファイルを選択
  4. 以下のようにリモート先の情報を入力
    Host [REMOTE_HOSTNAME]
  User [USERNAME]
  HostName [REMOTE_IP_ADDRESS or REMOTE_HOSTNAME]
  Port [PORT]
  IdentityFile [IDENTITYFILE_PATH]
    • [REMOTE_HOSTNAME]: リモート先のPC名
      SSH TARGETSに表示される名前なので、自分で見てわかる名前であれば何でもよい
    • [USERNAME]: リモート先のPCのユーザー名
    • [REMOTE_IP_ADDRESS or REMOTE_HOSTNAME]: リモート先のPCのIPアドレス
      名前解決できるならPC名でもOK
    • [PORT]: ポート番号、デフォルト(22)から変更がなければ記述の必要なし
    • [IDENTITYFILE_PATH]: 鍵認証を設定している場合のみ必要
      鍵ファイルのパスを記述(デフォルトでは~/.ssh/直下に格納される)
  5. 設定するとSSH TARGETSに[REMOTE_HOSTNAME]に記載した文字列でssh接続先が表示される
  6. マウスポインタを合わせて、右側のConnect to Host in New Windowアイコンをクリック
  7. 新しいウィンドウでssh接続が開始される
  8. 初回はどのOSに接続するか求められる、基本的にはLinuxを選択。
  9. 接続後はパスワード入力を求められるので、パスワードを入力すればログイン完了。

reference