iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

ESLint with TS

ESLint catches bugs and style issues TypeScript itself doesn't — unused vars, missing await, accidental any. The typescript-eslint project adds type-aware rules on top.

Install

SHELL
pnpm add -D eslint typescript-eslint

Flat config (ESLint 9+)

eslint.config.js
import tseslint from 'typescript-eslint';

export default tseslint.config(
    tseslint.configs.strict,
    tseslint.configs.stylistic,
    {
        rules: {
            '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
            'no-console': ['warn', { allow: ['warn', 'error'] }],
        },
    },
);

Type-aware rules

Some checks need actual type info — turn on the type-checked config:

eslint.config.js
import tseslint from 'typescript-eslint';

export default tseslint.config(
    ...tseslint.configs.recommendedTypeChecked,
    {
        languageOptions: {
            parserOptions: {
                projectService: true,
                tsconfigRootDir: import.meta.dirname,
            },
        },
    },
);

Useful TS-specific rules

RuleCatches
no-floating-promisesForgotten await on a Promise.
no-misused-promisesPassing an async function where a callback is expected.
strict-boolean-expressionsTruthy checks on non-bool values.
no-unnecessary-conditionCondition is always true / false.
no-explicit-anyAny explicit : any.
consistent-type-importsForce import type for type-only imports.

Scripts

package.json
{
    "scripts": {
        "lint":    "eslint .",
        "lint:fix":"eslint . --fix"
    }
}

Editor integration

Install the official ESLint extension in your editor. Most show errors inline and offer fix-on-save.

Tip: Don't pile rules on the team — start with strict + stylistic + 5–10 hand-picked. Every rule has a cost in autofixes and arguments; ship the ones that catch real bugs.

Example

Example
// pnpm add -D eslint typescript-eslint
// eslint.config.js (flat config, ESLint 9+):
// import tseslint from 'typescript-eslint';
// export default tseslint.config(
//   tseslint.configs.strict,
//   tseslint.configs.stylistic,
// );
console.log('ESLint + typescript-eslint = lint + type-aware rules');
Try it Yourself »

Exercise

NPM package that adds TS rules to ESLint.

Test yourself

Q1. TS-aware ESLint comes from…
Q2. Modern ESLint config is…
Q3. A particularly useful TS rule is…

Discussion

Loading…