Prettier Plugin: Prettier v3 Support

[JohnathonKoster]

Support Prettier v3

Blockers:

[x] Tailwind CSS plugin (used in tests) [-] Prettier VS Code extension fails on Windows (no longer considering blocker; can use CLI/etc.) [x] Prettier v3 issues running on Windows CLI [x] New module structure

[robsontenorio]

@JohnathonKoster Maybe rewrite this docs? https://www.npmjs.com/package/prettier-plugin-blade

The current steps does not work.

[JohnathonKoster]

@JohnathonKoster Maybe rewrite this docs? https://www.npmjs.com/package/prettier-plugin-blade

The current steps does not work.

You'll need to make sure you're running the latest version of prettier 2. I've added a note about the supported prettier version

[JohnathonKoster]

It has been done

[HassanZahirnia]

Hey! Is there any chance for this setup to work on Windows in the future?

I've upgraded the prettier to v3 and also prettier-plugin-blade to v2 but VSC can't recognize any formatter for Blade files. Unless I downgraded back prettier to v2 and also prettier-plugin-blade to v1 everything will work.

[JohnathonKoster]

Hey! Is there any chance for this setup to work on Windows in the future?

I've upgraded the prettier to v3 and also prettier-plugin-blade to v2 but VSC can't recognize any formatter for Blade files. Unless I downgraded back prettier to v2 and also prettier-plugin-blade to v1 everything will work.

The prettierrc structure will change slightly when updating; here is a sample file:

{
    "plugins": [
        "prettier-plugin-blade",
        "prettier-plugin-tailwindcss"
    ],
    "overrides": [
        {
            "files": [
                "*.blade.php"
            ],
            "options": {
                "parser": "blade"
            }
        }
    ]
}

If you have specific errors that you are getting that would be helpful. Thanks! 🙂

[HassanZahirnia]

Yeah I've tried updating the prettier config. But after upgrading to v3 I get this error when trying to format a Blade file: This is Prettier extension log output: And yes I did try restarting VSCode after upgrading.

This is my package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@fontsource/poppins": "^5.0.8",
        "@formkit/auto-animate": "1.0.0-beta.6",
        "@ryangjchandler/alpine-tooltip": "^1.3.1",
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "^0.5.10",
        "alpinejs": "^3.13.3",
        "autoprefixer": "^10.4.16",
        "axios": "^1.6.3",
        "dayjs": "^1.11.10",
        "gsap": "^3.12.4",
        "laravel-vite-plugin": "^1.0.1",
        "lodash": "^4.17.21",
        "postcss": "^8.4.32",
        "prettier": "^3.1.1",
        "prettier-plugin-blade": "^2.0.0",
        "prettier-plugin-tailwindcss": "^0.5.10",
        "tailwindcss": "^3.4.0",
        "tippy.js": "^6.3.7",
        "vite": "^5.0.10"
    }
}

And my .prettierrc config:

{
    "plugins": [
        "prettier-plugin-blade",
        "prettier-plugin-tailwindcss"
    ],
    "overrides": [
        {
            "files": [
                "*.blade.php"
            ],
            "options": {
                "parser": "blade"
            }
        }
    ],
    "tailwindConfig": "./tailwind.config.js",
    "singleQuote": true,
    "semi": false,
    "trailingComma": "all",
    "singleAttributePerLine": true
}

And my VSCode settings:

I don't know if this is relevant but this error does popup randomly when I'm in the editor, dunno if it was there before v3 upgrade:

[JohnathonKoster]

I'll take a look, but am doubtful this is anything specific to the Blade plugin itself. 👍

[JohnathonKoster]

@HassanZahirnia I was able to reproduce on a fresh machine/install of everything. I was able to solve this by adding the Blade extensions to the prettier.documentSelectors config. Sample user settings JSON that resolved it:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[blade]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.documentSelectors": [
      "**/*.blade.php"
    ]
}

[HassanZahirnia]

@JohnathonKoster Thank you so much for looking into this and coming up with a solution! 🙏😊

So I guess this is an issue with VSC Prettier extension itself? Like it can't detect Blade files or something?

Are there any side effects with setting documentSelectors? Wanna make sure Prettier works across all files and also alongside other formatters.

[JohnathonKoster]

@JohnathonKoster Thank you so much for looking into this and coming up with a solution! 🙏😊

So I guess this is an issue with VSC Prettier extension itself? Like it can't detect Blade files or something?

Are there any side effects with setting documentSelectors? Wanna make sure Prettier works across all files and also alongside other formatters.

There should be no side effects using that; I don't think its really an issue, either. The documentSelectors configuration is way to let VS Code know that prettier can handle that type of file extension 🙂

[HassanZahirnia]

Awesome nice thank you! 🌸