Formatting the style tag in Vue, Svelte, and Astro without Prettier

[bitbloxhub]

First add eslint-plugin-format, dprint-plugin-malva, and dprint-plugin-markup to your devDependencies.

Then, put something like the following in eslint.config.js, deleting the parts you don't need and adjusting the indentation settings to your project.

import antfu from "@antfu/eslint-config"
import format from "eslint-plugin-format"

export default antfu(
	{
		stylistic: {
			indent: "tab",
			quotes: "double",
			overrides: {
				"style/brace-style": ["error", "1tbs", { allowSingleLine: true }],
			},
		},

		typescript: true,

		vue: true,
		svelte: true,
		astro: true,
	},
	{
		files: ["**/*.css"],
		languageOptions: {
			parser: format.parserPlain,
		},
		plugins: {
			format,
		},
		rules: {
			"format/dprint": ["error", {
				plugins: [
					{
						plugin: "node_modules/dprint-plugin-malva/plugin.wasm",
						options: {},
					},
				],
				useTabs: true,
				indentWidth: 4,
			}],
		},
	},
	{
		files: ["**/*.{html,vue,svelte,astro}"],
		plugins: {
			format,
		},
		rules: {
			"format/dprint": ["error", {
				plugins: [
					{
						plugin: "node_modules/dprint-plugin-malva/plugin.wasm",
						options: {},
					},
					{
						plugin: "node_modules/dprint-plugin-markup/plugin.wasm",
						options: {
							scriptIndent: true,
							styleIndent: true,
							preferAttrsSingleLine: true,
							closingTagLineBreakForEmpty: "never",
							whitespaceSensitivity: "ignore",
							// Svelte
							svelteAttrShorthand: true,
							svelteDirectiveShorthand: true,
							// Astro
							astroAttrShorthand: true,
						},
					},
				],
				useTabs: true,
				indentWidth: 4,
			}],
			// Vue
			"vue/first-attribute-linebreak": "off",
			"vue/html-closing-bracket-newline": "off",
			"vue/html-closing-bracket-spacing": "off",
			"vue/html-indent": "off",
			"vue/html-quotes": "off",
			"vue/html-self-closing": "off",
			"vue/max-attributes-per-line": "off",
			"vue/multiline-html-element-content-newline": "off",
			"vue/mustache-interpolation-spacing": "off",
			"vue/no-multi-spaces": "off",
			"vue/no-spaces-around-equal-signs-in-attribute": "off",
			"vue/singleline-html-element-content-newline": "off",
			"vue/block-tag-newline": "off",
			"vue/define-macros-order": "off",
			"vue/html-comment-content-newline": "off",
			"vue/html-comment-content-spacing": "off",
			"vue/html-comment-indent": "off",
			"vue/new-line-between-multi-line-property": "off",
			"vue/padding-line-between-blocks": "off",
			"vue/padding-line-between-tags": "off",
			"vue/padding-lines-in-component-definition": "off",
			"vue/script-indent": "off",
			"vue/v-for-delimiter-style": "off",
			// Svelte
			"svelte/indent": ["error", {
				indent: "tab",
				ignoredNodes: ["SvelteElement", "SvelteStyleElement", "SvelteStartTag"],
			}],
			"svelte/mustache-spacing": "off",

		},
	},
)

For more information, see https://github.com/antfu/eslint-plugin-format, https://github.com/g-plane/malva, and https://github.com/g-plane/markup_fmt.

Note

I am not sure if there are any more Vue eslint rules that i should disable, or if any of them i have disabled are not covered by markup_fmt.

Note

Updated 2026-02-16, fixed script indent for svelte.