Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/darenmalfait/nerdfish-config

Foundation configuration for nerdfish web projects
https://github.com/darenmalfait/nerdfish-config

Last synced: about 15 hours ago
JSON representation

Foundation configuration for nerdfish web projects

Host: GitHub
URL: https://github.com/darenmalfait/nerdfish-config
Owner: darenmalfait
Created: 2024-07-03T14:25:52.000Z (6 months ago)
Default Branch: main
Last Pushed: 2025-01-01T00:43:48.000Z (9 days ago)
Last Synced: 2025-01-01T01:23:12.208Z (9 days ago)
Language: JavaScript
Size: 229 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

👮 @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
```

## 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:

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

### VSCode Setup

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

```json
{
"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.

```json
{
"compilerOptions": {
"strictNullChecks": true
}
}
```

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

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

## Prettier/Eslint Usage

The inspiration and codebase was taken from
[epicweb config](https://github.com/epicweb-dev/config), and modified to fit the
needs of nerdfish.

### Prettier

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

```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:

```js
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:

```js
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](https://eslint.org/docs/latest/extend/shareable-configs#overriding-settings-from-shareable-configs).

### 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:

```json
{
"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:

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

Customizing TypeScript

Learn more from
[the TypeScript docs here](https://www.typescriptlang.org/tsconfig/#extends).

## License

MIT