Introduce formatter and linter for app

[shrilakshmishastry]

I have checked the following:

• [X] I've searched existing issues and found nothing related to my issue.

Describe the feature you want to add

The built-in nextjs formatter and linter is not strong enough to figure out errors in reactjs. Introduce biome and vscode settings.

why biome? It's a fast all in one formatter and linter pacakge

why vscode settings? for frontend development mostly opted editor is vscode, hence it make sense to write .vscode settings to have biome as default formatternext

Mockups or Images of the feature

with biome

without biome

[sfreeman422]

What advantages does biome provide over the de facto prettier/eslint combination used on most web applications?

I would not be in favor of vscode settings since it makes an assumption about a developers dev environment that may or may not be true. Ideally something that is IDE agnostic should be preferred.

[shrilakshmishastry]

Advantages of biome

• it's super faster than the rest of the tools
• Biome is a toolchain, which means it can combine a set of tools we use, more than formatting and lining
• It's compatible with prettier, won the prettier 10,000$ bounty
• It is rust-based and has funding from major organizations to secure its future
• Many OSS contributors and framework maintainers has start using biome
• For credibility of biome, you can trust the maintainer, if they want to sunset they could have long back, its a custom fork of rome tools from one of the original authors, rome tools has been sunset, but one of the author forked it and converted to biome

why vscode settings? because for frontend development most of the developers prefer vscode.