[editor] Set language for syntax highlighting in Visual Studio Code

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?

This question is related to editor syntax-highlighting visual-studio-code

The answer is


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".

enter image description here

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"
  },

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.

Changing File Association settings for permanent Syntax Highlighting

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.


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:

https://media.githubusercontent.com/media/microsoft/vscode-docs/vnext/release-notes/images/1_42/untitled-copy2.gif

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


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:

enter image description here


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"

 }

Examples related to editor

Select all occurrences of selected word in VSCode Change the Theme in Jupyter Notebook? How to view Plugin Manager in Notepad++ Set language for syntax highlighting in Visual Studio Code Copy text from nano editor to shell How do I duplicate a line or selection within Visual Studio Code? How to set editor theme in IntelliJ Idea How to change background color in the Notepad++ text editor? What is the difference between Sublime text and Github's Atom What are the advantages of Sublime Text over Notepad++ and vice-versa?

Examples related to syntax-highlighting

Set language for syntax highlighting in Visual Studio Code Change / Add syntax highlighting for a language in Sublime 2/3 How to customise file type to syntax associations in Sublime Text? Copy Notepad++ text with formatting? How can I enable auto complete support in Notepad++? How To Format A Block of Code Within a Presentation?

Examples related to visual-studio-code

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error Cannot edit in read-only editor VS Code How to setup virtual environment for Python in VS Code? Pylint "unresolved import" error in Visual Studio Code Why do I keep getting Delete 'cr' [prettier/prettier]? How to set up devices for VS Code for a Flutter emulator VSCode single to double quote automatic replace js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check How can I clear the terminal in Visual Studio Code?