Configurable HTML/Vue/Svelte/Jinja/Twig formatter, with dprint integration.

Pig Fang

Last update: Nov 15, 2023

Related tags

Command-line html formatter vue formatting prettier svelte dprint

Overview

markup_fmt

markup_fmt is a configurable HTML/Vue/Svelte/Jinja/Twig formatter.

Notes for Vue and Svelte Users

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.

Getting Started

dprint

We've provided dprint integration.

This plugin only formats HTML syntax of your HTML/Vue/Svelte/Jinja/Twig 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

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.2.1.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.

Use as a Rust crate

Please read the documentation.

Configuration

Please refer to Configuration.

Credit

Tests come from:

License

MIT License

You might also like...

Create, reorder, group, and focus workspaces easily in i3. Fully configurable with enhanced polybar modules.

Create, reorder, group, and focus workspaces fast and easily in i3. Features Focus Mode: Eliminate Distractions Enable Focus Mode: Use groups and focu

15 Sep 2, 2023

Calc: A fully-featured minimalistic configurable calculator written in Rust

Calc Calc: A fully-featured minimalistic configurable rust calculator Install You can install the latest version from source git clone https://github.

4 Nov 15, 2023

A cat(1) clone with syntax highlighting and Git integration.

A cat(1) clone with syntax highlighting and Git integration. Key Features • How To Use • Installation • Customization • Project goals, alternatives [中

38.9k Jan 8, 2023

A template with cookie cutter CLI, Program and Integration tests for Solana blockchain

About solana-cli-program template is a sample app demonstrating the creation of a minimal CLI application written in Rust to interact with Solana and

46 Nov 3, 2022

interactcli-rs is a command-line program framework used to solve the problem of the integration of command-line and interactive modes, including functions such as unification of command-line interactive modes and sub-command prompts. The framework integrates clap and shellwords.

interactcli-rs 简体中文 interactcli-rs is a command-line program framework used to solve the problem of the integration of command-line and interactive mo

12 Nov 5, 2022

Black-box integration tests for your REST API using the Rust and its test framework

restest Black-box integration test for REST APIs in Rust. This crate provides the [assert_api] macro that allows to declaratively test, given a certai

10 Nov 23, 2022

🔔 CLI utility to send notifications to Slack via integration webhooks

Slack notifier Just a simple CLI tool to send notifications to Slack. Please note that this project is just a playground to start learning Rust, it is

2 May 21, 2022

A high-performance WebSocket integration library for streaming public market data. Used as a key dependency of the `barter-rs` project.

Barter-Data A high-performance WebSocket integration library for streaming public market data from leading cryptocurrency exchanges - batteries includ

23 Feb 3, 2023

Experimental integration of `fedimint-client` with the Leptos web frontend framework

CAUTION: highly experimental, the Database implementation is likely horribly broken Fedimint Client built with Leptos This repo contains a proof-of-co

3 Aug 27, 2023

Comments

associate other file extensions

What a cool new formatter! I've been trying it out with dprint and it works great, especially the ability to format embedded CSS and JS tags is brilliant. I was hoping to use this to format my Jinja2 HTML templates (also known as htmldjango filetype in Neovim). Here's an example:

index.jinja2

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <style>
      body {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Hello {{ user.name }}</h1>
    {% for item in items %}
      <a>{{ item }}<a>
    {% endfor %}
  </body>
</html>

When I run dprint fmt "**/*.jinja2" --diff | delta dprint says No files found to format with the specified plugins. That makes sense, since markup_fmt expects files with the .html extension. As expected, it works with this trick cat index.jinja2 | dprint fmt --stdin html.

I was hoping to add associations for custom file extensions. I tried it with the following minimal config dprint.jsonc

{
    "$schema": "https://dprint.dev/schemas/v0.json",
    "incremental": true,
    "typescript": {},
    "malva": {},
    "markup": {
        "associations": [
            "**/*.html",
            "**/*.jinja2"
        ]
    },
    "includes": [
        "**/*.{html,jinja2}"
    ],
    "plugins": [
        "https://plugins.dprint.dev/typescript-0.88.3.wasm",
        "https://plugins.dprint.dev/g-plane/malva-v0.1.2.wasm",
        "https://plugins.dprint.dev/g-plane/markup_fmt-v0.1.1.wasm"
    ]
}

but I am getting the error

Error formatting index.jinja2. Message: unknown file extension of file: index.jinja2

opened by disrupted 4

[BUG] `*.selfClosing` doesn't work well

The rule of *.selfClosing says when I set it to true, the tag will be formatted as <div />.

But actually it will be formatted as <div />, so that there are two space in the tag which one is redundant.

I don't know if it should be like that or it's a bug.

Case following:

input:

<div />
<div></div>

output:

<div  /> <!-- an extra space in the tag -->
<div  />

Here comes my markup config:

"markup": {
    "closingBracketSameLine": true,
    "component.selfClosing": true,

    "formatComments": true,

    "html.void.selfClosing": true,
    "html.normal.selfClosing": true,

    "mathml.selfClosing": true,
    "maxAttrsPerLine": 1,

    "printWidth": 88,

    "svg.selfClosing": true,

    "vBindStyle": "short",
    "vForDelimiterStyle": "in",
    "vOnStyle": "short",
    "vSlotStyle": "short"
}

opened by a1ivewu 2

Releases(v0.2.1)

v0.2.1(Nov 11, 2023)
Fixes

Fixed duplicated space when max_attrs_per_line set in self-closing tag. (fix #2)

Source code(tar.gz)
Source code(zip)
plugin.wasm(407.42 KB)
schema.json(3.60 KB)
v0.2.0(Nov 3, 2023)
Features

Added Jinja and Twig support.

Fixes

Fixed formatting comments.

Fixed dprint config schema.

Source code(tar.gz)
Source code(zip)
plugin.wasm(407.27 KB)
schema.json(3.60 KB)
v0.1.1(Nov 1, 2023)
Fixed indentation of code in <script> and <style> tag.

Fixed trailing spaces.

Source code(tar.gz)
Source code(zip)
plugin.wasm(396.26 KB)
schema.json(3.60 KB)
v0.1.0(Nov 1, 2023)

Initial release.
Source code(tar.gz)
Source code(zip)
plugin.wasm(396.85 KB)
schema.json(3.60 KB)

Owner

Pig Fang

Error messages should be human-friendly.

GitHub

Configurable HTML/Vue/Svelte/Jinja/Twig formatter, with dprint integration.

Related tags

Overview

You might also like...

Create, reorder, group, and focus workspaces easily in i3. Fully configurable with enhanced polybar modules.

Calc: A fully-featured minimalistic configurable calculator written in Rust

A cat(1) clone with syntax highlighting and Git integration.

A template with cookie cutter CLI, Program and Integration tests for Solana blockchain

interactcli-rs is a command-line program framework used to solve the problem of the integration of command-line and interactive modes, including functions such as unification of command-line interactive modes and sub-command prompts. The framework integrates clap and shellwords.

Black-box integration tests for your REST API using the Rust and its test framework

🔔 CLI utility to send notifications to Slack via integration webhooks

A high-performance WebSocket integration library for streaming public market data. Used as a key dependency of the `barter-rs` project.

Experimental integration of `fedimint-client` with the Leptos web frontend framework

Comments

Releases(v0.2.1)

v0.2.1(Nov 11, 2023)

Fixes

v0.2.0(Nov 3, 2023)

Features

Fixes

v0.1.1(Nov 1, 2023)

v0.1.0(Nov 1, 2023)

Owner

Pig Fang

Configurable, smart and fast CSS/SCSS/Sass/Less formatter.

A Faster(⚡) formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS Lapce Plugin

UpVent Website (Powered by Rust + Svelte & Fernet Branca).

A formatter for the leptos view! macro

An open source artifact manager. Written in Rust back end and an Vue front end to create a fast and modern experience

Configurable, extensible, interactive line reader

Easy configurable tmux display-menu

Uses the cardano mini-protocols to receive every block and transaction, and save them to a configurable destination

⚡️(cd with env) Is a configurable cd wrapper that lets you define your environment per directory.

Simple OpenAI CLI wrapper written in Rust, feat. configurable prompts and models