VisualStudio Code で JavaScriptReact モードで表示する拡張子をカスタマイズする

はじめに

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

}