feat: Support biome.js as a linter / formatter option in the cli

[aidansunbury]

Closes #1973

✅ Checklist

• I have followed every step in the contributing guide (updated 2022-10-06).
• The PR title follows the convention we established conventional-commit
• I performed a functional test on my final commit

Changelog

The CLI now prompts the user to select either eslint/prettier or biome as a formatting and linting option. If eslint/prettier is selected, the app is scaffolded the same way it always is. If biome is selected, files (prettier.config.js, .eslintrc.cjs) and all eslint/prettier related dependencies are no longer included and instead a biome.jsonc file is generated and @biomejs/biome is installed.

Prettier and eslint are enabled by default through cli flags, but a linter selection can now be specified with either an --eslint or --biome flag.

Additionally, the installation of prettier used to be tied to using tailwind css, meaning selecting no for "Will you be using Tailwind CSS for styling?" meant that prettier was not installed. A choice of formatter and a choice of using tailwind css should not be coupled, so now prettier will be installed so long as biome is not selected as a formatter. The 'prettier-plugin-tailwindcss' will only be configured in the prettier config file if tailwind css is selected.

For the biome.jsonc file, I just used the default configuration and added the use-sorted-classes nursery rule. I would love to hear thoughts on what should be in the default config, but making changes to the template file will not impact the changes to the functionality of this feature.

Screenshots

💯

[changeset-bot]

🦋 Changeset detected

Latest commit: cbad9bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-t3-app	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
create-t3-app	✅ Ready (Inspect)	Visit Preview	💬 1 unresolved ✅ 1 resolved	Nov 15, 2024 5:18am

[vercel]

@aidansunbury is attempting to deploy a commit to the t3-oss Team on Vercel.

A member of the Team first needs to authorize it.

[Ikkevoid]

I checked it out locally, and from what I can tell, things are working. However, the format:check and format:write commands aren't working for me. Unfortunately, there's no biome format --check, and it's also impossible to specify file extensions to go through, as you can with Prettier.

Another thing to consider: do you plan to do anything with the next lint commands inside the package.json file?

[aidansunbury]

I checked it out locally, and from what I can tell, things are working. However, the format:check and format:write commands aren't working for me. Unfortunately, there's no biome format --check, and it's also impossible to specify file extensions to go through, as you can with Prettier.

Another thing to consider: do you plan to do anything with the next lint commands inside the package.json file?

Thanks for catching that! There are now three scripts added when you use biome. Check linting and formatting without applying fixes, apply only safe fixes, and apply unsafe fixes. They should all be working now, and biome only checks js/ts files anyways, so it is not needed to specify the file types.

I removed the next lint scripts when using biome, as the whole points of using biome is to then stop using eslint.

Also, as a minor refactoring note, I created an addPackageScript helper and refactored a few of the installers to use it.

[TheCukitoDev]

I checked it out locally, and from what I can tell, things are working. However, the format:check and format:write commands aren't working for me. Unfortunately, there's no biome format --check, and it's also impossible to specify file extensions to go through, as you can with Prettier.

Another thing to consider: do you plan to do anything with the next lint commands inside the package.json file?

I thing Biome is cool as only a formatter until next lint fully supports Biome. Until then I am using only Biome as a formatter instead of as a linter. I didn't had any error but it is better to be preppared if anything happens. This is only my oppinion

[aidansunbury]

@TheCukitoDev Biome has three main commands: format, lint, and check (which runs the formatter and linter). I personally pretty much always just use the check command, so that is what I added in this pr, but would you from a dx perspective also prefer to have lint and format commands already included in the package.json?

[TheCukitoDev]

I usually only use Biome as a formatter because as I think, has the best addaption to Next.js because it actually lnts really good for Next.js but i think actually in Next.js the only linter with all the features is ESLint. When Biome fully supports Next.js it will be my first option but until then i will use the mixed version. I would like to have the 3 commands in the package.json. It only costs 2 lines of code so it should be a great option

[TheCukitoDev]

Hello, i created other PR Request because i dont know how could I add code to this one. I added another option with your Biome implementation and a mixed one that uses ESLint and Biome as I like to use. The PR is the #2025