Skip to content

Add a prettier for format #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

Add a prettier for format #59

wants to merge 1 commit into from

Conversation

michaelnabil230
Copy link
Contributor

This PR is for adding prettier to format the frontend.

tnylea
tnylea reviewed Mar 10, 2025
View reviewed changes
resources/views/welcome.blade.php
@@ -1,273 +1,810 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we figure out how to prevent the formatter from adding /> to single tags like this.

tnylea
tnylea suggested changes Mar 10, 2025
View reviewed changes
Copy link
Contributor

@tnylea tnylea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good except for the formatter changing things like:

<meta charset="utf-8">

to this:

<meta charset="utf-8" />

Can you figure out how to prevent that and then I think we can get this approved.

Appreciate it!

@tnylea tnylea added the Awaiting User Response Waiting for developers response label Mar 10, 2025
Rattone
Rattone reviewed Mar 10, 2025
View reviewed changes
resources/css/app.css
@@ -9,7 +9,8 @@
@custom-variant dark (&:where(.dark, .dark *));

@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-sans:
'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Meh

resources/views/livewire/auth/register.blade.php
autocomplete="email"
placeholder="[email protected]"
/>
<flux:input wire:model="email" :label="__('Email address')" type="email" required autocomplete="email" placeholder="[email protected]" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for elements with many attributes is it not better to go on multiple lines? is there not a limit of characters per line?

@tnylea
Copy link
Contributor

tnylea commented Mar 19, 2025

@michaelnabil230, let me know if you can address the concerns above and we can move forward with this PR.

Really appreciate it 👏

@tnylea tnylea added Pending Closure Have not heard back from original author and PR has potential of being closed soon. and removed Awaiting User Response Waiting for developers response labels Mar 19, 2025
@michaelnabil230
Copy link
Contributor Author

Hello @tnylea,

Sorry for the delay in responding. After thoroughly investigating, I found that Prettier created this format to support HTML5.

Ref: prettier/prettier#5246

@xewl
Copy link

xewl commented Mar 21, 2025 •
edited
Loading

Even though it makes sense, browsers don't care about the self-closing tag at all />.
It stems from the XHTML -> HTML5 fase, and it's a leftover of XML (and ended up to be a readability thing).
It's very opiniated, but since the maintainers are asking, the following prettier setting should suffice:
autoClosingTags: false

@michaelnabil230
Copy link
Contributor Author

Hello @xewl,

It looks like autoClosingTags is not a recognized option in Prettier, so seeing the warning [warn] Ignored unknown option { "autoClosingTags": true }.

@xewl
Copy link

xewl commented Mar 22, 2025 •
edited
Loading

I'm sorry, I assumed this was an option, as I've seen it on JS-side.

This looks to be more in line with "Void Tags". (htmlVoidTags: false maybe?)

Though (after looking around):
Seems like it's not something Prettier is able (or willing) to add as a supported option.
Without a plugin that is.
Though, the plugin might introduce other discrepancies.

Lots of issues on their plugin are around this topic, to be honest :/

  • https://github.com/prettier/prettier/issues/5098#issuecomment-423711733
  • https://github.com/prettier/prettier/issues/15336
  • https://github.com/prettier/prettier/issues/5377
  • https://github.com/prettier/prettier/issues/5246
  • https://github.com/biomejs/biome/issues/4490 // related issue, pointing to Prettier
    (Coded, as I don't want to ping the other threads right now)

Final note;
If we need an option like in the void-html plugin, it'll probably need to be implemented with prettier-plugin-blade

@michaelnabil230
Copy link
Contributor Author

Hello @xewl,

I tried formatting using this plugin, but it doesn't format correctly and throws an error with Blade.

Screenshot 2025-03-29 at 5 05 13 PM

@xewl
Copy link

xewl commented Mar 29, 2025

Had the same result, sadly.

@tnylea
Copy link
Contributor

tnylea commented Mar 31, 2025

This is something that we can add eventually to the Laravel ecosystem. Nuno Maduro actually has a draft open for Pint to add Blade formatting: laravel/pint#256. I'm sure he would appreciate any help on that front.

I'm closing this for now. Please re-open if you wish to revisit it in the future. Appreciate it.

@tnylea tnylea closed this Mar 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
2 more reviewers

@Rattone Rattone Rattone left review comments

@tnylea tnylea tnylea requested changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
Pending Closure Have not heard back from original author and PR has potential of being closed soon.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@michaelnabil230 @tnylea @xewl @Rattone