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

この記事は約7分で読めます。
記事内に広告が含まれています

エディター画面

こんにちは、さち です。

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

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

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

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

スポンサーリンク

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

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

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

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

{
  "editor.fontSize": 13,
}

いろいろな小技

常に「行」を折り返す

エディター画面

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

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

"editor.wordWrap": "on",

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

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

off 折り返さない(デフォルト)
on 「右端」で折り返す
wordWrapColumn 「指定文字数」で折り返す
bounded 「右端」または「指定文字数」の小さい方で折り返す

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

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 の値は、他にも次のようなものを指定できます。

\n 「LF(\n)」にする
\r\n 「CRLF(\r\n)」にする
auto Windows は「CRLF」、Mac・Linuxは「LF」(デフォルト)
値の指定に使う \ 記号は、PC環境 や使用するフォントによって表示が異なり、 \(バックスラッシュ) に見えたり ¥(円記号) に見えたりします

改行コードを変換する

画面右下にある「改行コード(例では 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 以外も指定でます。動作の好みに合わせて選んで下さい。

on すべて表示する(デフォルト)
off 表示しない
last 現在位置だけ表示する

タイトルバーの表示

タイトルの表示

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

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

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

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

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

${dirty} ファイルが未保存のときの●印
${activeEditorShort} ファイル名
${activeEditorMedium} ワークスペースのフォルダーからファイルまでのパス
${activeEditorLong} ファイルの絶対パス
${separator} セパレーター(区切り記号の「-」)
${rootName} ワークスペース名
$(folderName} ワークスペースのフォルダー名
$(folderPath} ワークスペースの絶対パス
${appName} アプリ名(Visual Studio Code)

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

コメント

タイトルとURLをコピーしました