🐛 BUG: Prettier for .astro files doesn't work - looks turned off

[teinett]

Describe the Bug

Prettier looks turned off - see screenshot. But if open the Prettier console, everything looks fine.

File .vscode/settings.json:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro", // Enable .astro
    "typescript", // Enable .ts
    "typescriptreact" // Enable .tsx
  ],
  "stylelint.validate": [
    "css",
    "html",
    "vue",
    "svelte",
    "astro"
  ],
  "prettier.documentSelectors": ["*/.astro"]
}

File .prettierrc.mjs:

/** @type {import("prettier").Config} */
export default {
    plugins: ["prettier-plugin-astro"],
    overrides: [
        {
            files: "*.astro",
            options: {
                parser: "astro",
            },
        },
    ],
};

INFO:

Astro                    v4.0.7
Node                     v18.18.1
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/sitemap
                         @astrojs/react
                         astro-compress

"prettier": "^3.1.1",
"prettier-plugin-astro": "^0.12.3",

Steps to Reproduce

1. Open any .astro file in VS Code
2. Observe turned off Prettier
3. Rules for Prettier don't work, for example, 4 spaces as a tab.

[Princesseuh]

The prettier.documentSelectors config should be **/*.astro, with two asterisks before and an asterisk after, as documented here.

Your current config is targeting every file named literally .astro at the root of your workspace (presumably no files)

[teinett]

The prettier.documentSelectors config should be **/*.astro, with two asterisks before and an asterisk after, as documented here.

Your current config is targeting every file named literally .astro at the root of your workspace (presumably no files)

I changed it with two asterisks in .vscode/settings.json::

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro", // Enable .astro
    "typescript", // Enable .ts
    "typescriptreact" // Enable .tsx
  ],
  "stylelint.validate": [
    "css",
    "html",
    "vue",
    "svelte",
    "astro"
  ],
  "prettier.documentSelectors": ["**/*.astro"]
}

Prettier now is turned on, but still doesn't work :(

Every other file reads and complies rules from .editorconfig, but not .astro files.

[Princesseuh]

Your config doesn't set the Prettier extension as the formatter for Astro files, make sure you're formatting with it:

"[astro]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

[teinett]

Your config doesn't set the Prettier extension as the formatter for Astro files, make sure you're formatting with it:

"[astro]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Where should I do it?

FYI: this project worked totally fine until I updated it to the latest npm packages couple weeks ago. Every setting for Prettier worked perfectly.

[Princesseuh]

In your VS Code configuration. This is, again, all documented in the "Using in VS Code" section of the README: https://github.com/withastro/prettier-plugin-astro#using-in-vs-code

FYI: this project worked totally fine until I updated it to the latest npm packages couple weeks ago. Every setting for Prettier worked perfectly.

Nothing has changed related to Prettier in the last two months 😅 I do not know what you mean by what worked and doesn't work now. If you have a repo I can take a look at, I'd be happy to.

[teinett]

I see. Thank you to sending me to this document again and again. :)

There is frase in here https://github.com/withastro/prettier-plugin-astro#using-in-vs-code:

Note If you're using [Astro's VS Code extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode), Prettier and this plugin are already included. Only follow the guide below to format using Prettier's official extension.

I understood it like this: if you are using VS Code with Astro's VS Code extension, you don't need to do it, because it's already done. So I didn't do it :)

I changed my .vscode/settings.json file:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro", // Enable .astro
    "typescript", // Enable .ts
    "typescriptreact" // Enable .tsx
  ],
  "stylelint.validate": [
    "css",
    "html",
    "vue",
    "svelte",
    "astro"
  ],
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Now Prettier works. :) Thanks!

It's the magic that it worked before.

[Princesseuh]

Thank you, I'll update the sentence to be more clear, sorry for the inconvenience!