はじめに
VisualStudio Code Windows版 0.10.1 で、React なコードを書いていて、render 内に HTML タグを記述しています。通常は拡張子を .jsx などにすれば JavaScriptReact モードで表示してくれるのですが、プロジェクトによっては拡張子が .js だったり、.react.js だったりして JavaScriptReact モードでは表示してくれません。
今回、拡張子が .react.js のものを JavaScriptReact モードで表示できるよう、設定を調整してみましたので紹介します。
設定ファイル調整
調整する設定ファイルは下記のファイル 1 つだけです。
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\package.json
このファイルを編集するには、管理者権限が必要になるかもしれません。
contributes.languages[0].aliases に “react.js” を、contributes.languages[0].extensions に “.react.js” をそれぞれ追加します。
contributes.languages[1].extensions にも “.js” がありますが、”.react.js” については contributes.languages[0].extensions が優先されるようです。
package.json
{
"name": "javascript",
"version": "0.1.0",
"publisher": "vscode",
"engines": { "vscode": "*" },
"contributes": {
"languages": [{
"id": "javascriptreact",
"aliases": ["JavaScript React","jsx","react.js"],
"extensions": [".react.js", ".jsx"]
},
(後略)
あとは、アプリを再起動して、すでに開いているファイルを一度閉じて、再度開くと JavaScriptReact モードで表示されるはずです。
htmlの言語設定に、htmlエディタ Expression Web 4 のテンプレートの拡張子 .dwtを追加したかったのですが、うまく認識しません。
※dwtファイルの中身は、コメントタグ内に、アプリケーションの制御コードを入れただけのhtmlファイルです。
Visual Studio Code のVersionは、0.10.6です。
0.10.6は、拡張子によるモード割り当てのカスタマイズは、有効になっているのか、確認していただけないでしょうか。
確認してみましたが、問題なく適用できました。
管理者モードで開いたエディタを使って、「extensions」に “.dwt”を、「aliases」に “dwt” をそれぞれ追加して保存しました。
VS Code を再起動したら、dwt のファイルも HTML と同じようにカラーリングされました。
ありがとうございました。設定できました。
「管理者モードで開いた」がポイントのようです。
通常モードで起動したエディタで、設定を修正して、設定が変わらないと悩んでました。
記事に、きちんと書かれているのに、読み飛ばしていました。
丁寧な対応ありがとうございました。