Visual Studio Codeが、拡張子 .dwtをhtmlファイルと識別するように設定する

いろいろと存在する、htmlエディタでは、テンプレートファイルとして、htmlファイルに独自の拡張子を設定していることがあります。 私が使用している、Expresson Web 4では、拡張子として.dwtが使われています。 この.dwtファイルを、設定を変更することで、Visual Studio Codeで、htmlとして認識されるようにします。

Visual Studio Codeについて

Visual Studio Codeは、搭載されている入力補助機能のインテリセンスが強力なので、使えるようになりたいエディタの１つです。 しかし、ドキュメントの殆どが英語なので、情報自体の入手が大変です。

そのため、現時点では、Visual Studio Codeではなく、Atomを選択する方が多いようです。

Visual Studio Codeを起動します。

まず、Visual Studio Code を管理者として実行します。Windowsでは、Visual Studio Codeの設定ファイルは、迷惑ですが管理領域に存在するので、管理者として実行していないと変更が反映されません。 「管理者として実行」します。

Visual Studio Codeで、htmlとして認識される拡張子を追加します。

参考：

code.visualstudio.com

www.saintsouth.net

まず、htmlの設定が格納されているフォルダに移動します。

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", ".xhtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".vue" ],
			"aliases": [ "HTML", "htm", "html", "xhtml" ],
			"mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template", "application/xhtml+xml"]
		}],
		"grammars": [{
			/* "language": "html", not yet enabled*/
			"scopeName": "text.html.basic",
			"path": "./syntaxes/HTML.plist"
		}]
	}

}

"extensions":の項目が拡張子を示していますので、.dwtを追加します。

"extensions": [ ".html", ".htm", ".shtml", ".xhtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".vue" , ".dwt" ],

これで、保存します。このまま、.dwtファイルを開いても変化ありません。 一度、Visual Studio Codeを終了し、再度起動して、.dwtファイルを開きます。 すると、強調表示が反映されていることが確認できます。