Visual Studio Codeで拡張子が原因で色分けできない場合の解決法

Tools
質問する生徒
生徒

僕のVisual Studio Codeが色分けされないんですよ。困ってます。

回答する先生
先生

私もVisual Studio Codeで同じ現象がありました。その時に対応したことを教えますね!

Visual Studio Codeに拡張機能でGitHub Themeを入れても拡張子が.html以外のファイルだとHTMLと認識されずに色分けされません。
私の場合は拡張子.tplを編集しようとした時に起きた問題です。

この記事ではVisual Studio Codeに拡張機能でThemeを入れても色分けされない場合の解決法を紹介します。

Visual Studio Codeを使用中に、メニューバーのの隣のCodeをクリックし基本選定>設定と進むと、設定が開き左側のメニューに

よく使用するもの
> テキストエディター
> ワークベンチ
> ウィンドウ
> 機能アプリケーション
> セキュリティ
> 拡張機能

と表示してあるので> ワークベンチをクリックしてください。

Editor Associations
glob パターンをエディターに構成します (例: “*.hex”: “hexEditor.hexEdit”)。これらは既定の動作よりも優先されます。

と表示された下部に[項目の追加]ボタンがあるのでクリック

項目と値を入力フォームが表示されるので、

項目に *.tpl
値に html
と入力してOKボタンをクリックすれば完了です。

.tplの部分は色分けされない拡張子を入力してください。

> 拡張機能のHTMLのsettings.jsonで直接編集することもできます。

[HTML] [html] 言語の場合にオーバーライドされる設定を構成します。
settings.jsonで編集

settings.jsonで編集をクリックし、settings.jsonファイルが開いたら”*.tpl”: “html”を追加してください。

{
    "workbench.colorTheme": "GitHub Dark",
    "security.workspace.trust.untrustedFiles": "open",
    "workbench.iconTheme": "material-icon-theme",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "files.associations": {
        "*.tpl": "html"
    },
    "auto-rename-tag.activationOnLanguage": [
    
        "*"
    ]
}

ちなみにテキストエディタなどのソースコードに色分けされることを、シンタックスハイライト(syntax highlighting)と呼びます。

質問する生徒
生徒

ありがとうございます!Visual Studio Codeで色分けされてます。