ESLint configuration presets for TypeScript and TypeScript + React projects.
- ESLint
>=9.0.0. - Your project must be using ESLint's new flat configuration format.
npm install --save-dev @darkobits/eslint-config
This package provides two presets: presetTs for TypeScript
projects and presetTsx for TypeScript projects that use
JSX and React.
In your project's eslint.config.js file, import the desired preset and re-export it as the default
export:
export { presetTs as default } from '@darkobits/eslint-config'or
export { presetTsx as default } from '@darkobits/eslint-config'If you need to define any additional configuration specific to your project, use the spread operator to add the preset to a new array:
import { airBnb } from '@airbnb/eslint-config-airbnb-is-still-a-thing-right'
import { presetTs } from '@darkobits/eslint-config'
export default [
// Exempt this directory from linting. Do this early to prevent ESLint from
// processing these files any further.
{ ignores: ['rainbows/**'] },
// Then, apply one or more configuration presets.
...airBnb,
...presetTs,
// If we then wanted to disable a rule used by any of the above:
{ rules: { 'unicorn/catch-error-name': 'off' } }
]Tip
Order matters here! Configuration for files that you want to have globally ignored occur first, followed by one or more configuration presets, then overrides.
For more on this topic, refer to the ESLint documentation.
For added type safety, use the defineFlatConfig helper:
import { defineFlatConfig, presetTs } from '@darkobits/eslint-config'
export default defineFlatConfig([
{ ignores: ['rainbows/**'] },
...presetTs,
{ rules: { 'unicorn/catch-error-name': 'off' } }
])You can use ESLint's new Configuration Inspector to see an exhaustive list of all rules (and their settings) applied in your project by running the following:
npx eslint --inspect-configExample:
