👮 @nerdfish/config

Foundation configuration for nerdfish web projects

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"

Customizing 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]

Customizing ESLint

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/*"]
		}
	}
}

Customizing TypeScript

Learn more from the TypeScript docs here.

License

MIT