Skip to content
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.

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

Prettier formatting issues with blade templates #122

Open
anirbantegit opened this issue Jan 17, 2025 · 0 comments
Open

Prettier formatting issues with blade templates #122

anirbantegit opened this issue Jan 17, 2025 · 0 comments

Comments

@anirbantegit
Copy link

When using prettier-plugin-blade to format Blade templates (.blade.php files), the following issues occur:

  1. JavaScript inside Blade templates gets incorrectly formatted

    • Inline JavaScript with Blade directives (e.g., @lang()) gets broken.
    • Prettier introduces unwanted line breaks or removes quotes, causing syntax errors.
  2. Trailing commas and indentation issues

    • Arrays, function arguments, and parameters do not respect the "trailingComma": "all" setting.
    • Indentation inside Blade @foreach, @if, and @section structures sometimes gets inconsistent.
  3. Prettier conflicts with ESLint in Blade files

    • Running eslint --fix on Blade templates causes additional unintended formatting.
    • eslint-plugin-html does not recognize Blade directives, leading to parsing errors.

================

.prettierrc.json

{
"trailingComma": "all",
"singleQuote": true,
"semi": true,
"tabWidth": 4,
"plugins": ["prettier-plugin-blade"],
"overrides": [
{
"files": "*.blade.php",
"options": {
"parser": "blade"
}
}
]
}

Sample blade -

<script> let a = "@lang('global.resend_available_in')"; var b = 60; </script>

===================

Expected Behavior
Inline JavaScript inside Blade templates should remain correctly formatted.
Blade directives should not be broken or reformatted incorrectly.
The trailingComma rule should apply consistently across Blade files.

Actual Behavior
Prettier introduces syntax-breaking changes to inline JavaScript.
Some Blade directives get incorrectly modified or removed.
Prettier and ESLint conflict, leading to unwanted formatting changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant