markup_fmt is a configurable HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks, Vento, Mustache and XML formatter.
This formatter provides some options such as vBindStyle, vOnStyle and more for Vue and
svelteAttrShorthand and svelteDirectiveShorthand for Svelte.
It's recommended to enable these options in this formatter and disable the corresponding rules in eslint-plugin-vue and eslint-plugin-svelte if you used. This will make ESLint faster because less rules will be executed.
We've provided dprint integration.
This plugin only formats HTML syntax of your HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks, Vento, Mustache and XML files.
You also need other dprint plugins to format the code in <script> and <style> tags.
You can use dprint-plugin-typescript to
format TypeScript/JavaScript code and Malva to format CSS/SCSS/Sass/Less code.
Run the commands below to add plugins:
dprint config add g-plane/markup_fmt
dprint config add g-plane/malva
dprint config add typescriptIf you also want to format JSON in <script> tag whose "type" is "importmap", "application/json", or "application/ld+json",
you can add dprint-plugin-json:
dprint config add jsonOr Biome:
- dprint config add typescript
- dprint config add json
+ dprint config add biomeIf you use Biome, you need to set "scriptFormatter" to "biome" in markup_fmt's config.
If you want to format Jinja, it's recommended to add Pretty Jinja dprint plugin as well.
After adding the dprint plugins, update your dprint.json and add configuration:
You can also read dprint CLI documentation for using dprint to format files.
Please read the documentation.
Please refer to Configuration.
Tests come from:
MIT License
Copyright (c) 2023-present Pig Fang
{ // ... "plugins": [ // ... other plugins URL "https://plugins.dprint.dev/g-plane/markup_fmt-v0.24.0.wasm" ], "markup": { // <-- the key name here is "markup", not "markup_fmt" // config comes here } }