@dineroregnskab/eslint-plugin-custom-rules

Dinero Custom ESLint Rules

Custom extended rules for various Dinero specific standards & conventions.

Installation

Bundled with dinero.Frontend & dinero.Admin package.json, so a general npm install will include it as default.

Explicit install:

npm install @dineroregnskab/eslint-plugin-eslint-custom-rules@latest --save-dev

Development

Run npm i in root and in /example.

Adding rules

• Create a new js rule in this directory: ./rules

• Add the new rule to this file ./eslint-plugin-custom-rules.js.

• Add the new rule to ./example/eslint.config.mjs

• Test the rule by adding some HTML/TS code here ./example/test.html or ./example/test.ts and restart the ESLint server in vs code by pressing F1 -> ESLint: Restart ESLint Server.

• You can also test the rules via the terminal directly without reloading eslint server and to see code debugging in the rule definition:

npm run testhtml
npm run testts

Debugging what the eslint sees

Add a rule, and log it with console log, to see in terminal if the element function even runs "Program" in this case. Then run npm run testhtml npm script to see it in terminal.

module.exports = {
    meta: {
        type: 'suggestion',
        docs: {
            description:
                'Enforce using `danishCurrency` pipe instead of `currency` pipe in Angular HTML templates.',
        },
        fixable: 'code',
        schema: [],
    },

    create(context) {
        return {
            // Target the entire file and traverse each node
            Program(node) {
                console.log('Parsed Node Types:', node);
            },
        };
    },
};

Publish & install new rule locally

1. Log in to npm using npm login
2. run:

# {version_type}: The type of version increment (patch, minor, major)
npm version {version_type} && npm publish

• In dinero.Frontend and/or dinero.Admin, update the root package.json file with the newly published version number.
• Locate the eslintrc or the newer eslint.config.mjs file and add the new rule in the rules property (under "files": ["*.html"], "files": ["*.ts"] etc. respectively).

Note: The reference here must be in the format of the package name without "eslint-plugin" + rule name

Example:

"@dineroregnskab/custom-rules/reducers-should-always-return": ["warn"]

• Run

npm i

Note: You need to restart ESLint to apply new rules. Restart the ESLint server in vs code by pressing F1 -> ESLint: Restart ESLint Server or F1 -> reload window

See ESLint custom rule tutorial for more.

Useful tool for working with AST tree: AST Explorer

License

MIT