これまでSublime Textを愛用していたのですが、PCを買い替えたタイミングでVSCode(Visual Studio Code)に乗り換えてみました。
今回は、VSCodeのインストールから日本語化、Wordpressをカスタマイズする際におすすめの拡張機能も併せて紹介していきたいと思います。
目次
VSCodeのインストーラーをダウンロード
まず、VSCode公式サイトからインストーラーをダウンロードします。
インストーラーを実行
ダウンロードしたインストーラーをダブルクリックして実行します。
使用許諾契約書の同意
VSCodeセットアップの画面が立ち上がります。まず「使用許諾契約書の同意」ですが、内容を確認して同意するにチェックを入れて次へをクリックします。
インストール先の指定
Cドライブ以外にインストールしたい場合を除いて、そのまま次へをクリックします。
スタートメニューフォルダーの指定
ここも特に問題なければ次へをクリックしてください。
追加タスクの選択
ここはデスクトップ上にアイコンを作成するにチェックを入れて次へをクリックします。
インストール準備完了からインストールへ
ここまで選択した内容が確認できますので、問題なければインストールをクリックします。
インストールが無事に終わると、完了画面に切り替わりますので完了ボタンをクリックします。これでVSCodeのインストール完了です。
VSCodeの日本語化
「完了」ボタンをクリックするとVsCodeが立ち上がりますので、そのまま日本語化の設定を行ないます。
VSCodeのサイドメニューにある拡張機能のアイコンをクリックします。
「EXTENSIONS: MARKETPLACE」が開きますので、検索フォームにjapaneseと入力します。その後、表示される「Japanese Language Pack for Visual Studio Code」のinstallをクリックします。
インストールが完了すると、画面右下にChange Launguage and RestartボタンがありますのでクリックしてVsCodeを再起動させます。
再起動後、画像のように日本語が表示されていれば日本語化の完了です。
VSCodeおすすめの拡張機能
WordPressをカスタマイズする上で便利な拡張機能を紹介していきます。拡張機能のインストール方法は先ほどの「Japanese Language Pack for Visual Studio Code」のインストールと同じで、検索してインストールという流れです。
WordPress Snippets
WordPressのタグを補完してくれる拡張機能です。
例えば、get_b と入力したら候補が表示されるようになります。
PHP Intelephense
WordPressは基本的にPHPで構成されていますので、PHPの命令文補完や文法チェックといったコーディングするときに便利な拡張機能です。
IntelliSense for CSS class names in HTML
HTMLでclass指定をするときに、あらかじめ定義していたclass名を候補一覧に表示してくれる拡張機能です。
Highlight Matching Tag
WordPressのファイルはPHPとHTMLが混在していることが多く、可読性があまりよくありません。foreach文に複数のif文が入れ子になっている場合など非常に見にくくなってしまいます。
ただ、この「Highlight Matching Tag」を使用することで、開始タグに対応した終了タグをハイライト表示してくれるので記述ミスを減らすことができます。
他にも便利な拡張機能はあるのですが、あまり入れすぎると動作が重くなってしまうデメリットもあるので、ここでは必要最小限の拡張機能を紹介させていただきました。
VSCode(Visual Studio Code)を使い始めて、それほど経っていないので他にも便利な拡張機能があると思うので、また機会があれば紹介していきたいと思っております。