Apply prettier to ui component created with cli

[Sh031224]

Do you have a plan to apply prettier for each project to the ui component created with the cli?

Every time a new file is created, I have to manually save it again in the IDE.
It's a minor, but quite annoying factor.

[takeshikriang]

I got a similar problem and used .prettierignore to deal with it.

For example, this will ignore everything inside shared/ui directory.

// .prettierignore
shared/ui/*

// components.json
{
	"aliases": {
		"components": "@/shared"
	}
}

[Sh031224]

I know that it can be solved by setting prettierignore.
But in the case of shadcn ui, since it is a form of generating component files in a project rather than installing a package, I want to conform to the convention of the project.

[birdzai]

I think you'll run into an issue if you want to use shadcn's "diff" utility to detect when updates are available to shadcn's components. If you use prettier on them, then the diff utitlity will always tell you that an update is available even it it isn't, which basically means you'll never know if there is truly an update or not.

[PieterDePauw]

You have mentioned it yourself, @Sh031224, that this is not really an "installation" process, so I don't think that this feature is necessary and beneficial. If you are not really worried about modifying these files, then why not just run prettier ? You could even run multiple commands sequentially (one after the other) with "&&", as the following example will illustrate:

npx shadcn-ui@latest add card && npx prettier --write .

[luchillo17]

I thought I would just add a custom .prettierrc inside the /src/components/ui folder and make it comply with the output of Shadcn CLI, but there's a lot of differences between the output and the default prettier config, I had to disable multiple rules:

{
  "singleQuote": false,
  "semi": false,
  "trailingComma": "es5"
}

Then I had to add the UI folder to the .eslintignore to ignore the whole folder because I want that diff...

[BenjaminIsMyName]

As @birdzai mentioned, from my experience it's better to add these files to .prettierignore in order to prevent issues when wanting to update these components and looking for new changes via the diff command.

The formatting of the files should NOT be changed.
Make as few changes to these files as possible.

[kerryj89]

Ideally, shadcn diff command would accept a prettier config to apply to its source before diffing with ours.