Adding typescript-eslint to a project

27 Aug 2023

Heres how to quickly add typescript-eslint to your typescript project. Of course, this isnt the same thing as configuring eslint for typscript 😂

Step 0

Project already configured with typescript

Step 1

Install typescript-eslint:

# eg
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

Step 2

Use sensible defaults:

Disable parseInt, parseFloat
Semi-colons on!
Naming convention on!
PascalCase enum identifiers (upstream bug - wontfix)
Disable error on unused function parameter (to allow api-style coding with mandatory parameters)

.eslintrc.cjs

/* eslint-env node */
const typescriptEslint = require('@typescript-eslint/eslint-plugin');


module.exports = {
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/strict-type-checked',
        'plugin:@typescript-eslint/stylistic'
    ],
    plugins: ['@typescript-eslint'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: true,
        tsconfigRootDir: __dirname,
    },
    root: true,
    rules: {
        // Note: you must disable the base rule as it can report incorrect errors
        "semi": "off",
        // TS styleguide says dont use em...
        "no-restricted-globals": [
            "error",
            {"name": "parseFloat", "message": "Use Number('123') instead"},
            {"name": "parseInt", "message": "Use Math.trunc(Number('123')) instead"},
        ],
        "@typescript-eslint/semi": "error",

        // PascalCase enum members
        // bad default in https://github.com/typescript-eslint/typescript-eslint/issues/6592
        // means have to recreate the entire rule structure here by extracting the defaults from:
        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/rules/naming-convention.ts
        "@typescript-eslint/naming-convention": [
            "error",
            ...[...typescriptEslint.rules["naming-convention"].defaultOptions, {
                "selector": "enumMember",
                "format": ["PascalCase"]
            }]
        ],

        // Need to allow unused parameters for some callback styles to work, style guide
        // bans variables starting `_`: https://ts.dev/style/#identifiers
        //
        // Allow unused parameters if the name starts `ignore`
        // https://stackoverflow.com/questions/65921949/eslint-warns-about-unused-function-parameter-type
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": ["error", {argsIgnorePattern: "^ignore"}]
    }
};

Step 3

Update package.json, eg:

{
  "scripts": {
    "lint": "npx eslint src",
  }
}

Run linting

npm run lint

Bonus: WebStorm setup

WebStorm eslint setup

Gotcha!

.eslintrc.cjs cannot be a symlink since this will break the module loading codes:

Error: Cannot find module '@typescript-eslint/eslint-plugin'

…So you must keep many copies of this file

Enjoy!

geoffwilliams@home:~$