In VS Code, I have a code fence, in this case it is a javascript-marked fence. I'd like to be able to select the contents of the fence and format it and have my default formatter do its thing, but it keeps trying to use the Markdown formatter that I have. Ideally, VS Code would know that there is a fence there and apply the correct formatter to the contents of each fence based on the language identifier, but that might be asking too much.
Is what I'm after even possible? I've tried selecting the text and doing "Format Selection...", but that doesn't do anything. The only thing I can think of is to open a new file, mark it as JavaScript, paste in the code from the fence, format it, and then put it back in the markdown fence. There has to be an easier way.
Update: It seems from the comments that what I'm after could be quite complex. So, I'd just like to have a "Format Selection With..." option. While I see that when I'm working in TypeScript files, I don't see it in my context menu when I'm in a Markdown file. Even when I do Ctrl+Shift+P and look for "Format Selection With", I don't find it. How do I get that?
I've heard other people use workarounds for things like this to temporarly change the language mode (you can click the language mode indicator at the bottom right, or use the Change Language Mode command in the command palette) to the language you want to format for, and then select the text you want to format, and then use the Format Selection command (or associated keyboard shortcut- whatever it is on your machine- maybe ctrl/cmd+k, ctrl/cmd+f), and then switch the language mode back. It's unwieldy, but it might be the best there is now.
See also this feature-request issue ticket: Is there a "Format Selection As ..." command? #131814. You can give it a thumbs up to show support, and subscribe to it to get notified of discussion and progress. But please avoid noisy comments like "+1" or "bump".
I'm pretty sure the language-tagged code fences in VS Code's builtin Markdown language support use a VS Code feature called "embedded languages". I initially thought that VS Code would be able to provide this feature to select formatters for embedded code in different languages, but apparently it's more complicated than I thought, and there are situations where if VS Code made that kind of assumption, it could lead to bad formatting. I googled "github vscode issues "format" embedded language -highlight" and found the issue ticket Code formatting for multiple languages in one file
#14447, where the maintainers state:
The current story is that for a PHP file, the PHP formatter has to deal with the html content and format it. Generic solutions are difficult and will result in bugs due to lack of understanding on how the two languages play together. Can the embedded content be indented? Can new lines be added? Most of the time only the main language has an understanding of that.
So if you miss html formatting in PHP, file an issue against the provider of the PHP formatter.
The right next step if you want something like this might be to raise a feature-request issue ticket to the extension maintainers of the markdown extension you're using that provides markdown formatting asking for them for whatever behaviour you're looking for.