No Undeclared This

Eslint plugin that ensures that this-bound class properties are declared up front

Installation

Install as a dev dependency:

npm i -D no-undeclared-this

Add to eslint.config.js:

import noUndeclaredThis from './no-undeclared-this.js';

export default [
    {
        plugins: {
            'no-undeclared-this': noUndeclaredThis,
        },
        rules: {
            'no-undeclared-this/allow-constructors': 'error',
            // or
            'no-undeclared-this/strict': 'error',
        },
    },
];

Function

No Undeclared This has two rules:

Strict

Forces declaration in main class body.

Config:

'no-undeclared-this/strict': 'error'

Valid example:

export class Game {
    player = true;

    hide() {
        // Valid; we've defined this.player
        this.player = false;
    }
}

Invalid example:

export class Game {
    hide() {
        // Invalid; this.player has not been declared at root
        this.player = false;
    }
}

Invalid example:

export class Game {
    constructor() {
        this.player = true;
    }

    hide() {
        // Invalid; must be defined in class root in strict mode
        this.player = false;
    }
}

Allow Constructors

Allows defining properties of this in the constructor.

Config:

'no-undeclared-this/allow-constructors': 'error'

Valid example:

export class Game {
    player = true;

    hide() {
        // Valid; we've defined this.player
        this.player = false;
    }
}

Invalid example:

export class Game {
    hide() {
        // Invalid; this.player has not been declared at root or in constructor
        this.player = false;
    }
}

Valid example:

export class Game {
    constructor() {
        this.player = true;
    }

    hide() {
        // Valid; this.player defined in constructor
        this.player = false;
    }
}