npm install @nerdfish/config --save-dev
pnpm install @nerdfish/config --save-dev
yarn add @nerdfish/config --dev

create a reset.d.ts file in your project root with the following content:

import '@nerdfish/config/reset.d.ts'

Biomejs (experimental)

If you're running VS Code, ensure you have the following extensions installed:

code --install-extension biomejs.biome
code --install-extension bradlc.vscode-tailwindcss

Create a biome.json file in your project root with the following contents:

{ "extends": ["@nerdfish/config/biome"] }

VSCode Setup

Create a .vscode/settings.json file with the following contents to enable full formatting and fixing on save:

{
	"typescript.tsdk": "node_modules/typescript/lib",
	"editor.defaultFormatter": "biomejs.biome",
	"editor.formatOnSave": true,
	"editor.formatOnPaste": true,
	"emmet.showExpandedAbbreviation": "never",
	"editor.codeActionsOnSave": {
		"quickfix.biome": "always",
		"source.organizeImports.biome": "always"
	},
	"[typescript]": {
		"editor.defaultFormatter": "biomejs.biome"
	},
	"[json]": {
		"editor.defaultFormatter": "biomejs.biome"
	},
	"[javascript]": {
		"editor.defaultFormatter": "biomejs.biome"
	},
	"[jsonc]": {
		"editor.defaultFormatter": "biomejs.biome"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "biomejs.biome"
	}
}

Ensure your tsconfig.json (if it exists) includes your new ESLint config and that strictNullChecks is enabled.

{
	"compilerOptions": {
		"strictNullChecks": true
	}
}

Lastly, ensure you have the following scripts in your package.json:

"lint:fix": "npx biome check --write ./",
"lint": "npx biome check",

Prettier/Eslint Usage

The inspiration and codebase was taken from epicweb config, and modified to fit the needs of nerdfish.

Prettier

The easiest way to use this config is in your package.json:

"prettier": "@nerdfish/config/prettier"

If you want to customize things, you should probably just copy/paste the built-in config. But if you really want, you can override it using regular JavaScript stuff.

Create a .prettierrc.js file in your project root with the following content:

import defaultConfig from '@nerdfish/config/prettier'

/** @type {import("prettier").Options} */
export default {
	...defaultConfig,
	// .. your overrides here...
}

ESLint

Create a eslint.config.js file in your project root with the following content:

import { config as defaultConfig } from '@nerdfish/config/eslint'

/** @type {import("eslint").Linter.Config} */
export default [...defaultConfig]

Opinionated testing rules (optional)

Everything below is part of @nerdfish/config — install once, no extra packages.

| What you import | What it enables | | ------------------------------------- | ----------------------------------------------------- | | @nerdfish/config/eslint/testing | Testing Library queries, HTTP mock lifecycle, partial mocks | | @nerdfish/config/eslint/testing/bdd | User Story / Given / When structure (optional add-on) | | @nerdfish/config/eslint/conventions | Team coding conventions (to*/by* transformers, handle* handlers, is*/has* booleans, use* hooks, no bare useEffect) |

Spread the flat configs you need:

import { config as defaultConfig } from '@nerdfish/config/eslint'
import { config as testingConfig } from '@nerdfish/config/eslint/testing'
import { config as testingBddConfig } from '@nerdfish/config/eslint/testing/bdd'
import { config as conventionsConfig } from '@nerdfish/config/eslint/conventions'

/** @type {import("eslint").Linter.Config} */
export default [
	...defaultConfig,
	...testingConfig,
	// ...testingBddConfig, // optional
	// ...conventionsConfig, // optional
]

ESLint plugin namespaces (not npm packages). Custom rules still need a plugin name in flat config. Ours are @nerdfish/testing, @nerdfish/testing-bdd, and @nerdfish/conventions — they look like package names but only label rule IDs, e.g. @nerdfish/testing/no-testid-queries, @nerdfish/testing-bdd/bdd-split-on-and, and @nerdfish/conventions/map-transformer-name, and @nerdfish/conventions/sort-transformer-name, and @nerdfish/conventions/boolean-name, and @nerdfish/conventions/no-unnecessary-use-prefix, and @nerdfish/conventions/no-use-effect.

We use two namespaces so you can spread @nerdfish/config/eslint/testing and .../testing/bdd in the same eslint.config.js without ESLint erroring on a redefined plugin. BDD stays a separate subpath export; the namespace split is an implementation detail of that opt-in.

To cherry-pick rules, import plugin (and testingRules / bddRules / conventionsRules) from the matching subpath and wire them into your own config block.

Learn more from the Eslint docs here.

Github

Because of the tabs instead of spaces, we need to use a custom .editorconfig file for github, otherwise the indents will be a bit off.

VSCode Setup

Create a .vscode/settings.json file with the following contents to enable full formatting and fixing on save:

{
	"typescript.tsdk": "node_modules/typescript/lib",
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"editor.formatOnPaste": true,
	"emmet.showExpandedAbbreviation": "never",
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}

TypeScript

Create a tsconfig.json file in your project root with the following content:

{
	"extends": ["@nerdfish/config/typescript"],
	"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
	"compilerOptions": {
		"paths": {
			"#app/*": ["./app/*"],
			"#tests/*": ["./tests/*"]
		}
	}
}

Learn more from the TypeScript docs here.

License

MIT