設定
公式サイト:
User and Workspace Settings | Visual Studio Code [Official]
使い方
Ctrl
+ ,
:「設定」エディターを開く
設定ファイルを開く手順
JSON 形式の設定ファイル settings.json
を直接編集する。
Ctrl
+Shift
+P
/Command
+Shift
+P
を押してコマンドパレットを開く。- 「基本設定:設定 (JSON) を開く」 (Preferences: Open Settings JSON) を検索して実行する。
参考:
VSCode の settings.json の開き方 – Qiita
設定のための Settings.json ファイルについて – Qiita
settings.json を開いて表示する方法と、デフォルト設定を確認する方法 | BLOG AND DESTROY
VSCode の設定ファイルの場所 (settings.json) | まくろぐ
How to edit settings.json in Visual Studio Code? | Supun Kavinda’s Blog
User and Workspace Settings | Documentation for Visual Studio Code [Official]
アクティビティバー
参考:
Visual Studio Code のアクティビティバーが邪魔な時の対処法 – Qiita
VSCode でアクティビティーバーの表示を制御するには | @IT
VSCode 拡張機能の Activitus Bar でウィンドウスッキリ | Neo’s World
ファイルアイコンを変更する
参考:
Visual Studio Code のファイルアイコンを変える – Qiita
スペースを可視化する
設定を開いて、「Editor: Render Whitespace」 (editor.renderWhitespace
) を変更する。
none
:スペースを可視化しないboundary
:2つ以上連続するスペースを可視化するselection
:選択した範囲のスペースを可視化する (デフォルト)all
:全てのスペースを可視化するtrailing
:末尾のスペースを可視化する
参考:
空白文字 (タブ、スペース) のエディター上での表示方法に関する設定 | Let’s プログラミング
VSCode で空白文字を一目で分かるように表示するには | @IT
VSCode でドキュメントの空白文字を見やすくしてみる – Qiita
vscode で半角スペースでも全角スペースでもないスペースを可視化する – Qiita
改行を可視化する
拡張機能「code-eol」をインストールする。
settings.json
に設定を追加することで表示色を変更できる。(任意)
{
// ...
"code-eol.color": "#3b4048",
// ...
}
Code language: JSON / JSON with Comments (json)
参考:
code-eol | Visual Studio Marketplace [Official]
Visual Studio Code で改行コードの表示をしたい – teratail
Visual Studio Code で行ごとの改行コードを表示したい – teratail
改行コードを変更する
参考:
インデント/タブサイズ
言語モード別にタブの幅を設定するには、言語識別子を指定した範囲内で editor.tabSize
の値を指定する。
{
// ...
"[plaintext]": {
"editor.tabSize": 2
},
// ...
}
Code language: JSON / JSON with Comments (json)
参考:
VSCode のインデント幅を言語毎に指定する – Qiita
言語ごとにインデント幅、タブとスペースどちらを使うか設定する – Qiita
タブキーを押したときにスペースに変換するのかに関する設定 | Let’s プログラミング
Visual Studio Code で既定のインデント幅を変更する | DevelopersIO
Visual Studio Code で言語ごとにインデントの設定をしたい – スタック・オーバーフロー
折り返し
参考:
VSCode でテキストの折り返しを設定するには | @IT
対応する括弧を色付けする
ガイド
「設定」を開いて、「Editor > Guides: Bracket Pairs」を有効にする。
色付け
「設定」を開いて、「Editor > Bracket Pair Colorization」を有効にする。
参考:
VSCode で括弧の対応範囲を、カラーガイドで表示する方法 | 超初心者ホームページ作成ナビ
VSCode でブラケットペアの範囲を可視化する方法 | 戸倉彩
虹色の VSCode でテンション上げて開発する! | cloud.config Tech Blog
これは便利、VSCode の 設定を変更しよう!v.1.60 のアップデートで、ブラケットのカラー化にネイティブ対応 | コリス
メンテナンスされなくなった Bracket Pair Colorizer 2 から VS Code に標準搭載の括弧記号色付け機能に乗り換えよう | DevelopersIO
Bracket Pair Guides – Release Note v1.61 | Visual Studio Code [Official]
How We Made Bracket Pair Colorization 10,000x Faster | Visual Studio Code [Official]
検索対象からの除外
gitignore の対象を検索に含める/含めない
- 「設定」において
ignore
などのキーワードで検索する。 - 「機能 > 検索」にある「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
新規ファイルの言語モードを設定する
参考:
VSCode で新規作成ファイルのデフォルト言語を指定する – Qiita
新規ファイルのデフォルト言語を変えてみよう! | g lance
Visual Studio Code で新規作成したファイルの言語モードを設定する方法 | しばたテックブログ
背景を変更する
参考:
VSCode の見た目を少しカスタマイズしてみる | うしぶろ
まとめ/Tips
参考:
コードを書くのが楽になる!知っておくと便利な VSCode の機能/設定のまとめ | コリス