.eslintrc.json

/**
 * -----------------------------------------------------
 * NOTES ON CONFIGURATION STRUCTURE
 * -----------------------------------------------------
 *
 * Out of the box, ESLint does not support TypeScript or HTML. Naturally those are the two
 * main file types we care about in Angular projects, so we have to do a little extra work
 * to configure ESLint exactly how we need to.
 *
 * Fortunately, ESLint gives us an "overrides" configuration option which allows us to set
 * different lint tooling (parser, plugins, rules etc) for different file types, which is
 * critical because our .ts files require a different parser and different rules to our
 * .html (and our inline Component) templates.
 */
{
    "root": true,
    // Additional projects are linted separately
    "ignorePatterns": [
        "projects/**/*"
    ],
    "overrides": [
        /**
         * -----------------------------------------------------
         * TYPESCRIPT FILES (COMPONENTS, SERVICES ETC) (.ts)
         * -----------------------------------------------------
         */
        {
            "files": [
                "*.ts"
            ],
            "parserOptions": {
                "project": [
                    "tsconfig.app.json",
                    "tsconfig.spec.json"
                ],
                "createDefaultProgram": true
            },
            "extends": [
                "plugin:@angular-eslint/ng-cli-compat",
                /**
             * NOTE:
             *
             * We strongly recommend using a dedicated code formatter, like Prettier, and not
             * using a linter to enforce code formatting concerns.
             *
             * However, for maximum compatibility with how the Angular CLI has traditionally
             * done things using TSLint, this code formatting related add-on config is provided.
             */
                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
                /**
             * -----------------------------------------------------
             * EXTRACT INLINE TEMPLATES (from within Component declarations)
             * -----------------------------------------------------
             *
             * This extra extends is necessary to extract inline templates from within
             * Component metadata, e.g.:
             *
             * @Component({
             *  template: `<h1>Hello, World!</h1>`
             * })
             * ...
             *
             * It works by extracting the template part of the file and treating it as
             * if it were a full .html file, and it will therefore match the configuration
             * specific for *.html above when it comes to actual rules etc.
             *
             * NOTE: This processor will skip a lot of work when it runs if you don't use
             * inline templates in your projects currently, and when it runs on a non-Component
             * file so there is no great benefit in removing it, but you can if you want to.
             */
                "plugin:@angular-eslint/template/process-inline-templates"
            ],
            "rules": {
                /**
             * Any TypeScript related rules you wish to use/reconfigure over and above the
             * recommended set provided by the @angular-eslint project would go here.
             *
             * There are some examples below from the @angular-eslint plugin and ESLint core:
             */
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "app",
                        "style": "camelCase"
                    }
                ],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": "app",
                        "style": "kebab-case"
                    }
                ]
            }
        },
        /**
         * -----------------------------------------------------
         * COMPONENT TEMPLATES
         * -----------------------------------------------------
         *
         * If you use inline templates, make sure you you have read the notes on the extends
         * in the "*.ts" overrides above to understand how they relate to this configuration
         * directly below.
         */
        {
            "files": [
                "*.html"
            ],
            "extends": [
                "plugin:@angular-eslint/template/recommended"
            ],
            "rules": {
                /**
             * Any template/HTML related rules you wish to use/reconfigure over and above the
             * recommended set provided by the @angular-eslint project would go here.
             *
             * There is an example below from ESLint core (note, this specific example is not
             * necessarily recommended for all projects):
             */
                "max-len": ["off"]
            }
        }
    ]
}