🐛 BUG: No parser could be inferred for file: Author.astro when using pnpm

[rburgst]

Describe the Bug

When trying to format / check an .astro file, it does not seem to be able to recognize the formatter when using pnpm.

It does work with yarn.

Steps to Reproduce

1. npm init astro using template blog
2. install dependencies with pnpm install
3. add the plugin pnpm i --save-dev prettier-plugin-astro
4. try to prettier an astro file pnpm prettier src/components/Author.astro -c

Checking formatting...
src/components/Author.astro[error] No parser could be inferred for file: src/components/Author.astro
All matched files use Prettier code style!

[rburgst]

note that when I am using yarn 2, I get

yarn format
Usage Error: Couldn't find a script named "prettier".

[antonyfaris]

This is a bug from Prettier itself. See prettier/prettier#8056

[jimmy-guzman]

I was able to get it to work based on this comment

To get the prettier cli to behave with pnpm, you can do the following:

• pass --plugin-search-dir=. to the prettier cli
• add plugins: [require.resolve('prettier-plugin-astro')] to the .prettierrc.js

Also, to get it to work with vscode, you must also do the following:

• add "prettier.documentSelectors": ["**/*.astro"] to the VSCode settings.json
• add the astro parser to the .prettierrc.json, i.e.

  overrides: [
    {
      files: '**/*.astro',
      options: { parser: 'astro' },
    },
  ],

[ekafyi]

I use pnpm workspace (same structure as the official astro.new "component" template) and this is the only VSCode setup that works for me:

On your project root, add .vscode/whatever.code-workspace with the following content (whatever can be any name)

{
  "folders": [
    {
      "path": ".."
    }
  ],
  "settings": {
    "prettier.documentSelectors": [
      "**/*.astro"
    ],
    "[astro]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    }
  }
}

prettier.documentSelectors did NOT work in settings.json.

The prettier config (.prettierrc) and CLI setup is the same as @jimmy-guzman 's post above.

[djmtype]

@ekafyi I still couldn't get my .astro files to format on save using VS workspace. Would you mind sharing your repo or codesandbox?

The only thing that worked for me was running pnpm run format which runs "format": "yarn prettier -w . --plugin-search-dir=." However, that formats every single file in the project – not ideal.

Are you using this VS Code Prettier extension, too? https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[ekafyi]

@djmtype The code is in a private repo, going to make a simple reproduction when i have the time. Yes, I use esbenp.prettier-vscode extension.

In the meantime, if you want the format command to only format astro files, you can do this:

- "format": "yarn prettier -w . --plugin-search-dir=."
+ "format:astro": "yarn prettier -w src/components/*.astro --plugin-search-dir=."

Just curious — does it also not work when you paste these options to your global VSCode settings ("Preferences: Open Settings (JSON)")?

    "prettier.documentSelectors": [
      "**/*.astro"
    ],
    "[astro]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    }

[djmtype]

- "format": "yarn prettier -w . --plugin-search-dir=."
+ "format:astro": "yarn prettier -w src/components/*.astro --plugin-search-dir=."

@ekafyi Thanks for the tip!

[djmtype]

@ekafyi I haven't had any luck with pnpm in regards to getting my files to format on save when using global or workspace settings. pnpm will only work as a separate task.

npm works without issue. But, I'd rather not have duplicate modules on my machine.

@sarah11918 started an instruction guide, so I posted there too:
withastro/docs#425 (comment)

[kissu]

This

"prettier": {
  "documentSelectors": [
    "**/*.astro"
  ]
},

leads to Unknown Configuration Setting (IntelliSense) when hovered in the latest release of VScode, so we can probably forget this one.

Something like this pnpm prettier -w src/pages/about.astro --plugin-search-dir=. works perfectly fine at least. 👍🏻

But of course, nothing from above gives a result. 😿

This would be nice as a Palette + Format Document but godlike if available through an ESlint autorun or even via the Astro extension.

[Princesseuh]

We unfortunately cannot fix the underlying issue ourselves, however can definitely document this much better. As such instructions on how to get this working with pnpm has been added to the plugin's README in the next version.

Additionally, we're in the process of adding instructions inside the Astro docs too (withastro/docs#831). Hopefully, that'll cover it much better!

[vuolter]

I encountered this error too in my last pnpm project and solved it by moving my prettier config to the file package.json this way:

{
    "name": "my-project",
    "type": "module",
    ...
    "prettier": {
        "astroAllowShorthand": true,
        "overrides": [
            {
                "files": "*.astro",
                "options": {
                    "parser": "astro"
                }
            }
        ],
        "pluginSearchDirs": [
            "."
        ],
        "plugins": [
            "prettier-plugin-astro"
        ]
    }
}

[jjaimealeman]

• "format": "yarn prettier -w . --plugin-search-dir=."

• "format:astro": "yarn prettier -w src/components/*.astro --plugin-search-dir=."

When I run yarn format it works fine.
Although yarn format:astro I get this error.

My settings.json has:

    "[astro]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    "prettier.documentSelectors": [
        "**/*.astro"
    ],

[Princesseuh]

• "format": "yarn prettier -w . --plugin-search-dir=."

• "format:astro": "yarn prettier -w src/components/*.astro --plugin-search-dir=."

When I run yarn format it works fine.
Although yarn format:astro I get this error.

My settings.json has:

    "[astro]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    "prettier.documentSelectors": [
        "**/*.astro"
    ],

Do you have the Prettier plugin in your Prettier config? Prettier 3 deprecated plugin auto load and now plugins need to be manually specified in your config.

[jjaimealeman]

Do you have the Prettier plugin in your Prettier config? Prettier 3 deprecated plugin auto load and now plugins need to be manually specified in your config.

This is the contents of my prettier.config.js 🤔

// prettier.config.js
module.exports = {
  tailwindConfig: "./tailwind.config.cjs",
  plugins: [
    require("prettier-plugin-tailwindcss"),
    require.resolve("prettier-plugin-astro"),
  ],
  overrides: [
    {
      files: ["**/*.astro"],
      options: {
        parser: "astro",
      },
    },
  ],
};

[Princesseuh]

Hmm, it seems like the plugin doesn't get loaded. Perhaps try replacing require.resolve("prettier-plugin-astro") with just "prettier-plugin-astro"