markup_fmt is a configurable HTML/Vue/Svelte/Astro/Jinja/Twig/Nunjucks/Vento 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/Jinja/Twig/Nunjucks/Vento 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 typescript
If you also want to format JSON in <script>
tag whose "type"
is "importmap"
or "application/json"
,
you can add dprint-plugin-json:
dprint config add json
Or Biome:
- dprint config add typescript
- dprint config add json
+ dprint config add biome
After adding the dprint plugins, update your dprint.json
and add configuration:
{
// ...
"plugins": [
// ... other plugins URL
"https://plugins.dprint.dev/g-plane/markup_fmt-v0.7.0.wasm"
],
"markup": { // <-- the key name here is "markup", not "markup_fmt"
// config comes here
}
}
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