はじめに
VisualStudio Code Windows版 0.10.1 で、React なコードを書いていて、render 内に HTML タグを記述しています。通常は拡張子を .jsx などにすれば JavaScriptReact モードで表示してくれるのですが、プロジェクトによっては拡張子が .js だったり、.react.js だったりして JavaScriptReact モードでは表示してくれません。
今回、拡張子が .react.js のものを JavaScriptReact モードで表示できるよう、設定を調整してみましたので紹介します。
(2015/10/19 追記)
Ver 0.9.1 では本投稿で紹介している、拡張子によるモード割り当てのカスタマイズができなくなりました。
https://code.visualstudio.com/docs/languages/overview
バージョンアップを待ちましょう。
(2015/11/19 追記)
Ver 0.10.1 で再び拡張子によるモード割り当てのカスタマイズができるようになりました。ファイルのパスが一部変わっていますので、Ver 0.10.1 用に投稿を更新しました。Ver 0.8.0 のものは注釈で補足します。
設定ファイル調整
調整する設定ファイルは下記のファイル 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 モードで表示されるはずです。
Ver 0.8.0 の場合
調整する設定ファイル
C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json
修正箇所…先頭にあるプロパティ “fileTypes” に “js” を追加するか、”jsx” を “js” に修正します。
javascriptreact.json
{
"fileTypes": [
"js",
"jsx"
],
(中略)https://www.saintsouth.net/wp-admin/theme-editor.php
}