https://github.com/qodesmith/biome-config
A shareable Biome config for JavaScript / TypeScript projects.
https://github.com/qodesmith/biome-config
Last synced: 2 months ago
JSON representation
A shareable Biome config for JavaScript / TypeScript projects.
- Host: GitHub
- URL: https://github.com/qodesmith/biome-config
- Owner: qodesmith
- Created: 2025-04-19T10:45:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-01-29T15:49:44.000Z (5 months ago)
- Last Synced: 2026-01-30T04:33:47.291Z (5 months ago)
- Language: TypeScript
- Size: 256 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @qodestack/biome-config
A Biome config for JavaScript, TypeScript, and React projects - linting +
formatting in one!
Why this package
I was on a quest to use ESLint (flat configs) and Prettier - great tools. Then
I bit the Antfu
bug about not using Prettier and having ESLint do
all-the-things
instead. That lead to frustration and a realization I was just following along
because. I never really had beef with Prettier in the first place.
When I asked myself what I really wanted, I landed on
Biome - a single tool
to lint _and_ format my code. Now I can go back to building things instead of
configuring them 😅
## Usage / Setup
### Installation via your package manager
```
bun add -D @qodestack/biome-config
```
```
npm i -D @qodestack/biome-config
```
### CLI Tool ✨
There is a CLI tool included in this package that automatically sets everything
up for you. You can run it by typing `bunx biomeInit`. This will start a guided
process. Since this config is opinionated, the CLI tool is also. For example,
it assumes VS Code is your IDE (you can disable that with an option). If you
want more control over what the CLI tool outputs, use the optional flags. See
[cli.md](./cli.md) for details.
Using the CLI is completely optional. Below details how you can manually set
things up yourself.
### Create a `biome.jsonc` or `biome.json` file
You will extend from the config provided in this package.
Vanilla JS/TS projects:
```json
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"extends": ["@qodestack/biome-config"]
}
```
React projects:
```json
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"extends": ["@qodestack/biome-config/react"]
}
```
#### Add scripts to `package.json`
> [!NOTE]
> The `check` script lints *and* formats code
`package.json`:
```json
{
"scripts": {
"check": "biome check",
"check:fix": "biome check --write .",
"lint": "biome lint",
"lint:fix": "biome lint --write .",
"format": "biome format",
"format:fix": "biome format --write ."
}
}
```
### Recommended VS Code settings
Add the following to `.vscode/settings.json`:
```jsonc
{
// Avoid any remnants from previously loved tools.
"prettier.enable": false,
"eslint.enable": false,
// import type {thing} from 'pkg' <-- Uses this
// import {type thing} from 'pkg'
"js/ts.preferences.preferTypeOnlyAutoImports": true,
// Biome settings.
"biome.enabled": true,
"[typescript][typescriptreact][javascript][javascriptreact][json][jsonc]": {
"editor.defaultFormatter": "biomejs.biome",
},
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}
```
Now go build stuff instead of endlessly configuring things.