@hug/eslint-config

v25.0.1

Published

a month ago

ESLint shareable configuration with great defaults

0High
0Medium
0Low

badisi

dsi-hug

eslint eslintconfig lint linter code style quality angular rxjs javascript jslint es6 typescript cypress

Installation

npm install @hug/eslint-config --save-dev

yarn add eslint @hug/eslint-config --dev

See previous installations section for older requirements.

Usage

Create an eslint.config.ts file at the root of your project

Example 1: linter + formatter + angular accessibility

import { defineConfig } from 'eslint/config';
import hug from '@hug/eslint-config';

export default defineConfig(
    hug.configs.recommended, // Linter preset
    hug.configs.stylistic.recommended, // Formatter
    hug.configs.angular.accessibility.recommended, // Angular accessibility
);

Example 2: individual configs

import { defineConfig } from 'eslint/config';
import hug from '@hug/eslint-config';

export default defineConfig(
    hug.configs.eslint.recommended,
    hug.configs.typescript.recommended,
    hug.configs.angular.ts.moderate,
);

Example 3: with overrides

import { defineConfig, globalIgnores } from 'eslint/config';
import hug, { Files } from '@hug/eslint-config';

export default defineConfig(
    // will add new ignored files
    globalIgnores(['examples/'], 'my-project/ignores'),

    // will customize predefined configs
    hug.configs.createRecommended({
        // will disabled the current jsdoc recommended configuration
        jsdoc: false,
        // will override files for the current eslint recommended configuration
        eslint: {
            files: ['src/**/*.mjs'],
        }
        // will add or override rules for the current typescript recommended configuration
        typescript: {
            rules: {
                '@typescript-eslint/prefer-nullish-coalescing': 'off',
            }
        }
    }),

    // will also add or override rules for the current typescript recommended configuration
    {
        name: 'my-project/typescript/overrides',
        files: Files.TYPESCRIPT, // <- required for the overrides to work
        rules: {
            '@typescript-eslint/method-signature-style': ['error', 'property'],
        }
    }

    // will add a completely new set of rules
    {
        name: 'my-project/e2e',
        files: ['e2e/**/*.ts'],
        plugins: e2ePlugin,
        rules: {
            'e2e-rule': 'error',
        },
    },
);

Modify your existing angular.json

"architect": {
    "lint": {
        "builder": "@angular-eslint/builder:lint",
        "options": {
            "lintFilePatterns": [
                "**/*.js",
                "**/*.json",
                "**/*.ts",
                "**/*.html"
            ]
        }
    }
}

Run ng lint

ℹ️ You can also skip steps 2 and 3 and simply run:

npx eslint *.{js,json,ts,html}

Visual inspector

Eslint has made available a great tool to visually inspect and understand your current configurations.

Go to the project root that contains eslint.config.js and run:

npx @eslint/config-inspector

Configurations

This package exports a set of rules that enforces good practices.

They may or may not served you well as they are mainly designed to be used by the HUG organization's team.

The following predefined configurations are available:

You can also use part of those configurations individually:

| Config | Description | ✅ | ☁️ | | :--- | :--- | --- | --- | hug.configs.stylistic | Formatting rules. | | | hug.configs.eslint | Eslint rules. | ✅ | | hug.configs.typescript | Typescript rules. | ✅ | | hug.configs.angular.ts | Angular rules for typescript files. | ✅ | ☁️ | hug.configs.angular.html | Angular rules for template files. | ✅ | | hug.configs.angular.accessibility | Angular accessibility rules for template files. | | | hug.configs.rxjs | Rxjs rules. | ✅ | ☁️ | hug.configs.rxjsAngular | Rxjs rules specific to Angular. | ✅ | | hug.configs.cypress | Cypress rules. | ✅ | | hug.configs.jsdoc.js | Jsdoc rules for javascript files. | ✅ | | hug.configs.jsdoc.ts | Jsdoc rules for typescript files | ✅ | | hug.configs.json | Rules for json files. | ✅ | | hug.configs.jsonc | Rules for jsonc files.| ✅ | | hug.configs.json5 | Rules for json5 files | ✅ | | hug.configs.no-loops | Disallow use of loops. | ✅ | | hug.configs.prefer-arrow | Prefer arrow functions. | ✅ | | hug.configs.simple-import-sort | Easily autofix import sorting. | ✅ | | hug.configs.unused-imports | Find and remove unused imports. | ✅ | | hug.configs.no-secrets | Search for potential secrets/keys in code. | ✅ | |

Customization

Each configuration can be customized using its own create<Name> property.

Examples:

hug.configs.createRecommended(options)
hug.configs.createStylistic(options)
hug.configs.typescript.createRecommended(options)
hug.configs.angular.ts.createModerate(options)

Previous installations

Create an .eslintrc.json file at the root of your project

{
    "root": true,
    "extends": [
        /**
         *  Possible values: 'recommended (strict) | moderate (less stricter)'
         */
        "@hug/eslint-config/recommended"
    ]
}

Create a tsconfig.eslint.json file at the root of your project

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "types": [
            "node",
            "jasmine"
            //
            // In case you are using WebdriverIO
            //   "@wdio/globals/types"
            //
            // In case you are using Cypress
            //   "cypress"
            //
            // Any other types that are required by your tests
            //   ...
        ]
    },
    "include": ["src/**/*.ts", "e2e/**/*.ts"]
}

npm install @hug/[email protected] --save-dev

yarn add [email protected] @hug/[email protected] --dev

Remove tslint and codelyzer from your dependencies
Remove any tslint.json configuration files
Add eslint as a dev depe @hug/eslint-config

Installation

npm install @hug/eslint-config --save-dev

yarn add eslint @hug/eslint-config --dev

See previous installations section for older requirements.

Usage

Create an eslint.config.ts file at the root of your project

Example 1: linter + formatter + angular accessibility

import { defineConfig } from 'eslint/config';
import hug from '@hug/eslint-config';

export default defineConfig(
    hug.configs.recommended, // Linter preset
    hug.configs.stylistic.recommended, // Formatter
    hug.configs.angular.accessibility.recommended, // Angular accessibility
);

Example 2: individual configs

import { defineConfig } from 'eslint/config';
import hug from '@hug/eslint-config';

export default defineConfig(
    hug.configs.eslint.recommended,
    hug.configs.typescript.recommended,
    hug.configs.angular.ts.moderate,
);

Example 3: with overrides

import { defineConfig, globalIgnores } from 'eslint/config';
import hug, { Files } from '@hug/eslint-config';

export default defineConfig(
    // will add new ignored files
    globalIgnores(['examples/'], 'my-project/ignores'),

    // will customize predefined configs
    hug.configs.createRecommended({
        // will override files for the current angular recommended configuration
        angular: {
            files: ['src/**/*.ts'],
        }
        // will add or override rules for the current typescript recommended configuration
        typescript: {
            rules: {
                '@typescript-eslint/prefer-nullish-coalescing': 'off',
            }
        }
    }),

    // will also add or override rules for the current typescript recommended configuration
    {
        name: 'my-project/typescript/overrides',
        files: Files.TYPESCRIPT, // <- required for the overrides to work
        rules: {
            '@typescript-eslint/method-signature-style': ['error', 'property'],
        }
    }

    // will add a completely new set of rules
    {
        name: 'my-project/e2e',
        files: ['e2e/**/*.ts'],
        plugins: e2ePlugin,
        rules: {
            'e2e-rule': 'error',
        },
    },
);

Modify your existing angular.json

"architect": {
    "lint": {
        "builder": "@angular-eslint/builder:lint",
        "options": {
            "lintFilePatterns": [
                "**/*.js",
                "**/*.json",
                "**/*.ts",
                "**/*.html"
            ]
        }
    }
}

Run ng lint

ℹ️ You can also skip steps 2 and 3 and simply run:

npx eslint *.{js,json,ts,html}

Visual inspector

Eslint has made available a great tool to visually inspect and understand your current configurations.

Go to the project root that contains eslint.config.ts and run:

npx @eslint/config-inspector

Configurations

This package exports a set of rules that enforces good practices.

They may or may not served you well as they are mainly designed to be used by the HUG organization's team.

The following predefined configurations are available:

Or you can also use configurations individually:

| Config | Description | ✅ | ☁️ | | :--- | :--- | --- | --- | | hug.configs.stylistic | Formatting rules. | | | | hug.configs.eslint | Eslint rules. | ✅ | | | hug.configs.typescript | Typescript rules | ✅ | | | hug.configs.angular.ts | Angular rules for typescript files. | ✅ | ☁️ | | hug.configs.angular.html | Angular rules for template files. | ✅ | | | hug.configs.angular.accessibility | Angular accessibility rules for template files. | | | | hug.configs.rxjs | Rxjs rules. | ✅ | ☁️ | | hug.configs.rxjsAngular | Rxjs rules specific to Angular. | ✅ | | | hug.configs.cypress | Cypress rules. | ✅ | | | hug.configs.jsdoc.js | Jsdoc rules for javascript files. | ✅ | | | hug.configs.jsdoc.ts | Jsdoc rules for typescript files | ✅ | | | hug.configs.json | Rules for json files. | ✅ | | | hug.configs.jsonc | Rules for jsonc files.| ✅ | | | hug.configs.json5 | Rules for json5 files | ✅ | | | hug.configs.no-loops | Disallow use of loops. | ✅ | | | hug.configs.prefer-arrow | Prefer arrow functions. | ✅ | | | hug.configs.simple-import-sort | Easily autofix import sorting. | ✅ | | | hug.configs.unused-imports | Find and remove unused imports. | ✅ | | | hug.configs.no-secrets | Search for potential secrets/keys in code. | ✅ | |

Customization

Each configuration can be customized using its own create<Name> property.

Examples:

hug.configs.createRecommended(options)
hug.configs.createStylistic(options)
hug.configs.typescript.createRecommended(options)
hug.configs.angular.ts.createModerate(options)

Previous installations

Create an .eslintrc.json file at the root of your project

{
    "root": true,
    "extends": [
        /**
         *  Possible values: 'recommended (strict) | moderate (less stricter)'
         */
        "@hug/eslint-config/recommended"
    ]
}

Create a tsconfig.eslint.json file at the root of your project

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "types": [
            "node",
            "jasmine"
            //
            // In case you are using WebdriverIO
            //   "@wdio/globals/types"
            //
            // In case you are using Cypress
            //   "cypress"
            //
            // Any other types that are required by your tests
            //   ...
        ]
    },
    "include": ["src/**/*.ts", "e2e/**/*.ts"]
}

npm install @hug/[email protected] --save-dev

yarn add [email protected] @hug/[email protected] --dev

Remove tslint and codelyzer from your dependencies
Remove any tslint.json configuration files
Add eslint as a dev dependency
Have a look at our Angular project example and modify all your tsconfig files accordingly

Development

See the developer docs.

Contributing

> Want to Help?

Want to file a bug, contribute some code or improve documentation? Excellent!

But please read up first on the guidelines for contributing, and learn about submission process, coding rules and more.

> Code of Conduct

Please read and follow the Code of Conduct, and help us keep this project open and inclusive.

Credits

ndency

Have a look at our Angular project example and modify all your tsconfig files accordingly

Development

See the developer docs.

Contributing

> Want to Help?

Want to file a bug, contribute some code or improve documentation? Excellent!

But please read up first on the guidelines for contributing, and learn about submission process, coding rules and more.

> Code of Conduct

Please read and follow the Code of Conduct, and help us keep this project open and inclusive.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Installation

Usage

Example 1: linter + formatter + angular accessibility

Example 2: individual configs

Example 3: with overrides

Visual inspector

Configurations

Customization

Previous installations

Installation

Usage

Example 1: linter + formatter + angular accessibility

Example 2: individual configs

Example 3: with overrides

Visual inspector

Configurations

Customization

Previous installations

Development

Contributing

> Want to Help?

> Code of Conduct

Credits

Development

Contributing

> Want to Help?

> Code of Conduct

Credits