Opinionated default configurations for webdev tools.
npm install @hiddenability/opinionated-defaults-win-x64
bunx @hiddenability/opinionated-defaults
`
`
npx @hiddenability/opinionated-defaults
`
Supported Framework Configurations:
$3
- Astro
- Elysia.js
- Next.js
#### Exports:
- eslintConfig (Used to provide autocomplete)
- eslintConfigAstro (Astro)
- eslintConfigBase (General rules for every project)
- eslintConfigElysia (Elysia.js)
- eslintConfigFunctional (Enforces functional style)
- eslintConfigNext (Next.js)
- eslintConfigOxlint (Disables ESlint rules available in Oxlint)
- eslintConfigPrettier (Runs Prettier as ESLint rules)
- eslintConfigReact (General rules for React)
- eslintConfigRelative (Enforces the use of absolute import paths using path aliases)
- eslintConfigStylistic (Enforces code-style through ESLint rules)
- eslintConfigTurbo (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
$3
- 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:
$3
`ts
// eslint.config.ts
import {
eslintConfig,
eslintConfigBase,
} from '@hiddenability/opinionated-defaults/eslint';
export default eslintConfig([
...eslintConfigBase,
// ...eslintConfigPrettier, // other configs fit right in!
// { / your rules here / },
]);
`
$3
`ts
// 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.
`ts
// 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:
`css
/ /app/styles.css /
@import 'tailwindcss';
`
This should be a minimal version of your Prettier config:
`ts
// prettier.config.mjs
import {
prettierConfig,
prettierConfigBase,
prettierConfigTailwind,
} from '@hiddenability/opinionated-defaults/prettier';
export default prettierConfig(prettierConfigBase, prettierConfigTailwind, {
tailwindStylesheet: ./app/styles.css,
});
``