How to format Blazor code correctly in VS code? [duplicate]

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.

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.

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.