Visual Studio CodeでHTMLファイルを編集している際に、lang="en" を lang="ja" に変更しようとすると、ダブルクォーテーションが消えたり、自動補完が崩れたりして困ることがあります。これはHTML自体の問題ではなく、入力モードや拡張機能、エディタ設定が原因になっているケースが多いです。
HTMLのlang属性とは何か
HTMLでは、ページの言語を指定するために lang 属性を使用します。例えば英語ページなら <html lang="en">、日本語ページなら <html lang="ja"> と記述します。
検索エンジンやブラウザ、音声読み上げ機能などがページ言語を認識するため、SEOやアクセシビリティの観点でも重要な設定です。
ダブルクォーテーションが消える主な原因
Visual Studio Codeでは、自動補完機能や日本語入力システム（IME）が干渉し、クォーテーションが意図せず消える場合があります。
特に、日本語入力がONのまま編集していると、半角の " が全角扱いになったり、自動ペア補完機能が誤作動するケースがあります。
例えば、lang="en" の en を削除して ja を入力した際、自動補完が途中で崩れて片方のクォーテーションだけ消えることがあります。
Visual Studio Code側の設定確認
Visual Studio Codeには、クォーテーションを自動で補完する設定があります。設定画面で Editor: Auto Closing Quotes を確認すると改善する場合があります。
通常は always に設定されているため、入力途中で誤動作する場合は一時的に languageDefined や never に変更して動作を確認する方法もあります。
また、HTML関連の拡張機能が競合している場合もあるため、不要な拡張機能を無効化すると改善するケースがあります。
実際に多い入力ミスの例
初心者の方に多いのが、lang="en" の一部だけを削除しようとして、クォーテーションまで消してしまうケースです。
例えば以下のような状態になると、HTMLエラー扱いになります。
<html lang="ja>
正しくは以下のように、左右のダブルクォーテーションを残す必要があります。
<html lang="ja">
また、日本語入力モード中に全角の ” が入力されると正常に認識されない場合もあります。
HTML編集時におすすめの対策
HTML編集時は、半角英数字入力モードに切り替えてから編集するのがおすすめです。特にタグ編集中は、日本語IMEをOFFにするだけで多くのトラブルを防げます。
さらに、Visual Studio CodeのEmmet機能やHTML補完機能を利用すると、タグ構造の崩れを減らせます。
定期的に保存しながら編集し、エラー表示が出た場合はクォーテーションやタグの閉じ忘れを確認すると、問題を素早く発見できます。
まとめ
Visual Studio Codeで lang="en" を lang="ja" に変更する際にクォーテーションがおかしくなる原因は、HTML仕様ではなく、IMEや自動補完機能、入力ミスによるケースがほとんどです。
半角入力を意識し、自動補完設定や拡張機能を確認することで、多くの問題は解決できます。HTMLタグはクォーテーションの対応関係が重要なので、編集後はタグ全体を確認する習慣をつけると安心です。
コメント