Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 614
John Deev Avatar asked Apr 30 '15 16:04

John Deev


People also ask

How do you select language mode in VS Code?

Press Ctrl+Shift+P to bring up the Command Palette then start typing "display" to filter and display the Configure Display Language command. Press Enter and a list of installed languages by locale is displayed, with the current locale highlighted.

What language is used for VS Code extensions?

Programmatic language features# One example is the typescript-language-features extension bundled in VS Code. It utilizes the TypeScript Language Service to offer Programmatic Language Features such as: Hover information ( vscode.

What are language extensions in Visual Studio Code?

Visual Studio Code provides smart editing features for different programming languages through Language Extensions. VS Code doesn't provide built-in language support but offers a set of APIs that enable rich language features. For example, it has a bundled HTML extension that allows VS Code to show syntax highlighting for HTML files.

What do I need to learn to use VS Code extensions?

VS Code extensions support two main languages: JavaScript and TypeScript. So having some knowledge of either of these is pretty mandatory. Also, make sure you have Node.js installed, since we are going to use a lot of npm packages here.

Does VS Code support other languages besides English?

VS Code doesn't provide built-in language support but offers a set of APIs that enable rich language features. For example, it has a bundled HTML extension that allows VS Code to show syntax highlighting for HTML files.

How do I generate an extension in Visual Studio Code?

To generate an extension, you will also need the following tools: Yeoman, an open source client-side scaffolding tool that helps you kickstart new projects, and vscode-generator-code, a Yeoman generator build created by the VS Code team. In this tutorial, you will build an extension that initializes a Docker image for an application.


2 Answers

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.

like image 64
Josien Avatar answered Oct 03 '22 10:10

Josien


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.

enter image description here

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.

like image 36
JoelAZ Avatar answered Oct 03 '22 09:10

JoelAZ