31

I'm using Visual Studio Code (1.17.1, on MacOS 10.13 AND Windows 10) developing an asp.net core mvc web app using razor templating. Visual Studio Code supports Emmet (https://code.visualstudio.com/docs/editor/emmet)

My issue is that Emmet works correctly in HTML files, but will not work in razor CSHTML files.

I've found:

To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language ids for both sides of the mapping. https://code.visualstudio.com/docs/editor/emmet

but it doesn't indicate where to find a list of "language ids". I tried searching for it, but you can imagine what happens when you search for programming language id!

Is there a way to tell Emmet in VS Code to treat cshtml files as html files? Is there any other way to get this to work (besides renaming the files, which is another solution out there)?

JamesDuff
  • 413
  • 1
  • 4
  • 8

2 Answers2

54

According to this link, the corresponding language for *.cshtml files is razor, thus you need to specify it in the emmet mappings as follows:

"emmet.includeLanguages": { "razor": "html" }

Rene Hernandez
  • 1,546
  • 13
  • 20
  • Glad it helped you – Rene Hernandez Oct 18 '17 at 13:20
  • Thank you so much @Aegis, i was trying to set a wrong config: ``` "emmet.includeLanguages": { "cshtml": "html" } ``` =/ Now it works great! – gabrielbarceloscn Nov 11 '17 at 11:04
  • @WilliamHowley you can use the WebEssentials extension for Visual Studio. – ZerosAndOnes Jun 11 '18 at 12:06
  • 30
    This appears to be broken in version 1.17.0 of the OmniSharp plug-in, but you can restore full functionality by disabling that plugin. You can restore partial functionality by changing `"razor": "html"` to `"aspnetcorerazor": "html"`. – Christopher Nov 01 '18 at 17:32
  • 2
    @Chris The actual answer did not work for me, but yours did, thanks! – Dalbir Singh Nov 14 '18 at 23:29
  • 10
    Clarification: Disabling the OmniSharp plug-in makes `"razor": "html"` work. If you keep the plug-in, you can have some functionality with `"aspnetcorerazor": "html"`. If you find yourself toggling the plugin, you don't have to keep changing the setting. You can have both active: `"razor": "html","aspnetcorerazor": "html"` – Christopher Nov 29 '18 at 18:17
  • is it possible for Visual Studio IDE? (not VS code) – vuquanghoang Dec 03 '18 at 06:29
  • I had to enable `"razor.devmode": true` along with `"aspnetcorerazor": "html"` – Brad Sep 18 '19 at 17:53
  • @Brad So, you have the C# Extension activated, and in your settings `"razor.devmode": true` and `"aspnetcorerazor": "html"`inside `"emmet.includeLanguages"` to make formatting works ? – MeTaLiKiD Sep 25 '19 at 13:42
  • { "emmet.includeLanguages": { "aspnetcorerazor": "html", }, "razor.devmode": true, } Yes, C# extension is active. `C# for Visual Studio Code (powered by OmniSharp).` – Brad Sep 26 '19 at 14:13
  • With that config, when I try formatting, I go `There is no formatter for 'aspnetcorerazor'-files installed.` – MeTaLiKiD Sep 27 '19 at 06:39
13

updated: Press Ctrl+K than M (Ctrl+K,M) than select highlighter from the dropdownlist you want this is a common shortcut. very useful. even works for any file types. ie. create a new file and code some xml or what language you want than Ctrl+K,M you can specify/override ide hilighter on the fly. very useful shortcut. try it. you won't forget Ctrl+K,M. one of most useful hotkey combination I ever use in vscode. by this way code-completion wakes up and works as language you selected.

in vscode > settings.json
I added the related codes mentionel above. emmet worked for cshtml files.

 "emmet.includeLanguages": {
   "razor":"html",
   "aspnetcorerazor":"html"
  }
Zen Of Kursat
  • 2,672
  • 1
  • 31
  • 47