他のファイル拡張子を特定の言語として扱うようにVS Codeを作成するにはどうすればよいですか？

333

または、現在のファイルの言語を切り替えて構文強調表示機能を使用する方法はありますか？

たとえば、*.jsx実際にはJavaScriptを使用していますが、VS Codeはそれを認識しません。

visual-studio-code vscode-settings

501

ではVisual Studioのコードを、あなたはあなたにハイライト表示言語のための永続的なファイルの関連付けを追加することができsettings.json、このようなファイル：

// Place your settings in this file to overwrite the default settings
{
  "some_setting": custom_value,
  ...

  "files.associations": {
    "*.thor": "ruby",
    "*.jsx": "javascript",
    "Jenkinsfile*": "groovy"
  }
}

あなたは使用することができますCtrl+ Shift+ p、次に入力しますsettings JSON。[設定]：[設定を開く（JSON）]を選択して、を開きますsettings.json。

このFiles: Associations機能は、Visual Studio Codeバージョン1.0（2016年3月）で初めて導入されました。リリースノートで利用可能なワイルドカードパターンとドキュメントの既知の言語文字列を確認してください。

— ジョシアン
ソース

6

関連付けの値は、名前ではなく、言語/プラグインのIDである必要があります。たとえば、私がインストールしたVBScriptプラグインの場合、IDはvbsです。"* .vms"： "vbs"は、適切に関連付けるカスタム拡張子を取得します。

— Matt Merrill、

ちょうど同じような問題に直面しました。ファイルの関連付けを追加しても機能しない場合は、.editorconfigファイルを閉じていないことを確認するか、VSCodeとの間で構成を調整し.editorconfigてください。後者が優先されます

— RecuencoJones

これらの設定をプロジェクト固有の${projectdir}/.vscode/settings.jsonファイルに入れることもできます。

— Jason

108

Ctrl + Shift + P（またはMacの場合はcmd）を押したまま、「言語モードの変更」を選択します。

しかし、VS Codeが特定の言語として特定の拡張子を持つファイルを認識できるようにする方法がまだ見つかりません。

— ジョン・ディーブ
ソース

3

直接のショートカットがあるようChange Language Modeです。Alt+K, M

— スタッフォードウィリアムズ

Cmd+K, MMac用。

— GreeKatrina

これは非常に可能です。以下の私の回答を参照してください：stackoverflow.com/a/51228725/3307796

— JoelAZ

69

グローバルな関連付けについて私が見つけた最も簡単な方法は、関連付けている種類のファイルを開いてctrl + km（またはctrl + shift + pと入力して「言語モードの変更」と入力）することです。

最初の選択は「 'x'のファイルの関連付けを構成する」（ファイルの種類は何でも-添付の画像を参照）になります。これを選択すると、ファイルの種類の関連付けが永続的になります。

これは元の質問と承認済みの回答から変更された可能性があります（おそらく変更されました）（いつ変更されたかはわかりません）。ただし、承認済みおよびその他の回答の手動編集手順よりもはるかに簡単であり、明白ではないかもしれないIDを持つムス。

— JoelAZ
ソース

2

ありがとう-これは私のために働いた。settings.jsonファイルを手動で編集するとき、拡張IDがどうあるべきかは明確ではありませんでしたが、このメソッドはそれをソートしました！

— ccbunney

1

@ccbunneyをご利用いただき、ありがとうございます。それは私が抱えていたのとまったく同じ問題でした-そして、必要な拡張機能IDを理解することはできませんでした（笑）。とにかく、私は自分のためにこの解決策を見つけて本当に嬉しかったです、そしてそれが他の人々を助けているのはクールです！：D

— JoelAZ

33

例えば：

// .vscode/settings.json in workspace

{
  "files.associations": {
    "*Container.js": "javascriptreact",
    "**/components/*/*.js": "javascriptreact",
    "**/config/routes.js": "javascriptreact"
  }
}

— B.Ma
ソース

1

いいね。これは、拡張子は同じですが、パスに基づいて言語パーサーが異なる場合に便利です。たとえば、1つのフォルダーでConcourseパイプラインを処理し、別のフォルダーでAnsibleファイルを処理するymlを使用できます。

— クリスチャンマスレン2017

できれば2回賛成します。.html拡張子と私のNanocレイアウトとパーシャルのための構文を持続しようとすると、これはそれを解決されて："**/layouts/**/*.html": "erb"-価値VSCode「言語モード」ドロップダウンショーという構文ハイライトの括弧などの実際の名前に注目Ruby ERB (erb)

— デイブEveritt

18

これは私にとってはうまくいきます。

{
"files.associations": {"*.bitesize": "yaml"}
 }

— イスラアマラシンゲ
ソース

12

これにより、たとえば、ファイルが末尾に.variablesなり.overrides、他のLESSファイルと同じように扱われます。コードの色付けの観点から、（自動）書式の観点から。必要に応じて、ユーザー設定またはプロジェクト設定で定義します。

（セマンティックUIは、これらの奇妙な拡張機能を使用しています。

— フランク・ノッケ
ソース

12

私はここに解決策を見つけました：https：//code.visualstudio.com/docs/customization/colorizer

移動しVS_CODE_FOLDER/resources/app/extensions/てそこに更新package.json

— tonda13
ソース

8

https://code.visualstudio.com/docs/customization/colorizer#_common-questionsの手順に従うと、うまくいきました。

既存のカラーライザーを拡張するには、.vscode / extensionsの下の新しいフォルダーに単純なpackage.jsonを作成し、追加するカスタマイズを指定するextensionDependencies属性を指定します。以下の例では、拡張子.mmdがmarkdown colorizerに追加されています。extensionDependency名がカスタマイズと一致する必要があるだけでなく、言語IDも拡張するカラライザの言語IDと一致する必要があることに注意してください。

{
    "name": "MyMarkdown",
    "version": "0.0.1",
    "engines": {
        "vscode": "0.10.x"
    },
    "publisher": "none",
    "extensionDependencies": [
        "markdown"
    ],
    "contributes": {
        "languages": [{
            "id": "markdown",
            "aliases": ["mmd"],
            "extensions": [".mmd"]
        }]
    }
}

— MicMro
ソース

5

私はほとんど同じ問題を解決するために別のアプローチに従いました。私の場合、Drupal固有のファイル（.moduleや.incなど）のサポートを強調するPHP構文を追加する新しい拡張を作成しました：https：// github。 com / mastazi / VS-code-drupal

コードからわかるように、既存のPHP拡張を変更するのではなく、新しい拡張を作成しました。明らかに、私はDrupal拡張モジュールでPHP拡張モジュールへの依存関係を宣言しています。

この方法で行うことの利点は、PHP拡張の更新がある場合、Drupalのカスタムサポートが更新プロセスで失われないことです。

— マスタジ
ソース