How to make VS Code to treat other file extensions as certain language?

visual studio code file associations
add programming language to visual studio
code language not supported or defined visual studio code
vscode language extension
vs code language-specific settings
vscode extensions
visual studio change programming language
visual studio code formatting settings

Or is there a way to switch the current file's language to use syntax highlight feature?

For example, *.jsx actually uses JavaScript but VS Code doesn't recognize it.

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 and then type settings JSON. Choose Preferences: Open Settings (JSON) to open your settings.json.

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.

Visual Studio Code language identifiers, That identifier is rarely seen by the user except in the settings, for example, when associating file extensions to a language: "files.associations": { "*.myphp": "php" }. But I still can't find a way to make VS Code recognized files with specific extension as some certain language. | this answer edited Jun 5 '16 at 18:37 CenterOrbit 2,560 1 10 18 answered Apr 30 '15 at 17:03 John Deev 306 1 3 9 3 Ctrl+P is used to navigate to another file. The one you're looking for is Ctrl+Shift+P, which opens the Command Palette.

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.

Language Support in Visual Studio Code, In Visual Studio Code we have support for all common languages including In VS Code, we default the language support for a file based on its filename extension. Mode drop-down where you can select another language for the current file. VS Code associates a language mode with a specific language identifier so  Go to File -> Preferences -> Workspace Settings. Notice the creation of a .vscode folder at the project root. Within it, an empty settings.json file was created. With the cursor placed inside of the Default Settings pane, open Command Palette (View -> Command Palette…) and type @files.associations.

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 "Configure File Association for 'x' " (whatever file type - see image attached) Selecting this makes 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.

Syntax Highlight Guide, Invented for the TextMate editor, they have been adopted by many other editors and IDEs The most specific scope is listed at the top, with more general parent scopes listed below: The grammar file itself consists of a top-level rule. to tell VS Code to treat the embedded language as distinct from the parent language. An extension provides a Language Client and a Language Server for JavaScript. The Language Client is like any other VS Code extension, running in the Node.js Extension Host context. When it gets activated, it spawns the Language Server in another process and communicates with it through Language Server Protocol. You


// .vscode/settings.json in workspace

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

Associate File Types in VS Code - John Papa, Typescript, JavaScript, docker files, Vue files … it all works great! Sometimes we have to load an extension to make some of these light up (e.g. Vue files with the  Language features in VS Code. The richness of support varies across the different languages and their extensions: Syntax highlighting and bracket matching; Smart completions (IntelliSense) Linting and corrections; Code navigation (Go to Definition, Find All References) Debugging; Refactoring; Changing the language for the selected file. In VS Code, we default the language support for a file based on its filename extension.

This works for me.

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

How to change the language mode of an unsaved file in VS Code, Often I am opening Code so I can make some quick edits to text that I save the file with a JSON extension and Code would start to treat the  Commands are also used by extensions to expose functionality to users, bind to actions in VS Code's UI, and implement internal logic. Using Commands. VS Code includes a large set of built-in commands that you can use to interact with the editor, control the user interface, or perform background operations. Many extensions also expose their core functionality as commands that users and other extensions can leverage.

File-to-Language Associations in Visual Studio Code – Scott Addie, Last Updated: 4/10/2016 No file extension? Is the file's content expectation JSON, YAML, INI, or some other format? Setting File Language Expectations within VS Code To associate just those JSX components to the “JavaScript React” language mode, you'd have to leverage a naming convention  That identifier is rarely seen by the user except in the settings, for example, when associating file extensions to a language: The language identifier becomes essential for VS Code extension developers when adding new language capabilities or when replacing a language support.

Allow C/C++ files with a non-standard extension, If your extension denotes a header file, use regedit to add the extension to ExtHeader Changes for Visual Studio. Make version-specific changes to your IDE as well: \SOFTWARE\Microsoft\VisualStudio\7.1\Languages\File Extensions\.cpp. VS Code will provide you with auto-completion for installed extensions inside these files.. VS Code prompts a user to install the recommended extensions when a workspace is opened for the first time. The user can also review the list with the Extensions: Show Recommended Extensions command. Next steps. Here are a few topics you may find interesting Extension API - Start learning about the VS Code extension API.

Settings, The workspace setting file is located under the .vscode folder in your project. Note: VS Code extensions can also add their own custom settings and they will be If you have settings defined for a language in both user and workspace close automatically when the file is deleted or renamed by some other process. I am using Visual Studio Code on a Mac to work on Node.js applications. Is there a way to make Visual Studio Code recognize EJS files as HTML markup? I didn't see any file / scheme association in user preferences.

  • The value for the association needs to be the ID of the language/plugin, not the name. For example the VBScript plugin I installed, the ID is vbs. "*.vms" : "vbs" gets the custom extension to associate properly.
  • Just faced a similar issue. If adding a file association does not seem to work, make sure you don't have a .editorconfig file close, or align the configurations between VSCode and .editorconfig, the latter will take precedence
  • You can also put these settings in a project specific ${projectdir}/.vscode/settings.json file.
  • It appears there's a shortcut directly to Change Language Mode; Alt+K, M
  • Cmd+K, M for Mac.
  • Thanks - this worked for me. It was not clear when manually editing the settings.json file what the extension ID should have been, but this method sorted it!
  • You're welcomed @ccbunney, glad it helps. That was exactly the same problem I had - and I never did figure out the extension ID I needed, lol. Anyway, I was real glad to find this solution for myself and it's cool that it's helping other ppl! :D
  • Nice. This comes in handy if you have the same extension, but different language parsers based on path. E.g. you can have yml to handle Concourse pipelines in one folder and Ansible files in another.
  • I'd upvote this twice if I could. Been trying to persist the syntax for my Nanoc layouts and partials with an .html extension, this solved it: "**/layouts/**/*.html": "erb" - worth noting that the VSCode "language mode" dropdown shows the actual name of the syntax highlighter in brackets e.g. Ruby ERB (erb)