こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
今回は、この VSCode で、「スペース（空白）」に関する小技について書いていきます。
たかが「スペース」、されど「スペース」。「スペース」の設定で使い勝手は大きく変わってきます。
正直に言うと、私が使っている機能で、一つ一つは大した内容じゃないけど地味に便利な機能を、備忘録として残す記事です。
拡張機能は使わない機能ばかりなので、はじめて知るものがあれば、ぜひ使ってみて下さい。
【まえおき】 「settings.json」の編集方法
後ほど出てくる、VSCode の設定ファイル「settings.json」を開く方法については、こちらの記事を参考にして下さい。
「settings.json」を編集（記述）するときは、下記の例のように最初の { と最後の } の間に追記します。上書き保存も忘れずにしましょう。
{
"editor.fontSize": 13,
}
スペースに関する小技
保存時にスペースを変更させない
ファイルを保存するときに、「インデント」などのスペース（空白）が自動で削除・変更されてしまいます。自分が見やすいように整形しているので、勝手に崩されるのは困る……。
この現象を防ぐには、「settings.json」に次のように追記します。
"editor.formatOnSave": false,
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
スペースを見えるようにする
「スペース」は見えないので、誤って変な位置に入力していても、気づかないことがよくあります。「半角スペース」「タブスペース」を見えるようにして解決しましょう。
「settings.json」に次のように追記します。
"editor.renderWhitespace": "all",
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
all 以外にも指定できる値があります。動作の好みに合わせて選んで下さい。
| all | すべて表示する |
| boundary | 文章中の単スペース以外を表示する |
| none | 表示しない |
Tabキーで入力するスペースを指定する
Tab キーを押したときに入力される「スペース」の種類を指定します。「インデント」をどの種類の「スペース」でするかという、個人の好みに関わる設定です。
ちなみに私は、ファイルサイズを小さくできる、スペースを表示してもスッキリしているという理由で、「タブスペース」が好きです。
「タブスペース」を入力する
Tab キーを押したときに「タブスペース」を入力するには、「settings.json」に次のように追記します。
"editor.insertSpaces": false, "editor.tabSize": 2,
"editor.tabSize": 2, は、タブスペースの広さの指定です。（初期設定では半角スペース4個分）
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
「半角スペース」の個数を変える
Tab キーを押したときに「半角スペース」が入力されるのは良いけど、個数を変えたいという場合は変更できます。
例えば、半角スペース2個にする場合は、「settings.json」に次のように追記します。
"editor.insertSpaces": true, "editor.tabSize": 2,
"editor.insertSpaces": true, は VSCode の初期設定なので、記述してもあまり意味がありませんが、false になっている場合もあるので一応書いておきます。
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
既存ファイルにも設定を強制する
既存ファイルを開いた場合は、そのファイルで使われている「インデント」の方法に自動で合わせるようになっています。
他人が作ったファイルを変更したい時に便利な機能ですが、嫌な場合は「settings.json」に次のように追記することで解除できます。
"editor.detectIndentation": false,
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
末尾のスペースを自動で消す
内容変更や操作ミスなどによって、意図せず末尾に残ったスペースを、保存時に自動で削除します。
行末のスペースを消す
行末に残ったスペースを保存時に自動で削除するには、「settings.json」に次のように追記します。
"files.trimTrailingWhitespace": true,
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
最終行以降の行を消す
最終行以降の記述のない空の行を保存時に自動で削除するには、「settings.json」に次のように追記します。
"files.trimFinalNewlines": true,
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
この設定をしても、最後の空の行は1行だけ残る仕様なので、「.htaccess」など最後に空の行が必要とされる記述も問題ありません。
全角記号の強調表示を止める
次のような、「全角」の一部の「文字」「記号」は、強調される仕様です。
- スペース（全角・ゼロ幅など）
- 大カッコ（角カッコ）
- ビックリマーク（エクスクラメーション）
- アポストロフィー
- グラーブアクセント
- バックスラッシュ
- ギリシャ文字の一部（α, γ など）
これらは、形が似た他の文字と混同しないように強調表示されているのですが、必要ない場合は機能を停止できます。
「スペース」以外の強調表示を止める
「スペース」の強調表示は残して、他の文字の強調表示だけを止めるには、「settings.json」に次のように追記します。
"editor.unicodeHighlight.ambiguousCharacters": false,
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
「スペース」の強調表示を止める
「スペース」の強調表示を止めるには、「settings.json」に次のように追記します。
"editor.unicodeHighlight.invisibleCharacters": false,
「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。
この設定は、前述の半角スペース・タブスペースの表示には影響しません。
コメント