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/eslint-config@2.x --save-dev

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

1. Remove tslint and codelyzer from your dependencies
2. Remove any tslint.json configuration files
3. 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

1. 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',
           },
       },
   );

2. Modify your existing angular.json

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

3. 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:

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

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

Copyright (C) 2021 HUG - Hôpitaux Universitaires Genève

ndency

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