How to make VS Code to handle other file extensions as a specific language?

Question

Or is there a way to switch the current file language to use the syntax highlighting function?

For example, *.jsx actually uses JavaScript, but VS Code does not recognize it.

Answer 1

In Visual Studio Code, you can add persistent file associations to highlight the language in the settings.json file, like this:

 // Place your settings in this file to overwrite the default settings { "some_setting": custom_value, ... "files.associations": { "*.thor": "ruby", "*.jsx": "javascript", "Jenkinsfile*": "groovy" } } 

You can use Ctrl + Shift + p and then enter settings JSON . Select Settings: open Settings (JSON) to open the settings.json file.

Files: Associations was first introduced in Visual Studio Code version 1.0 (March 2016). Check the available templates in the release notes and the lines of known languages in the documentation.

Answer 2

Hold Ctrl + Shift + P (or cmd on Mac), select "Change Language Mode" and there.

But I still can’t find a way to make the files recognized by VS Code with a specific extension defined by some language.

Answer 3

The easiest way I've found for global association is to simply press ctrl + km (or ctrl + shift + p and type “change language mode”) with the open file type you are associating with.

The first choice will be "Set file association for" x "" (regardless of the type of file - see the attached image). If you select this option, file type matching will be permanent.

Perhaps this has changed (maybe?) From the moment of the initial question / answer, and I don’t know when), but it is simpler than the previous steps of manual editing, and avoids the fuss with identifiers that may not be obvious.

Answer 4

eg:

 // .vscode/settings.json in workspace { "files.associations": { "*Container.js": "javascriptreact", "**/components/*/*.js": "javascriptreact", "**/config/routes.js": "javascriptreact" } } 

Answer 5

This works for me.

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

Answer 6

I found a solution here: https://code.visualstudio.com/docs/customization/colorizer

Go to VS_CODE_FOLDER/resources/app/extensions/ and update package.json

Answer 7

This, for example, will cause files ending in .variables and .overrides be processed just like any other LESS file. In terms of code coloring, in terms of (auto) formatting. Define in the user settings or project settings as you like.

(The semantic interface uses these strange extensions if you're interested)

Answer 8

The following steps at https://code.visualstudio.com/docs/customization/colorizer#_common-questions helped me well:

To expand an existing colorizer, you must create a simple package.json in a new folder in .vscode / extensions and provide an extensionDependencies attribute indicating the setting to which you want to add. In the example below, the extension .mmd is added to markdown paint. Please note that not only the extensionDependency name must match the setting, but the language identifier must match the language identifier of the extender that you are extending.

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

Answer 9

Hey. I took a different approach to solve almost the same problem. In my case, I created a new extension that adds PHP syntax support for Drupal files such as .module and .inc): https://github.com/mastazi/VS-code-drupal

As you can see in the code, I created a new extension, and did not modify the existing PHP extension. Obviously, I am declaring a dependency on the PHP extension in the Drupal extension.

The advantage of this method is that if there is an update for the PHP extension, my user support for Drupal is not lost during the update process.

Answer 10

"cmd-k m" is bound to "workbench.action.editor.changeLanguageMode" by default, but I did not find a way to automatically associate the file extension with the language mode

Answer 11

TOOLS-> Options-> Text Editor-> File Extensions. From there, you can add an extension and select the known extension / language you want to relate to.