How to make VS Code treat a file extensions as a certain language?
Or is there a way to switch the current file's language so that the syntax is highlighted correctly?
For example, *.jsx
is actually JavaScript but VS Code doesn't recognize it.
Update
Please note that JoelAZ's answer is much easier and results in the same setting changes! The answer below is still valid, just more steps & more fuss.
Old answer
In Visual Studio Code, you can add persistent file associations for language highlighting to your 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 (or View -> Command Palette from the menu) and then type settings JSON
. Choose Preferences: Open Settings (JSON) to open your settings.json
.
To find the proper language ID, use Ctrl+Shift+P (or View -> Command Palette from the menu) and then type Change Language Mode
. You can see the language ID in the list, e.g. type docker
to find the language ID for Docker files (dockerfile
). In the first entry in the example above, .thor
is the file ending, ruby
is the language ID.
The Files: Associations
feature was first introduced in Visual Studio Code version 1.0 (March 2016). Check the available wildcard patterns in the release notes and the known language strings in the documentation.
The easiest way I've found for a global association is simply to Ctrl+k m (or Ctrl+Shift+P and type "change language mode") with a file of the type you're associating open.
In the first selections will be the option "Configure File Association for 'x' " (whatever file type - see image attached). Selecting this gives you the option to choose the language and will then make the filetype association permanent.
This may have changed (probably did) since the original question and accepted answer (and I don't know when it changed) but it's so much easier than the manual editing steps in the accepted and some of the other answers, and totaly avoids having to muss with IDs that may not be obvious.
Hold down Ctrl+Shift+P (or cmd on Mac), select "Change Language Mode" and there it is.
But I still can't find a way to make VS Code recognized files with specific extension as some certain language.
eg:
// .vscode/settings.json in workspace
{
"files.associations": {
"*Container.js": "javascriptreact",
"**/components/*/*.js": "javascriptreact",
"**/config/routes.js": "javascriptreact"
}
}