設定

公式サイト:

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) を検索して実行する。

参考:

VSCode の settings.json の開き方 – Qiita

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

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

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

settings.json の場所 | ぱそまき

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スペースを可視化しない
  • boundary2つ以上連続するスペースを可視化する
  • 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

改行コードを変更する

参考:

VSCode で改行コードを変更するには | @IT

インデント/タブサイズ

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

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

参考:

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

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

タブキーを押したときにスペースに変換するのかに関する設定 | Let’s プログラミング

Visual Studio Code で既定のインデント幅を変更する | DevelopersIO

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

VSCode でインデントを設定するには | @IT

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

折り返し

参考:

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

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

ガイド

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

色付け

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

参考:

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

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

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

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

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

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

bracketPairs | メモ

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

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

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

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

参考:

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

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

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

背景を変更する

参考:

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

まとめ/Tips

こちらのページを参照

参考:

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

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

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

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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA