@heinzelman-labs/eslint-config-typescript
v2.1.0
Published
Heinzelman TypeScript ESLint configuration based on @typescript-eslint/eslint-plugin
Downloads
41
Maintainers
Readme
@heinzelman-labs/eslint-config-typescript
A personal ESLint shareable config for TypeScript projects based on the recommended rules defined by @typescript-eslint/eslint-plugin
5.59.11
.
TypeScript rules only apply to .ts
and .tsx
files so that this config also works for mixed JS/TS code bases.
References
At a minimum (using the fast
config), this config extends the eslint-recommended
and recommended
configs provided by @typescript-eslint/eslint-plugin
5.59.11
.
While eslint-recommended
disables such Eslint rules that are already handled natively by TypeScript, recommended
contains the generally recommended rule configs for TypeScript projects.
The default config provided by this package additionally extends recommended-requiring-type-checking
.
Source code of the package can be found on ...
Installation
yarn
yarn add -D @heinzelman-labs/eslint-config-typescript
npm
npm i -D @heinzelman-labs/eslint-config-typescript
Usage
Basic .eslintrc.js
with type-checking
The default config provided by @heinzelman-labs/eslint-config-typescript
does not only extend from @typescript-eslint/recommended
but also from @typescript-eslint/recommended-requiring-type-checking
. These highly valuable rules require type information, thus you will need to add a tsconfig.json
to your project directory.
module.exports = {
extends: [
// Typically either using base or React Eslint config ...
'@heinzelman-labs/eslint-config-react',
// ... in tandem with the TypeScript Eslint config.
'@heinzelman-labs/eslint-config-typescript'
],
rules: {
// Customize base / React rules ...
},
overrides: [
{
files: ['*.ts', '*.mts', '*.cts', '*.tsx'],
rules: {
// Customize TypeScript rules ...
}
},
{
files: ['*.tsx'],
rules: {
// Customize rules exclusively for TypeScript components ...
}
}
],
env: {
// Environments as needed ...
}
};
Basic .eslintrc.js
without type-checking
In order to only use fast feedback rules which operate purely based on syntax, extend from @heinzelman-labs/eslint-config-typescript/fast
. This may come in handy when dealing with really large codebases or you feel that ESLint is slow when it's run by your IDE.
module.exports = {
// ...
extends: [
- '@heinzelman-labs/eslint-config-typescript'
+ '@heinzelman-labs/eslint-config-typescript/fast'
]
// ...
};
Mono-Repo .eslintrc.js
For mono-repos using either @heinzelman-labs/eslint-config-base
or @heinzelman-labs/eslint-config-react
don't forget to add your package directories.
const { resolve } = require('path');
module.exports = {
// ...
rules: {
'import/no-extraneous-dependencies': ['error', {
packageDir: [
__dirname,
resolve(__dirname, 'packages/foo'),
resolve(__dirname, 'packages/bar')
]
}]
}
// ...
};
CLI
I would recommend to not use glob patterns or filenames, but to use directories to specify target files where possible. Then use the --ext
option to define relevant file extensions. This way ESLint will not complain if you end up not having a certain file type among your sources anymore, e.g. .js
. You may also use .eslintignore
to exclude files from the result set as needed.
eslint ./src --ext .js,.ts,.tsx
Changes compared to eslint-config-base
, eslint-config-react
, @typescript-eslint/eslint-plugin
Although this config does neither actively extend @heinzelman-labs/eslint-config-base
nor @heinzelman-labs/eslint-config-react
, it does adjust some of their rules because I personally often use one of them in tandem with @heinzelman-labs/eslint-config-typescript
and some of their rules just don't make sense in a TypeScript context.
Difference from @heinzelman-labs/eslint-config-base
// Can be turned off for TypeScript projects because TypeScript
// does its own lookups.
- 'import/no-unresolved': ['error', {
- commonjs: true,
- caseSensitive: true
- }],
+ 'import/no-unresolved': 'off',
// Rule must be disabled as it can report incorrect errors.
// `@typescript-eslint/no-use-before-define` is used instead.
- 'no-use-before-define': ['error', {
- functions: false,
- classes: true,
- variables: false
- }],
+ 'no-use-before-define': 'off'
Note: A number of other rules get disabled or modified by eslint-recommended
, recommended
and recommended-requiring-type-checking
.
Difference from @heinzelman-labs/eslint-config-react
// Typically not using PropTypes in TypeScript projects, so only
// error on components that have a propTypes block declared.
'react/prop-types': ['error', {
ignore: [],
customValidators: [],
- skipUndeclared: false,
+ skipUndeclared: true
}]
Difference from @typescript-eslint/eslint-plugin
eslint-recommended
No changes.
recommended
- '@typescript-eslint/no-empty-function': 'error',
+ '@typescript-eslint/no-empty-function': ['error', {
+ allow: [
+ 'arrowFunctions',
+ 'functions',
+ 'methods'
+ ]
+ }],
- '@typescript-eslint/no-unused-vars': 'warn',
+ '@typescript-eslint/no-unused-vars': ['error', {
+ vars: 'all',
+ varsIgnorePattern: '^React$',
+ args: 'after-used',
+ ignoreRestSiblings: true
+ }]
recommended-requiring-type-checking
No changes.
Additional rule configs
'@typescript-eslint/explicit-function-return-type': ['error', {
allowExpressions: true
}],
'@typescript-eslint/no-use-before-define': ['error', {
functions: false,
classes: true,
variables: false,
enums: true,
typedefs: false,
ignoreTypeReferences: true
}]