awmottaz / prettier-plugin-void-html Goto Github PK

View Code? Open in Web Editor NEW

51.0 51.0 5.0 307 KB

Use the void tag syntax

Home Page: https://www.npmjs.com/package/@awmottaz/prettier-plugin-void-html

License: MIT License

JavaScript 100.00%

prettier-plugin-void-html's People

Contributors

Stargazers

Watchers

Forkers

yagee fpetrakov junaga f11xter crisvp

prettier-plugin-void-html's Issues

Ensure compatibility with Prettier v3.1.0

Install prettier v3.1.0 in addition to existing installation
Update tests to run against all installed versions
Update the compatibility range in package.json

Bonus points: extend compatibility back to v3.0.0!

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;

Load it -- by string reference -- from prettier.config.mjs

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

how to use this plugin with vscode prettier extension?

Hi, i really need to use this plugin to pass w3c validation. I wanna know how to integrate this plugin with vscode prettier extension?

Markdown Support

We have ./hello.md with HTML codeblocks.

Input

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Hello, World!

Output

<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

Hello, World!

Expected output

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Hello, World!

Generic usage

Maybe it's possible to support all languages with a simple config change? My frontend framework astro.build .astro single-file-components markup is also ignored by npm:@awmottaz/prettier-plugin-void-html.

If i can help, help me help you.

svelte support

Would love to use this with svelte files!

prettier.config.js

/** @type {import('prettier').Config} */
const config = {
    plugins: [
        '@awmottaz/prettier-plugin-void-html',
        'prettier-plugin-svelte',
        'prettier-plugin-tailwindcss',
    ],
    semi: false,
    singleQuote: true,
    tabWidth: 4,
    printWidth: 100,
    quoteProps: 'as-needed',
    bracketSpacing: false,
    arrowParens: 'avoid',
    overrides: [
        {
            files: '*.js',
            options: {
                tabWidth: 4,
            },
        },
        {
            files: ['*.html', '*.css'],
            options: {
                tabWidth: 2,
            },
        },
        {
            files: '*.svelte',
            options: {
                tabWidth: 4,
                parser: 'svelte',
                svelteStrictMode: false,
                svelteSortOrder: 'options-markup-scripts-styles',
                svelteIndentScriptAndStyle: false,
            },
        },
    ],
}

export default config

Prettier version restriction prevents patch version updates

The following version restriction from this package is too restrictive and prevents updating prettier to new patch versions:

    "node_modules/@awmottaz/prettier-plugin-void-html": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@awmottaz/prettier-plugin-void-html/-/prettier-plugin-void-html-1.1.0.tgz",
      "integrity": "sha512-C9fovrnX1hNPLujIDFZc8F72HxO5CzhZ5JvR14M+PkU0MLUBs/4TSwGkTpJh8pzoPF2hda+IC1/v2toPo1qODw==",
      "dev": true,
      "engines": {
        "node": "20.x"
      },
      "peerDependencies": {
        "prettier": "3.0.0 - 3.1.0"
      }
    },

With the following in ./package.json:

  "devDependencies": {
    "@awmottaz/prettier-plugin-void-html": ">=1.1.0",
    "prettier": ">=2.8.8"
  },

Nothing is changed when running $ npm update but the following fails:

$ npm outdated
Package   Current  Wanted  Latest  Location               Depended by
prettier    3.1.0   3.1.0   3.1.1  node_modules/prettier  project-structure

Void tag followed by any non-whitespace character duplicates closing >

Input

<br>a

Expected Output

<br>a

Actual Output

<br>>a

Same effect seen with <input> and other void tags that don't cause Prettier to insert a newline immediately after them (like <hr> does).

Does not occur when plugin is disabled.

package.json:

{
  "devDependencies": {
    "@awmottaz/prettier-plugin-void-html": "^1.2.0",
    "prettier": "3.1.1"
  },
  "prettier": {
    "plugins": [
      "@awmottaz/prettier-plugin-void-html"
    ]
  }
}

Improve the testing setup

The test command should run prettier and fail if formatting would happen
- Looks like your previous changes removed prettier from devDependencies entirely, so formatting probably doesn't happen automatically. Add this back.
The test command should also type-check the implementation file with tsc. Still authoring with plain JS + JSDoc comments, though.
Consider adding ESLint to this project as well. Turn all formatting rules off based on their recent blog post.
Run tests in GH Actions as part of the PR workflow. Make sure they are required before merge.

Add Prettier 3.3.0 support

Please add Prettier 3.3.0 support.

> npm install

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @awmottaz/[email protected]
npm error Found: [email protected]
npm error node_modules/prettier
npm error   dev prettier@"3.3.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer prettier@">=3.0.0 <3.3.0" from @awmottaz/[email protected]
npm error node_modules/@awmottaz/prettier-plugin-void-html
npm error   dev @awmottaz/prettier-plugin-void-html@"^1.5.0" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/prettier
npm error   peer prettier@">=3.0.0 <3.3.0" from @awmottaz/[email protected]
npm error   node_modules/@awmottaz/prettier-plugin-void-html
npm error     dev @awmottaz/prettier-plugin-void-html@"^1.5.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Usage whith templating engine ?

Hello,

First thank you for this amazing plugin. 🙏🏼

I'm trying to use it with antlers and twig files, but I'm getting weird results.

For exemple the following HTML:

<link rel="manifest" href="/manifest.webmanifest" />
{{ vite src="resources/scss/main.scss" }}

is formated:

<link rel="manifest" href="/manifest.webmanifest" />
<aex0kndi95pg2qmjyhbcfbvopech9e6gwmzpmyngga></aex0kndi95pg2qmjyhbcfbvopech9e6gwmzpmyngga>

An this is the same for all templating tag.

How can I make this work?

awmottaz / prettier-plugin-void-html Goto Github PK

prettier-plugin-void-html's People

Contributors

Stargazers

Watchers

Forkers

prettier-plugin-void-html's Issues

Input

Output

Expected output

Generic usage

Recommend Projects

Recommend Topics

Recommend Org