Problems with formatting | Astro Lounge | Page 1

stable ridge Aug 16, 2023, 9:21 AM

#

Howdy. Prettier doesn't seem to be running on my .astro files no matter what. I even chatted to the AI to try see if I'm missing something: https://discord.com/channels/830184174198718474/1141297472925351988

But it runs everywhere else, but my .astro files, wondering if anyone has been stuck like this?

As someone with dyslexia and ADHD clean and formatted code is the best way I can work, and I love Astro, but the problems I'm facing is making it near impossible to be able to just focus on my code.

Thanks in advance

#

Should have also mentioned I'm using VSCode Insiders on Mac (Apple Silicon)

frigid root Aug 16, 2023, 9:30 AM

#

Are you formatting in the editor or in the CLI?

#

If you're formatting in the editor, you can simply format using the Astro extension without needing to install anything in your project

stable ridge Aug 16, 2023, 9:32 AM

#

I've attempted both methods, neither with success. running npx prettier --write . formats everything except .astro files lol.

Pressing cmd shift P and running a format with Astro doesn't change anything regarding formatting

frigid root Aug 16, 2023, 9:33 AM

#

Can you share your Prettier config?

stable ridge Aug 16, 2023, 9:34 AM

#

.prettierrc

{
      "trailingComma": "none",
      "tabWidth": 6,
      "semi": true,
      "singleQuote": false,
      "htmlWhitespaceSensitivity": "ignore",
      "printWidth": 9
}

frigid root Aug 16, 2023, 9:34 AM

#

You don't have the plugin specified

stable ridge Aug 16, 2023, 9:35 AM

#

Ah, how can I do this?

frigid root Aug 16, 2023, 9:35 AM

#

plugins: ['prettier-plugin-astro'],

#

We have a recommended configuration in the README you can follow too: https://github.com/withastro/prettier-plugin-astro#recommended-configuration

GitHub

GitHub - withastro/prettier-plugin-astro: Prettier plugin for Astro

Prettier plugin for Astro. Contribute to withastro/prettier-plugin-astro development by creating an account on GitHub.

stable ridge Aug 16, 2023, 9:38 AM

#

this isn't for the .prettierrc file but something different, right? Not sure where to find

Then add the plugin to your Prettier configuration:
Because the formatting is a bit different to the .prettierrc

frigid root Aug 16, 2023, 9:39 AM

#

The guide assumes an ESM .js config, since those are the most common nowadays, but the format is similar for other formats

#

For a .prettierrc, which I believe can either be JSON or YAML, it'd look like

"plugins": ["prettier-plugin-astro"]

or, in YAML,

plugins:
  - prettier-plugin-astro

stable ridge Aug 16, 2023, 9:42 AM

#

so I've added to my .prettierrc like such:

{
      "plugins": ["prettier-plugin-astro"],
      "trailingComma": "none",
      "tabWidth": 6,
      "semi": true,
      "singleQuote": false,
      "htmlWhitespaceSensitivity": "ignore",
      "printWidth": 999999999
}

to no avail sadly. Would you happen to have an example of this "ESM" file you speak of? Didn't realise I was using a less-common solution

frigid root Aug 16, 2023, 9:43 AM

#

I think in Prettier 3 there's a bug where if you just do prettier --write . it doesn't take into account file types added by plugins

#

So you'd need to do something like prettier --write **/*.astro for it to work, not sure

stable ridge Aug 16, 2023, 9:44 AM

#

ah yeah I had to do npx prettier --write **/*.astro thanks for that. A perfect workflow would be for it auto do it on save like how prettier usually works, any ideas on how I could achieve that?

frigid root Aug 16, 2023, 9:45 AM

#

stable ridge so I've added to my .prettierrc like such: ``` { "plugins": ["prettier-pl...

export default {
  plugins: ["prettier-plugin-astro"],
  trailingComma: "none",
  tabWidth: 6,
  semi: true,
  singleQuote: false,
  htmlWhitespaceSensitivity: "ignore",
  printWidth: 999999999,
};

in a file named either .prettierrc.js or prettier.config.js

#

You can see more examples on this page: https://prettier.io/docs/en/configuration.html

Configuration File · Prettier

Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):

#

If you scroll a bit there's a "JS(ESM)" example of a basic config

frigid root Aug 16, 2023, 9:45 AM

#

stable ridge ah yeah I had to do `npx prettier --write **/*.astro` thanks for that. A perfect...

Are you formatting using the Prettier extension or using Astro's?

#

If you're using Prettier's, you can follow the instructions here: https://github.com/withastro/prettier-plugin-astro#using-in-vs-code

#

If you're using Astro's, it should work by default

stable ridge Aug 16, 2023, 9:46 AM

#

Thanks Erika, I'm going to mess around with this until I get something that works. Thanks again

frigid root Aug 16, 2023, 9:49 AM

#

No problems, don't hesitate if you need any further help!

stable ridge Aug 16, 2023, 9:50 AM

#

Just one quick one! On https://github.com/withastro/prettier-plugin-astro#using-in-vs-code where it states

First install the VS Code Prettier extension and add the following settings to your VS Code configuration:

It doesn't say what the VS Code configuration is, so I'm not entirely sure where to add this

frigid root Aug 16, 2023, 9:59 AM

#

In the command palette you can find these options:

#

The first one opens the settings file, the second one opens a UI to edit said settings file

#Problems with formatting