@hug/eslint-config

ESLint shareable configuration with great defaults

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:

Preset	Description
✅ = hug.configs.`recommended`	Strict linter rules.
☁️ = hug.configs.`moderate`	Less strict linter rules.

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

Prior to version v21.x

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"
    ]
}

Prior to version v20.2.0

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"]
}

For Angular >= 10.x <= 11.x

npm install @hug/eslint-config@2.x --save-dev

yarn add eslint@7.x @hug/eslint-config@2.x --dev

Migrating from tslint

Remove tslint and codelyzer from your dependencies

Remove any tslint.json configuration files

Add eslint as a dev depe
@hug/eslint-config

ESLint shareable configuration with great defaults

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:

Presets	Description
✅ = hug.configs.`recommended`	Strict linter rules.
☁️ = hug.configs.`moderate`	Less strict linter rules.

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

Prior to version v21.x

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"
    ]
}

Prior to version v20.2.0

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"]
}

For Angular >= 10.x <= 11.x

npm install @hug/eslint-config@2.x --save-dev

yarn add eslint@7.x @hug/eslint-config@2.x --dev

Migrating from tslint

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.

Name		Name	Last commit message	Last commit date
Latest commit History 333 Commits
.github		.github
.husky		.husky
.vscode		.vscode
configs		configs
examples/angular		examples/angular
scripts		scripts
tests		tests
.editorconfig		.editorconfig
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
DEVELOPER.md		DEVELOPER.md
LICENSE		LICENSE
README.md		README.md
eslint.config.ts		eslint.config.ts
index.ts		index.ts
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

@hug/eslint-config

Installation

Usage

Example 1: linter + formatter + angular accessibility

Example 2: individual configs

Example 3: with overrides

Visual inspector

Configurations

Customization

Previous installations

@hug/eslint-config

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

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 94

Uh oh!

Contributors

Uh oh!

Languages