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

3件の返信

はじめに

　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 モードで表示されるはずです。

「VisualStudio Code で JavaScriptReact モードで表示する拡張子をカスタマイズする」への3件のフィードバック

  1. kukekko

    htmlの言語設定に、htmlエディタ Expression Web 4 のテンプレートの拡張子 .dwtを追加したかったのですが、うまく認識しません。
    ※dwtファイルの中身は、コメントタグ内に、アプリケーションの制御コードを入れただけのhtmlファイルです。

    Visual Studio Code のVersionは、0.10.6です。
    0.10.6は、拡張子によるモード割り当てのカスタマイズは、有効になっているのか、確認していただけないでしょうか。

    C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\html\package.json
    {
	"name": "html",
	"version": "0.1.0",
	"publisher": "vscode",
	"engines": { "vscode": "*" },

	"contributes": {
		"languages": [{
			"id": "html",
			"extensions": [ ".html", ".htm", ".shtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".dwt"],
			"aliases": [ "HTML", "htm", "html", "xhtml", "dwt"],
			"mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template"]
		}],
		"grammars": [{
			/* "language": "html", not yet enabled*/
			"scopeName": "text.html.basic",
			"path": "./syntaxes/HTML.plist"
		}]
	}

}
    返信 ↓
    1. sugimurase 投稿作成者

      確認してみましたが、問題なく適用できました。
      管理者モードで開いたエディタを使って、「extensions」に “.dwt”を、「aliases」に “dwt” をそれぞれ追加して保存しました。
      VS Code を再起動したら、dwt のファイルも HTML と同じようにカラーリングされました。

    2. kukekko

      ありがとうございました。設定できました。
      「管理者モードで開いた」がポイントのようです。
      通常モードで起動したエディタで、設定を修正して、設定が変わらないと悩んでました。

      記事に、きちんと書かれているのに、読み飛ばしていました。

      丁寧な対応ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。