VS Codeの日本語化とEmmetの設定について

この記事では VS Code を日本語化するための手順と、いくつかの便利な設定について紹介していきます。

VS Codeの日本語化

VS Code を日本語化するための手順を解説します（なお、VS Codeのバージョンによって表記が多少違う場合があります）。

↑ VS Codeを起動します。

↑ サイドバーにあるExtensionsのアイコンをクリックします。

↑ このような画面になります。

↑ 検索窓でJapaneseと検索し、『Japanese Language Pack 日本語』をクリックしてください。

↑ 『Install』をクリックします。

↑  『Change Language and Restart』をクリックし、VS Code を再起動します。

↑ 表記が日本語表示になっていれば成功です！

Emmetの設定

VS Codeのemmetで『!』を入力すると出てくるコードですが、そのままだと『lang="en"』となっています。これを『lang="ja"』にする方法について説明していきます。

↑ こちらを『lang="ja"』にする方法について見ていきます。

↑ VS Code を起動します。

↑ メニューバーから『Code』 → 『基本設定』 → 『設定』と選択します。

↑  上記のような画面になります。

↑  検索窓で『emmet.valiables』と検索すると『Emmet: Valiables』という項目が出てくるので、『項目の追加』をクリックします。

↑ このように表示されます。

↑ 『値』を『ja』に変更し、OKボタンをクリックします。

↑ このように表示されれば設定完了です。

↑ 試しにHTMLファイルで『!』としてからエンターキーを押します。

↑  無事『lang="ja"』と表示されました！

!がうまくいかない場合

言語モードがHTMLに設定されていない場合、『!』としてもうまくコードが入力されません。その場合は言語モードを見直しましょう。

↑ 言語モードが『HTML』以外、例えば上の画像のように『CSS』となっているとうまくいきません。

↑ 『!』と入力してもうまく動作しません。これは『CSSファイル』と認識されてしまっているためです。

↑ 言語モードをHTMLにするには、右下の『CSS』をクリックし、検索窓に『html』と入力しエンターキーを押します。

↑ 成功すると右下が『HTML』となります。ここが『HTML』になっていない場合はもう一度やり直してください。

↑ 再度『!』と入力すると、きちんと動作していますね！

以上、VS Code日本語化の手順について説明してみました。参考にしてみてください。