A personal ESLint config for my projects.
Install the package, along with its peers:
$ npm install --save-dev @typescript-eslint/parser@^7 @typescript-eslint/parser@^7 eslint@^8 eslint-config-next@^14 eslint-config-prettier@^9 eslint-plugin-react@^7 eslint-plugin-react-hooks@^4 typescript@^5 eslint-config-infernal
Create the ESLint config file in your project root, specifying either your project's
tsconfig.json
, or the tsconfig.json
files of your packages:
{
"extends": ["infernal"],
"root": true,
"parserOptions": {
"project": ["./tsconfig.json", "../packages/**/tsconfig.json"]
}
}
In the case of a monorepo, you can specify ESLint configurations in each of your packages to customize or apply different rules:
{
"extends": ["infernal"],
"rules": {}
}
This configuration offers a number of variants for different situations:
-
infernal
- The default variant, for use in a serverside TypeScript project. -
infernal/browser
- For use in the browser. -
infernal/react
- For use in a plain React project. -
infernal/next
- For use with the Next.js framework. -
infernal/ecmascript
- For use with plain JavaScript without types.
I have written the configs in a way such that all immediately fixable rules are enabled as warnings, and others are generally enabled as errors. There is no particular reason for the set of rules I have chosen, other than that I like them.
Here's a brief overview of the rules:
-
eslint:recommended
- The recommended ESLint ruleset.
-
infernal/ecmascript
- The above ECMAScript rules. -
@typescript-eslint/recommended
- The recommended TypeScript ESLint ruleset. -
@typescript-eslint/recommended-type-checked
- The recommended TypeScript ESLint ruleset, with rules that require type information enabled. -
@typescript-eslint/strict
- The strict TypeScript ESLint ruleset. -
@typescript-eslint/strict-type-checked
- The strict TypeScript ESLint ruleset, with rules that require type information enabled.
-
infernal/browser
- The TypeScript rules, with browser-specific rules enabled. -
eslint-config-next
- The recommended Next.js ESLint ruleset.
This config is intended to be used in conjunction with Prettier. You can find my Prettier config here.
I have disabled the majority of formatting rules, since it's preferable to use a formatter over ESLint for this purpose. I have enabled a few rules that I find useful, but these are not intended to be exhaustive. Check out this article by the TypeScript ESLint team for more information.
This project is licensed under the MIT License - see the LICENSE-MIT file for details.