VSCode： 便利・快適に使うための小技集 その3

こんにちは、さち です。

普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。

今回は、この VSCode を便利に使うための「小技」について書いていきます。

正直に言うと、私が使っている機能で、一つ一つは大した内容じゃないけど地味に便利な機能を、備忘録として残す記事です。

拡張機能は使わない機能ばかりなので、はじめて知るものがあれば、ぜひ使ってみて下さい。

【まえおき】 「settings.json」の編集方法

後ほど出てくる、VSCode の設定ファイル「settings.json」を開く方法については、こちらの記事を参考にして下さい。

VSCode： 設定ファイル「settings.json」を直接開きたい

こんにちは、さち です。今回は、この VSCcode で、設定ファイル「settings.json」を直接開く方法について書いていきます。

at.sachi-web.com

2022.01.10

「settings.json」を編集（記述）するときは、下記の例のように最初の { と最後の } の間に追記します。上書き保存も忘れずにしましょう。

{
  "editor.fontSize": 13,
}

いろいろな小技

常に「行」を折り返す

「行」の折り返しは、メニューの「表示」→「右端での折り返し（Alt + Z キー）」でできますが、これは現在のエディターにしか効果がありません。また、次回の VSCode を使うときには「折り返し」がない状態に戻ってしまいます。

常に「行」を右端で折り返すには、「settings.json」に次のように追記します。

"editor.wordWrap": "on",

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

指定できる値は on 以外にもあります。動作の好みに合わせて選んで下さい。

指定文字数で折り返す場合

editor.wordWrap の値を、wordWrapColumn または bounded にした場合は、折り返す文字数を指定します。

例えば、「50文字」で折り返すには、「settings.json」に次のように追記します。

"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 50,

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

シンタックスハイライトを変更

エディターに適用されている「シンタックスハイライト（言語モード）」を変更するには、下記の手順を行います。

1. 画面右下にある、現在の「言語名（例では HTML）」をクリックします。
   
2. 上部にシンタックスハイライト（言語モード）の選択が表示。言語名を入力して検索するか、一覧の中から選んで指定します。
   

改行コードを変更

サーバーの OS は Linux 系が多いので、改行コードは「LF」にするのが基本です。

しかし、Windows で VSCode を使うと、新規作成したファイルの改行コードは基本的に「CRLF（\r\n）」になってしまいます。

改行コードを「LF(\n)」にするには、「settings.json」に次のように追記します。

"files.eol": "\n",

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

この設定をしても、既存のファイルを開いたときは、そのファイル内と同じ改行コード（例えば「CRLF」）が使われます。

files.eol の値は、他にも次のようなものを指定できます。

改行コードを変換する

画面右下にある「改行コード（例では CRLF）」をクリックして、使いたい「改行コード」を選ぶと、現在のエディターの「改行コード」がすべて置き換えられます。

既存のファイルの「改行コード」を変換したいときに使うと便利です。

複数ファイルの中身を検索

1. アクティビティバーにある「検索」アイコンをクリック。（ショートカットは Ctrl + Shift + F キー）
   
2. 「検索ワード（例では vue.min.js ）」を入力すると、下に一致したファイルが表示されます。（「検索ワード」欄の右端にあるアイコンから「正規表現」も使える）
   
3. 「含めるファイル」欄の右端にあるアイコンを有効にすると、現在エディターで開いているファイルだけを検索対象できます。
   

ツールチップの表示を消す

CSS の「プロパティ」や「値」などにカーソルを重ねると表示される「ツールチップ」を消すには、「settings.json」に次のように追記します。

"editor.hover.enabled": false,

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

消さずに遅延表示させる

ツールチップには、CSS の「プロパティ」「値」の詳細や MDN へのリンクが表示されるので、完全に消すのは嫌という場合もあると思います。

その場合は、カーソルを重ねてからツールチップが表示されるまでの秒数を変更しましょう。

例えば、ポップアップの表示を3秒後にするには、「settings.json」に次のように追記します。

"editor.hover.enabled": true,
"editor.hover.delay": 3000,

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

パンくずリストを消す

エディター上部に表示されている「パンくずリスト」を消すには、「settings.json」に次のように追記します。

"breadcrumbs.enabled": false,

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

消さずに表示を簡略化する

上図のように、「パンくずリスト」を消さず、現在位置だけを表示したい場合は、「settings.json」に次のように追記します。

"breadcrumbs.enabled": true,
"breadcrumbs.filePath": "last",
"breadcrumbs.symbolPath": "last",

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

ちなみに、breadcrumbs.filePath はファイルのパス、breadcrumbs.symbolPath はファイル内の階層についての表示設定です。

breadcrumbs.filePath と breadcrumbs.symbolPath の値には、last 以外も指定でます。動作の好みに合わせて選んで下さい。

タイトルバーの表示

タイトルバーは、デフォルトだと「ファイル名 - ワークスペース名 - アプリ名」という表示になっていますが、私的に「ワークスペース名」は必要ありません。

「ワークスペース名」を削除するには、「settings.json」に次のように追記します。

 "window.title": "${dirty}${activeEditorShort}${separator}${appName}",

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

値に記述できる「変数」には次のようなものがあるので、好みに合わせて変えて下さい。

ちなみに、初期設定（デフォルト）は ${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName} です。