Formatting Razor Files in Visual Studio Code

Question

Anyone have a good solution for formatting Razor files inside of VSCode? I've tried making it work with prettify-vscode and beautify. But in both cases it can't tell that cshtml files. I don't want to change my razor to html as I'll lose a lot of the razor-ness.

Bradytelic

I see that this is a year ago but I just tried VahidN's solution and it worked like a charm. I'm thinking this may have simply forgotten about this post as it's easy to do, but you should go back and accept his answer if it works for you. Otherwise, let him know why it didn't work. – Gardy

Answer 1

You can introduce them as HTML files (File -> Preferences -> Settings) without any 3rd party extensions:

{
  "editor.formatOnSave": true,
  "emmet.includeLanguages": {
    "aspnetcorerazor": "html"
  },
  "files.associations": {
    "*.cshtml": "html"
  }
}

Update: v1.17.0 of C# for Visual Studio Code add-on added preview Razor (cshtml) language service with support for C# completions and diagnostics.

Howbeit

This works to a degree - the Razor code breaks when it is autoformatted onto 1 line, eg: The 'page' directive expects a string surrounded by double quotes. + at)page at)model IndexModel – Gabble

I just like to add that the "razor" language was actually changed to "aspnetcorerazor" – Kodak

I think this reduces to, "If you have formatOnSave working with prettier, you can add "files.associations": {"*.cshtml": "html"} to your preferences JSON and have cshtml prettier-ed too." Sound right? And where side-effects might files.assocations cause? Is it prettier specific? (Appears not to be prettier specific and might very well have side effects.) – Krisha

Answer 2

There is an extension that we can switch between Language Modes by shortcuts quickly: changeLanguageMode.change

I use these shortcuts for js, html, and cshtml:

 {
    "key":"ctrl+k j", 
    "command":"changeLanguageMode.change", 
    "args": {
        "languageId":"javascript"
    }
},  
{
    "key":"ctrl+k h", 
    "command":"changeLanguageMode.change", 
    "args": {
        "languageId":"html"
    }
},  
{
    "key":"ctrl+k k", 
    "command":"changeLanguageMode.change", 
    "args": {
        "languageId":"aspnetcorerazor"
    }
}

To open keybindings.json and add these shortcuts:

open up the control palette with CTRL +SHIFT + P and select Preferences: Open Keyboard Shortcuts File.

Then use Ctrl + K, Ctrl + F to Format Selection only.

Heliopolis

IMO this is a better answer than VahidN's, though I just change back and forth using "Change Language Mode" instead of creating keyboard shortcuts. Using html formatting for cshtml files is only useful when document formatting is needed, but then it's best to switch back to Razor editing for the Razor tag support. Irritating that formatting still isn't supported after more than a year: devblogs.microsoft.com/aspnet/… – Tibbetts

Answer 3

Change language mode deprecated in favor of Commands. To achieve the same functionality, you can define two commands inside your settings.json:

"commands.commands": {
  "commands.changeLanguageRazor": {
    "command": "commands.setEditorLanguage",
    "args": "aspnetcorerazor"
  },
  "commands.changeLanguageHtml": {
    "command": "commands.setEditorLanguage",
    "args": "html"
  },
},

These commands will allow you to switch between Razor and HTML language modes easily. Then, in your keybindings.json, create a command sequence:

{
   "key": "shift+alt+f r",
   "command": "runCommands",
   "args": {
     "commands": [
       "commands.changeLanguageHtml",
       "editor.action.formatDocument",
       "commands.changeLanguageRazor"
      ]
    },
    "when": "editorTextFocus",
},

This command sequence initially sets the editor language to HTML, formats the document, and then switches back to Razor language mode.

Bala

Answer 4

Firstly: open file setting.json, which is in .vscode folder, then add next block:

{
"editor.formatOnSave": true,
"emmet.includeLanguages": {
    "razor": "html"
},
"files.associations": {
    "*.cshtml": "html"
}

Sometimes is necessary restart vscode

Finally: in the file to format Ctrl + k , Ctrl + f

Clarion