Set language for syntax highlighting in Visual Studio Code

Question

Before the confusion begins, this question is about Code, the new lightweight Visual Studio Editor. You can get it from here: https://code.visualstudio.com/

I have a textfile (.txt) with CSS in it and want to get syntax hightlighting. You can open the command palette with ctrl+shift+p. But there you can not set syntax like in Sublime.

Is there any other way to get the CSS coloring in from my textfile?

Lowminded

For further emphasis, the solutions here do NOT apply to Visual Studio sadly. I just today learned of the existence of Visual Studio Code. It'd be nice if regular Visual Studio adopted a similar language mode switch. Oh Microsoft... – Hurryscurry

Answer 1

In the very right bottom corner, left to the smiley there was the icon saying "Plain Text". When you click it, the menu with all languages appears where you can choose your desired language.

Lowminded

How do I make it so files with this extension always use the format? – Automata

In case anyone else trying this (on a mac) keeps accidentally opening their keymapping and wondering why, to be more explicit - hold Cmd and press K, let go of Cmd, press M – Heterotaxis

The existing shortcut for it is indeed stupid. I went into the keyboard shortcuts, found "Change language mode" and set the shortcut to cmd+opt+p which is not quite the same as sublime but much easier for the muscle memory than K+M – Moriyama

is there a permanent way to set this for a file in a project? For some strange reason, I am required to provide ProjectNotes.txt for my (markdown) project readme's. I hate having to do this every time I edit the file – Mcandrew

If the detected language of the file ("Plain Text" in the image above) is missing, right-click on the footer and ensure "Editor Language" is checked. – Zenobia

Answer 2

Press Ctrl + KM and then type in (or click) the language you want.

Alternatively, to access it from the command palette, look for "Change Language Mode" as seen below:

Baobaobab

If you are seeing the Extensions panel, you may be pressing Ctrl + K, Ctrl + M instead of Ctrl + K, M, which was the mistake I made. – Obturate

cmd + K M on a Mac. – Marna

@gitsitgo, What's with the meaning of K M? – Maher

macOS: shift + cmd + P – Humidistat

@AdamParkin Shift + P (then let go of both keys) then press M – Tater

This should be renamed to "Change Syntax Highlighting" – Stale

If it helps anyone, I was trying CMD + k,m but one is supposed to press CMD + k then release the keys (CMD and k both) and press m. – Intrepid

Frustrating this is called language and can't be found with a synonym when typing syntax. :( – Serology

CTRL + Shift + P > Type Language > select or type to select – Serology

I initially tried searching for "syntax" in the command palette, which feels more natural than "language". Microsoft, if you're listening, it's stupid that I have to come to stack overflow to find an answer for this; please add "syntax" as a match for "Change Language Mode". – Deil

@AkshayKhale thanks that helped me a lot. @Chris's comment is actually wrong Ctrl + K, Ctrl + M doesn't work. – Manganin

Something so common and regularly used should not take this much effort to learn or do. C'mon MS/VSCode... Why isn't this available via the Command Palette? Does anyone know of a way to add it? – Cachalot

Answer 3

Another reason why people might struggle to get Syntax Highlighting working is because they don't have the appropriate syntax package installed. While some default syntax packages come pre-installed (like Swift, C, JS, CSS), others may not be available.

To solve this you can Cmd + Shift + P → "install Extensions" and look for the language you want to add, say "Scala".

Find the suitable Syntax package, install it and reload. This will pick up the correct syntax for your files with the predefined extension, i.e. .scala in this case.

On top of that you might want VS Code to treat all files with certain custom extensions as your preferred language of choice. Let's say you want to highlight all *.es files as JavaScript, then just open "User Settings" (Cmd + Shift + P → "User Settings") and configure your custom files association like so:

  "files.associations": {
    "*.es": "javascript"
  },

Reflexion

Answer 4

Syntax Highlighting for custom file extension

Any custom file extension can be associated with standard syntax highlighting with custom files association in User Settings as follows.

Note that this will be a permanent setting. In order to set for the current session alone, type in the preferred language in Select Language Mode box (without changing file association settings)

Installing new Syntax Package

If the required syntax package is not available by default, you can add them via the Extension Marketplace (Ctrl+Shift+X) and search for the language package.

You can further reproduce the above steps to map the file extensions with the new syntax package.

Naseberry

Voted up as file association immediately works and is remembered on next session. However, it doesn't produce a project file to version control, so it seems the setting is saved on my local computer preferences as a global setting across projects (which may or may not be what I want). For a project-specific versioned file, see GorvGoyl's answer with settings.json. – Cere

Answer 5

To permanently set the language syntax:
open settings.json file

• format all txt files with javascript formatting

"files.associations": {
            "*.txt": "javascript"
          
     }

• format all unsaved files (untitled-1 etc) to javascript:

"files.associations": {
            "untitled-*": "javascript"
          
     }

Percolation

Sayooj Samuel's answer worked, but I also applied this one to make sure my project knows about this and since I can version control settings.json, if I clone my project on another computer it will immediately use the correct syntax. – Cere

Answer 6

Note that for "Untitled" editor ("Untitled-1", "Untitled-2"), you now can set the language in the settings.

The previous setting was:

"files.associations": {
        "untitled-*": "javascript"
 }

This will not always work anymore, because with VSCode 1.42 (Q1 2020) will change the title of those untitled editors.
The title will now be the first line of the document for the editor title, along the generic name as part of the description.
It won't start anymore with "untitled-"

See "Untitled editor improvements"

Regarding the associated language for those "Untitled" editors:

By default, untitled files do not have a specific language mode configured.

VS Code has a setting, files.defaultLanguage, to configure a default language for untitled files.

With this release, the setting can take a new value {activeEditorLanguage} that will dynamically use the language mode of the currently active editor instead of a fixed default.

In addition, when you copy and paste text into an untitled editor, VS Code will now automatically change the language mode of the untitled editor if the text was copied from a VS Code editor:

And see workbench.editor.untitled.labelFormat in VSCode 1.43.

---

In March 2021 (possible for VSCode 1.55), issue 118455 "Automatic language classification for Untitled files" and PR 119325 are studying some kind of automatic language detection for untitled files.

---

And if you forget, with VSCode 1.56, Apr. 2021:

Untitled editors hint

We have noticed that many new users are not aware that a language has to be set in order to get full VS Code language support.

To help with this problem, we have introduced a hint for untitled editors to help users set the correct language mode.
The untitled hint might not be helpful to advanced users, so it goes away immediately as you start typing or you can select don't show to never display the hint again.

---

With VScode 1.60 (Aug. 2021):

Automatic language detection

Last release, we introduced an experimental feature for untitled files that would automatically set the language mode for the file based on the contents.

This feature uses machine learning to guess the language and is done entirely on your machine. It's powered by the open-source ML library, Tensorflow.js, and the ML model from Guesslang by GitHub user @yoeo.

This release we are enabling this feature by default and also expanding the automatic language detection to files that don't have a file extension. In Notebooks, we provide an easy way to ask for language detection using the language picker. This enables a few fun scenarios:

• Grab an example from online and paste it in an untitled editor Language detection of untitled files
  

• "Pipe into code" language detection (showing off detection of extension-less files) Language detection of extension-less files
  

• Auto detect option in Notebooks language picker Language detection of Notebooks
  

---

VSCode 1.65 (Feb. 2022) comes with:

Improved automatic language detection

When the new setting workbench.editor.historyBasedLanguageDetection is enabled, untitled editors will use an improved automatic language detection algorithm that factors in your editor history and the contents of the current workspace to provide detection results with much less input text required than before.

Below is an example of using this across JavaScript, TypeScript, Markdown, PHP, and C++ (many more languages are supported):

^{Theme: GitHub Light + HC Customizations}

---

VSCode 1.70 (July 2022) will propose (issue 152920, PR 153872)

Provide a command to create a new untitled file with a specific language set

Allow to specify language id in command to create a new untitled file

The registerCommandAndKeybindingRule allows for "New Untitled File args" to add the language ID if known.

That allows for links like [Create Python File](command:toSide:workbench.action.files.newUntitledFile?<args>) which would create a new untitled file directly for Python language.

Hazzard

Answer 7

You can change the language mode in VS Code as follows.

Select the file which you want to change then use the following shortcut.

On macOS:

• press ⌘+K then press M.

On Windows and Linux:

• press CTRL+K then press M

Select the language from the list provided or choose Auto-detect

Chlodwig

Answer 8

Now you can set syntax highlight from command palette by installing an VS Code extension: Set Syntax

https://marketplace.visualstudio.com/items?itemName=ahgood.set-syntax

Barque

this makes my sublime text muscle-memory happy, thank you very much – Aneurysm

Answer 9

This may not be quite a correct answer to the question, but this is what happened to me. Sometimes the answer that we seek may not be the answer that we needed.

Narcosynthesis

Answer 10

Sometime this can also block this plugin

Ragucci