設定／カスタマイズ [VSCode]

設定

ドキュメント：

User and Workspace Settings | Visual Studio Code [Official]

使い方

操作

Ctrl + ,： 「設定」エディターを開く

設定ファイルを開く手順

JSON 形式の設定ファイル settings.json を開いて直接編集する。

1. Ctrl + Shift + P / Command + Shift + P を押してコマンドパレットを開く。
2. 「基本設定：設定 (JSON) を開く」 (Preferences: Open Settings JSON) を検索して実行する。

ドキュメント：

User and Workspace Settings | Documentation for Visual Studio Code [Official]

参考：

settings.json の開き方 – Qiita

設定のための Settings.json ファイルについて – Qiita

各種設定ファイルの格納場所 – Qiita

settings.json を開いて表示する方法と、デフォルト設定を確認する方法 | BLOG AND DESTROY

settings.json の場所 | ぱそまき

設定ファイルの場所 (settings.json) | まくろぐ

How to edit settings.json in Visual Studio Code? | Supun Kavinda’s Blog

アクティビティバー

参考：

アクティビティバーが邪魔な時の対処法 – Qiita

アクティビティーバーの表示を制御するには | ＠IT

拡張機能の Activitus Bar でウィンドウスッキリ | Neo’s World

ファイルアイコンを変更する

参考：

ファイルアイコンを変える – Qiita

スペースを可視化する

設定を開いて、「Editor: Render Whitespace」 (editor.renderWhitespace) を変更する。

• none：スペースを可視化しない
• boundary：2つ以上連続するスペースを可視化する
• selection：選択した範囲のスペースを可視化する (デフォルト)
• all：全てのスペースを可視化する
• trailing：末尾のスペースを可視化する

参考：

空白文字 (タブ／スペース) のエディター上での表示方法に関する設定 | JavaDrive

空白文字を一目で分かるように表示するには | ＠IT

ドキュメントの空白文字を見やすくしてみる – Qiita

半角スペースでも全角スペースでもないスペースを可視化する – Qiita

改行を可視化する

拡張機能「code-eol」をインストールする。

settings.json に設定を追加することで表示色を変更できる。(任意)

{
  // ...
  "code-eol.color": "#3b4048",
  // ...
}Code language: JSON / JSON with Comments (json)

入手：

code-eol | Visual Studio Marketplace [Official]

参考：

改行コードの表示をしたい – teratail

行ごとの改行コードを表示したい – teratail

改行コードを変更する

参考：

改行コードを変更するには | ＠IT

インデント／タブサイズ

言語モード別にタブの幅を設定するには、言語識別子を指定した範囲内で editor.tabSize の値を指定する。

{
    // ...
    "[plaintext]": {
        "editor.tabSize": 2
    },
    // ...
}Code language: JSON / JSON with Comments (json)

参考：

インデント幅を言語毎に指定する – Qiita

言語ごとにインデント幅、タブとスペースどちらを使うか設定する – Qiita

タブキーを押したときにスペースに変換するのかに関する設定 | JavaDrive

既定のインデント幅を変更する | DevelopersIO

言語によってインデント幅を変更する | ねこの足跡R

インデントを設定するには | ＠IT

言語ごとにインデントの設定をしたい – スタック・オーバーフロー

折り返し

参考：

テキストの折り返しを設定するには | ＠IT

対応する括弧を色付けする

ガイド

「設定」を開いて、「Editor > Guides: Bracket Pairs」を有効にする。

色付け

「設定」を開いて、「Editor > Bracket Pair Colorization」を有効にする。

リンク：

Bracket Pair Guides – Release Note v1.61 | Visual Studio Code [Official]

How We Made Bracket Pair Colorization 10,000x Faster | Visual Studio Code [Official]

参考：

ペア括弧ガイドの色付け機能 – Qiita

括弧の対応範囲を、カラーガイドで表示する方法 | 超初心者ホームページ作成ナビ

ブラケットペアの範囲を可視化する方法 | 戸倉彩

虹色の VSCode でテンション上げて開発する！ | cloud.config Tech Blog

これは便利、VSCode の 設定を変更しよう！ v.1.60 のアップデートで、ブラケットのカラー化にネイティブ対応 | コリス

メンテナンスされなくなった Bracket Pair Colorizer 2 から標準搭載の括弧記号色付け機能に乗り換えよう | DevelopersIO

bracketPairs | メモ

bracket pair colorization: horizontal guides within bracket pairs on the same line · Issue #136475 · microsoft/vscode – GitHub

検索対象からの除外

gitignore の対象を検索に含める／含めない

1. 「設定」において ignore などのキーワードで検索する。
2. 「機能 > 検索」にある「Search: Use Global Ignore Files」または、「Search: Use Ignore Files」の有効／無効を必要に応じて切り替える。

参考：

ファイル検索で node_modules など検索できない対象のファイルを検索する方法 – Qiita

検索結果をクリアする

参考：

How to perform “Clear Search Results” in “Find in Files” without using the mouse? – Stack Overflow

入力フィールドをクリアする

参考：

Add a command to clear input · Issue #64315 · microsoft/vscode – GitHub

ターミナルをクリアする

参考：

“Terminal: Clear” not working as desired · Issue #75141 · microsoft/vscode – GitHub

新規ファイルの言語モードを設定する

参考：

新規作成ファイルのデフォルト言語を指定する – Qiita

新規ファイルのデフォルト言語を変えてみよう！ | g lance

新規作成したファイルの言語モードを設定する方法 | しばたテックブログ

背景を変更する

参考：

見た目を少しカスタマイズしてみる | うしぶろ

ウィンドウタイトル

参考：

タイトルにパスを表示してわかりやすくする – Qiita

ウインドウタイトルバーをカスタマイズする方法 | Webrandum

まとめ／Tips

コードを書くのが楽になる！知っておくと便利な VSCode の機能／設定のまとめ | コリス

VSCode 素人を卒業しよう | なかがわはじめ

VSCode を見やすくする (Theme、TreeView…) | kenbu

よけいなものを消し去ってコードに集中しよう | Kurusugawa