How to create some custom rules in ESLint with Angular?

362 Views Asked by At

I would like to create the following rules:

  • If it has variable or private function:

    The "_" in front must be mandatory, for example:

      private _foo;
      private _baar();
    
  • If it has variable or public function:

    It must be mandatory with nothing in front, such as:

      public foo;
      public baar();
    
  • If you have variable correlated with RxJS:

    The "$" at the end must be mandatory, for example:

      foo$: Subject
      foo$: Observable
      foo$: BehaviorSubject
    

    Remembering the private and public rules too.

  • If you have @Output:

    It must be mandatory to have the "$" in front, for example:

      $click
      $change
    

My code:

module.exports = {
    root: true,
    overrides: [
        {
            files: ["src/**/*.ts"],
            parser: "@typescript-eslint/parser",
            parserOptions: {
                project: ["tsconfig.json", "e2e/tsconfig.json"],
                tsconfigRootDir: __dirname,
                sourceType: "module",
                createDefaultProgram: true,
            },
            extends: [
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates",
                "airbnb-base",
                "airbnb-typescript/base",
                "eslint:recommended",
                "plugin:@typescript-eslint/eslint-recommended",
                "plugin:@typescript-eslint/recommended",
                "plugin:prettier/recommended",
            ],
            plugins: ["prettier", "unused-imports", "simple-import-sort"],
            rules: {
                curly: ["error", "all"],
                "import/prefer-default-export": "off",
                "class-methods-use-this": "off",
                "no-console": "off",
                "no-underscore-dangle": ["error", { allowAfterThis: true }],
                "no-else-return": ["error", { allowElseIf: true }],
                "import/order": [
                    "error",
                    {
                        "newlines-between": "never",
                        alphabetize: {
                            caseInsensitive: true,
                            order: "asc",
                        },
                        groups: [
                            "internal", // angular imports - configured in 'import/internal-regex'
                            "unknown", // rxjs imports
                            "external", // all libraries imports - configured in 'import/external-module-folders'
                            "builtin", // internal-library imports
                            ["parent", "sibling", "index"], // relative paths
                        ],
                        pathGroupsExcludedImportTypes: ["builtin", "type", "object"],
                    },
                ],
                "@typescript-eslint/no-inferrable-types": "off",
                "@typescript-eslint/no-explicit-any": ["error"],
                "@typescript-eslint/no-empty-interface": ["error", { allowSingleExtends: true }],
                "@typescript-eslint/lines-between-class-members": ["error", { exceptAfterOverload: true }],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        prefix: "app",
                        style: "kebab-case",
                        type: "element",
                    },
                ],
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        prefix: "app",
                        style: "camelCase",
                        type: "attribute",
                    },
                ],
                "prettier/prettier": [
                    "warn",
                    { endOfLine: "auto" },
                    {
                        usePrettierrc: true,
                        fileInfoOptions: {
                            withNodeModules: true,
                        },
                    },
                ],
            },
        },
        {
            files: ["src/index.html"],
            extends: ["plugin:prettier/recommended"],
            plugins: ["prettier", "html"],
            rules: {
                "prettier/prettier": [
                    "warn",
                    { endOfLine: "auto" },
                    {
                        usePrettierrc: true,
                        fileInfoOptions: {
                            withNodeModules: true,
                        },
                    },
                ],
            },
        },
        {
            files: ["src/app/*.html"],
            extends: ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
            plugins: ["prettier"],
            rules: {
                "prettier/prettier": [
                    "warn",
                    { endOfLine: "auto" },
                    {
                        usePrettierrc: true,
                        fileInfoOptions: {
                            withNodeModules: true,
                        },
                    },
                ],
            },
        },
    ],
};
0

There are 0 best solutions below