A collection of opinionated web-dev tooling configurations.

Quickstart

[!NOTE] The package manager that the CLI will use to install this package is dependent on what lockfile you have in the root of your project (i.e., having bun.lock will use bun, while having package-lock.json will use npm).

Currently, the only supported package managers are bun and npm.

This package contains a CLI that generates config files for your project. It will prompt you to choose between ESLint + Prettier or Oxlint + Oxfmt.

bunx @hiddenability/opinionated-defaults

npx @hiddenability/opinionated-defaults

You can skip the prompt with flags:

bunx @hiddenability/opinionated-defaults -es  # ESLint + Prettier
bunx @hiddenability/opinionated-defaults -ox  # Oxlint + Oxfmt

Supported Framework Configurations:

Eslint:

• Astro
• Elysia.js
• Next.js

Exports:

• /eslint: eslintConfig, eslintConfigBase, and eslintConfigDefaultProject
• /eslint/astro: Astro configuration
• /eslint/better-tailwindcss: Tailwind CSS linting
• /eslint/functional: Functional style
• /eslint/next: Next.js
• /eslint/oxlint: Disables ESLint rules covered by Oxlint
• /eslint/perfectionist: Natural ordering
• /eslint/prettier: Prettier ESLint integration
• /eslint/react: React and React Hooks
• /eslint/relative: Absolute import paths
• /eslint/solid: Solid
• /eslint/turbo: Turborepo

Included plugins:

• eslint-plugin-astro
• eslint-plugin-prettier
• eslint-plugin-no-relative-import-paths
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-turbo
• eslint-plugin-unicorn
• eslint-plugin-functional
• eslint-plugin-next
• eslint-plugin-oxlint
• eslint-plugin-perfectionist
• eslint-stylistic

Oxlint (ESLint replacement):

Exports:

• oxlintConfig (Merges typed Oxlint config modules)
• oxlintIgnorePatterns (Combines generated-file ignores from config modules)
• oxlintOverride (Scopes config-module differences to workspace projects)
• oxlintConfigBase (General rules for every project)
• oxlintConfigReact (React and React performance project differences)
• oxlintConfigNext (Next.js project differences)
• oxlintConfigTanstackStart (TanStack Start generated-file ignores)

Enabled plugins:

• typescript
• unicorn
• oxc
• import
• promise
• node
• jsx-a11y

Oxfmt (Prettier replacement):

Exports:

• oxfmtConfig (Merges typed Oxfmt config modules)
• oxfmtConfigBase (General formatting options)
• oxfmtConfigNext (Next.js generated-file ignores)
• oxfmtConfigTanstackStart (TanStack Start generated-file ignores)

Built-in features:

• Import sorting (with newlines between groups)
• Tailwind CSS class sorting (supports cva, clsx, cn)

Prettier:

• Astro
• Next.js
• +Opinionated defaults

Exports:

• prettierConfig (Used to merge configurations and provide autocomplete)
• prettierConfigAstro (Astro prettier rules with Tailwind class ordering)
• prettierConfigNext (Rules for Next.js with Tailwind class ordering)
• prettierConfigBase (General rules for every project)
• prettierConfigSortImports (Prettier-based import sorting)

Included plugins:

• prettier-plugin-astro
• prettier-plugin-tailwindcss
• prettier-plugin-sort-imports

Manual Installation:

Alternatively, you can install it manually by running one of the following commands.

bun add @hiddenability/opinionated-defaults -d

npm i @hiddenability/opinionated-defaults -D

Usage:

Oxlint:

// oxlint.config.ts
import { oxlintConfig, oxlintConfigBase } from '@hiddenability/opinionated-defaults/oxlint';

export default oxlintConfig([oxlintConfigBase]);

import {
  oxlintConfig,
  oxlintConfigBase,
  oxlintConfigNext,
  oxlintConfigReact,
  oxlintIgnorePatterns,
  oxlintOverride,
} from '@hiddenability/opinionated-defaults/oxlint';

export default oxlintConfig([oxlintConfigBase], {
  ignorePatterns: oxlintIgnorePatterns([oxlintConfigNext]),
  overrides: [
    oxlintOverride(['apps/dashboard/**/*', 'apps/marketing/**/*'], [oxlintConfigReact]),
    oxlintOverride(['apps/dashboard/**/*'], [oxlintConfigNext]),
  ],
});

Oxfmt:

// oxfmt.config.ts
import { oxfmtConfig, oxfmtConfigBase } from '@hiddenability/opinionated-defaults/oxfmt';

export default oxfmtConfig(oxfmtConfigBase);

Append oxfmtConfigNext or oxfmtConfigTanstackStart when formatting those frameworks manually.

Eslint:

// eslint.config.ts
import { eslintConfig, eslintConfigBase } from '@hiddenability/opinionated-defaults/eslint';
import eslintConfigPrettier from '@hiddenability/opinionated-defaults/eslint/prettier';

export default eslintConfig([...eslintConfigBase, ...eslintConfigPrettier]);

Prettier:

// prettier.config.mjs
import { prettierConfig, prettierConfigBase } from '@hiddenability/opinionated-defaults/prettier';

export default prettierConfig(prettierConfigBase);

Extending/Combining Prettier Configs:

Since Prettier uses a configuration object instead of a flat config like ESLint, to extend or combine configurations, the prettierConfig function will merge configs for you.

// prettier.config.mjs
import {
  prettierConfig,
  prettierConfig1,
  prettierConfig2,
} from '@hiddenability/opinionated-defaults/prettier';

export default prettierConfig(
  prettierConfig1,
  prettierConfig2,
  {/* your custom rules */},
  /*...*/
);

TailwindCSS Plugin:

When using prettier-config-tailwind, make sure to specify the CSS file that contains the @import "tailwindcss" directive.

For example, given the following css file:

/* /app/styles.css */
@import 'tailwindcss';

This could be a minimal version of your Prettier config:

// prettier.config.mjs
import {
  prettierConfig,
  prettierConfigBase,
  prettierConfigTailwind,
} from '@hiddenability/opinionated-defaults/prettier';

export default prettierConfig(prettierConfigBase, prettierConfigTailwind, {
  tailwindStylesheet: `./app/styles.css`,
});

TODO:

• Improve repository structure (How to manage configuration options within eslint dir?).
• Maybe convert into monorepo with one package per tool instead of multiple exports from one package.
• Prevent importing overlapping configurations (i.e., Next.js ESLint config contains base config).
• Support node module resolution.
• Maybe make declarative configurations instead of just providing wrapped config modules.