Using with Vue SFCs + VSCode

Hiya Tony

First, thanks for the handy plugin. It helps relieve eye-twitches whenever I see <hr />

I had a bit of a journey getting the plugin to work with Vue SFCs and VS Code, but I think I got there. I thought I'd share it in case you want to add it to the docs or in case it helps with getting it to work with other not-quite-HTML files.

First, Vue SFCs required a fairly simple monkey-patch slash settings adjustment from prettier.config.mjs:

import * as voidPlugin from '@awmottaz/prettier-plugin-void-html';
import { parsers } from 'prettier/plugins/html';

voidPlugin.languages.extensions = ['.html', '.vue'];
voidPlugin.parsers.vue = parsers.vue;

export default {
  plugins: [voidPlugin],
  // the rest of the config
}

This was enough to get everything to work the way I wanted it to work ... from the command line.

As it turns out, the VS Code prettier extension (esbenp.prettier-vscode), possibly in combination with multi-root workspaces, does not like to load plugins (or this plugin anyway) and has this to say on the matter: "{}".

After much trial and error, the following seemed to work;

Create a void.mjs:


import * as voidPlugin from '@awmottaz/prettier-plugin-void-html';
import { parsers } from 'prettier/plugins/html';

voidPlugin.languages.extensions = ['.html', '.vue']; voidPlugin.parsers.vue = parsers.vue;

export default voidPlugin;

2. Load it  -- by string reference -- from `prettier.config.mjs`
```ts
export default {
  plugins: ["./void.mjs"],
  // the rest of the config
}

That finally made VS Code happy, and it now formats-on-saves the slashes away from my <hr/> so that I don't have to disable half my eslint config. 🥳

awmottaz / prettier-plugin-void-html

Using with Vue SFCs + VSCode #19