VSCodeで日本語を含むコードや文章を編集していると、意図せず全角スペースが入り込むことがあります。
全角スペースは見た目では通常の半角スペースと区別しにくいため、コードのエラーや検索漏れの原因になることがあります。
VSCodeでは、空白文字を見やすくする機能に加えて、検索機能を使って全角スペースを探すことができます。
特に、全角スペースを確実に見つけたい場合は、実際の全角スペース文字を検索する方法がシンプルで確実です。
ここでは、VSCodeで全角スペースを表示・検索する方法や、一括置換する方法について詳しく解説します。
VSCodeで全角スペースを検索する方法
現在のファイルから全角スペースを検索する
現在開いているファイルだけを対象に全角スペースを探したい場合は、VSCodeのファイル内検索を使用します。
Windows・Linuxでは次のショートカットを使用します。
Ctrl + FmacOSでは次のショートカットです。
Cmd + F検索ボックスが表示されたら、検索欄に全角スペースを1文字入力します。
見た目では何も入力されていないように見えますが、上記には全角スペースが1文字入っています。
全角スペースをキーボードから入力しにくい場合は、次の括弧内にある空白部分だけをコピーして検索欄へ貼り付けても構いません。
「 」ファイル内に全角スペースが存在すれば、該当箇所が検索結果として表示されます。
全角スペースはU+3000の文字
日本語で一般的に「全角スペース」と呼ばれている文字は、Unicodeでは次の文字です。
U+3000 IDEOGRAPHIC SPACE一方、通常の半角スペースは次の文字です。
U+0020 SPACEつまり、半角スペースと全角スペースは見た目が似ていても、コンピューター上では異なる文字として扱われます。
例えば、次の2つは異なります。
abc def上記は半角スペースです。
abc defこちらは全角スペースです。
そのため、プログラミングや設定ファイルでは、意図しない全角スペースが問題になる場合があります。
VSCodeでプロジェクト全体から全角スペースを検索する方法
Ctrl + Shift + Fでワークスペース全体を検索する
複数のファイルをまとめて確認したい場合は、VSCodeのワークスペース検索を利用します。
Windows・Linuxでは次のショートカットを使用します。
Ctrl + Shift + FmacOSでは次のショートカットです。
Cmd + Shift + F検索パネルが表示されたら、検索欄に実際の全角スペースを入力します。
これにより、VSCodeで開いているフォルダやワークスペース全体から、全角スペースが含まれているファイルを探せます。
HTML、CSS、JavaScript、PHP、JSON、Markdownなど、複数種類のファイルを扱うWeb制作でも便利な方法です。
検索対象のファイルを限定する
プロジェクトが大きい場合は、検索するファイルを絞り込むと効率的です。
例えば、HTMLファイルだけを対象にする場合は次のように指定します。
**/*.htmlCSSだけなら次のように指定します。
**/*.cssJavaScriptだけなら次のように指定できます。
**/*.js複数の拡張子を対象にしたい場合は、例えば次のように指定できます。
**/*.{html,css,js}全角スペースを探す対象をソースコードだけに限定したい場合にも便利です。
VSCodeで空白文字を表示する方法
editor.renderWhitespaceを設定する
VSCodeには、スペースやタブなどの空白文字を見やすくする設定があります。
設定画面を開くには、Windows・Linuxでは次のショートカットを使用します。
Ctrl + ,設定画面の検索欄で、
render whitespaceと検索し、「Editor: Render Whitespace」を変更します。
すべての空白文字を表示したい場合は、
allを選択します。
settings.jsonから設定する場合は、次のように記述できます。
{
"editor.renderWhitespace": "all"
}これにより、通常のスペースやタブなどの空白文字を視覚的に把握しやすくなります。
Render Whitespaceだけに頼らない
注意したいのは、editor.renderWhitespaceを全角スペース専用の検出機能と考えないことです。
この設定は、空白文字全般を見やすくするための補助機能として便利ですが、全角スペースを確実に見つけたい場合は検索機能を併用するほうが確実です。
そのため、実用上は、
空白文字を表示する
+
全角スペースを検索するという使い方がおすすめです。
コマンドパレットから空白文字の表示を切り替える方法
Toggle Render Whitespaceを使う
設定画面を開かずに、一時的に空白文字の表示を切り替えることもできます。
Windows・Linuxでは、
Ctrl + Shift + PmacOSでは、
Cmd + Shift + Pを押してコマンドパレットを開きます。
続いて、
Toggle Render Whitespaceと入力して該当するコマンドを実行します。
空白文字を一時的に確認したい場合に便利です。
正規表現で全角スペースを検索する方法
VSCodeの検索では、正規表現を使用できます。
検索欄の右側にある、
.*のボタンを有効にすると、正規表現検索へ切り替えられます。
行頭にある全角スペースを検索する
行頭に全角スペースが入っている場所だけを探したい場合は、次の正規表現を使用できます。
^ ^は行頭を表します。
例えば、
const name = "sample";のように、行頭へ全角スペースが入っている場所を検索できます。
コードのインデントとして誤って全角スペースを入力していないか確認するときに便利です。
行末にある全角スペースを検索する
行末に全角スペースが残っている場所を探したい場合は、次のように検索します。
$$は行末を表します。
例えば、
テキスト のように、行末へ全角スペースが入っている場所を見つけられます。
連続する全角スペースを検索する
1文字以上連続している全角スペースを探したい場合は、次のように検索できます。
+正規表現の+は、直前の文字が1回以上続いていることを意味します。
2文字以上連続している場所だけを検索したい場合は、次のように指定します。
{2,}日本語文章の字下げや、意図しない連続スペースを調査するときに利用できます。
半角スペースと全角スペースをまとめて検索する
半角スペースと全角スペースの両方を対象にしたい場合は、次のような文字クラスを使えます。
[ ]角括弧の中には、
半角スペース
全角スペースが1文字ずつ入っています。
これにより、どちらか一方に一致する場所を検索できます。
ただし、タブは別の文字なので、この正規表現だけではタブは対象になりません。
\u3000による検索は基本的に使わなくてもよい
全角スペースのUnicodeコードポイントはU+3000なので、
\u3000という記述を思い浮かべる人もいるかもしれません。
ただし、VSCodeでは検索する場所や使用される検索処理によって正規表現の扱いが異なる場合があります。
そのため、一般的な使い方としては、
という実際の全角スペース文字をそのまま検索欄へ入力する方法のほうが分かりやすく、確実です。
全角スペースを探すだけであれば、Unicodeエスケープ表記を無理に使う必要はありません。
VSCodeで全角スペースを半角スペースへ置換する方法
現在のファイル内で置換する
現在開いているファイルで全角スペースを半角スペースへ置換する場合は、検索・置換機能を使用します。
Windows・Linuxでは、
Ctrl + Hを使用します。
macOSでは、
Option + Cmd + Fを使用できます。
検索欄には全角スペース、
を入力します。
置換欄には半角スペースを1文字入力します。
そのうえで「すべて置換」を実行すれば、
全角スペース → 半角スペースへ変換できます。
プロジェクト全体で一括置換する
ワークスペース全体で置換する場合は、Windows・Linuxで次のショートカットを使用できます。
Ctrl + Shift + HmacOSでは次のショートカットです。
Shift + Cmd + H検索欄に全角スペース、置換欄に半角スペースを指定すれば、複数ファイルをまとめて修正できます。
ただし、プロジェクト全体への一括置換は影響範囲が大きいため、実行前に検索結果を確認することが重要です。
全角スペースを一括置換するときの注意点
日本語文章では全角スペースが正しい場合もある
全角スペースは、必ずしも削除すべき文字ではありません。
例えば日本語文章では、段落の最初を1文字下げる目的で全角スペースを使用することがあります。
これは文章の先頭です。READMEやMarkdown、ブログ記事の原稿などを含むプロジェクトで全角スペースを一括置換すると、意図した字下げまで消してしまう可能性があります。
そのため、置換前に対象ファイルと検索結果を確認することが大切です。
ソースコードだけを対象にすると安全性が高まる
全角スペースをコードから除去したいのであれば、検索対象をソースコードだけに限定すると安全です。
例えば、
**/*.{js,ts,html,css,php}のように指定すれば、Markdownや文章ファイルを除外しやすくなります。
全角スペースがプログラミングで問題になる理由
全角スペースと半角スペースは別の文字
プログラミングでは、見た目が似ているからといって同じ文字として扱われるとは限りません。
例えば、
if (condition) {
}と、
if (condition) {
}では、ifと(の間にある文字が異なります。
前者は一般的な半角スペースですが、後者には全角スペースが入っています。
プログラミング言語やツール、入力位置によっては、意図しない全角スペースが構文エラーや想定外の処理につながる可能性があります。
コマンドや設定ファイルでも注意が必要
全角スペースは、プログラム本体だけでなく、
- ターミナルで入力するコマンド
- JSON
- YAML
- 設定ファイル
- 正規表現
- HTML属性
- URLやパス
- シェルスクリプト
などでも問題になる場合があります。
「見た目は同じなのに動かない」という場合は、全角スペースが混入していないか確認するとよいでしょう。
VSCodeで全角スペースを確認するおすすめの方法
現在のファイルだけならCtrl + Fを使う
最も簡単な方法は、
Ctrl + FまたはmacOSの、
Cmd + Fを使い、実際の全角スペースを検索する方法です。
正規表現の知識も必要ないため、初心者にも使いやすい方法です。
プロジェクト全体ならCtrl + Shift + Fを使う
複数のファイルを確認する場合は、
Ctrl + Shift + Fを使ってワークスペース全体を検索します。
macOSでは、
Cmd + Shift + Fです。
コード全体に全角スペースが混入していないかチェックしたい場合に適しています。
空白文字を見やすくするならRender Whitespaceを併用する
普段から空白文字を見やすくしたい場合は、
{
"editor.renderWhitespace": "all"
}を設定しておくと便利です。
ただし、全角スペースを探す目的では検索機能も併用すると、より確実に確認できます。
VSCodeで全角スペースを探す方法のまとめ
VSCodeで全角スペースを確認する場合は、実際の全角スペース文字を検索する方法が最も分かりやすく確実です。
現在のファイルなら、
Ctrl + Fプロジェクト全体なら、
Ctrl + Shift + Fを使用します。
さらに、
{
"editor.renderWhitespace": "all"
}を設定すれば、通常のスペースやタブなどの空白文字も見やすくできます。
行頭や行末など特定の位置にある全角スペースだけを探したい場合は、正規表現を利用すると便利です。
^ なら行頭、
$なら行末、
+なら連続する全角スペースを検索できます。
なお、全角スペースは日本語文章では意図的に使用されることもあります。
プロジェクト全体で一括置換するときは、READMEやMarkdown、記事原稿などに必要な全角スペースまで変更しないよう、検索結果を確認してから置換することが重要です。
以上、VSCodeで全角スペースを表示・検索する方法についてでした。
最後までお読みいただき、ありがとうございました。
