将 angular 更新到 v14 后，TSlint 规则变为 ESlint

Question

after upgrading angular to v14 I also install ESlint .

Until now, I use TSlint with some custom rules, config... here is my tslint.json (in root)

{
  "extends": ["tslint-config-airbnb"],
  "rules": {
    "align": {
      "options": ["parameters", "statements"]
    },
    "array-type": false,
    "arrow-return-shorthand": true,
    "curly": true,
    "deprecation": {
      "severity": "warning"
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [true, "attribute", "", "camelCase", "kebab-case"],
    "component-selector": [true, "attribute", "", "kebab-case"],
    "eofline": true,
    "import-blacklist": [true, "rxjs/Rx"],
    "import-spacing": true,
    "indent": {
      "options": ["spaces"]
    },
    "max-classes-per-file": false,
    "max-line-length": [true, 140],
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
    "no-empty": false,
    "no-inferrable-types": [true, "ignore-params"],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [true, "as-needed"],
    "quotemark": [true, "single"],
    "semicolon": {
      "options": ["always"]
    },
    "space-before-function-paren": {
      "options": {
        "anonymous": "never",
        "asyncArrow": "always",
        "constructor": "never",
        "method": "never",
        "named": "never"
      }
    },
    "typedef-whitespace": {
      "options": [
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        },
        {
          "call-signature": "onespace",
          "index-signature": "onespace",
          "parameter": "onespace",
          "property-declaration": "onespace",
          "variable-declaration": "onespace"
        }
      ]
    },
    "variable-name": {
      "options": [
        "ban-keywords",
        "check-format",
        "allow-pascal-case",
        "allow-leading-underscore"
      ]
    },
    "whitespace": {
      "options": [
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type",
        "check-typecast"
      ]
    },
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "template-banana-in-box": true,
    "template-no-negated-async": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "trailing-comma": false
  },
  "rulesDirectory": ["codelyzer"]
}

I follow this guide to migrate to ESlint , but after this command

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets

here is my output

But I didn't get any of my "tslint" rules in ".eslintrc.json"

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {}
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

In my package.json in devDep I have

    "@angular-eslint/builder": "14.1.2",
    "@angular-eslint/eslint-plugin": "14.1.2",
    "@angular-eslint/eslint-plugin-template": "14.1.2",
    "@angular-eslint/schematics": "14.1.2",
    "@angular-eslint/template-parser": "14.1.2",
    "@typescript-eslint/eslint-plugin": "5.37.0",
    "@typescript-eslint/parser": "5.37.0",
    "eslint": "^8.23.1",

Is there any way to "convert" my TS rules to ESrules?

Thnx In advice

Answer 1

eslint/schematics:convert-tslint-to-eslint apparently does not recreate the eslintrc file if it is already created (and I had it after ng add @angular-eslint/schematics )

I removed basic eslintrc file ( eslint/schematics:convert-tslint-to-eslint will create a new one with the rules from tslint, unless you ignore them) and got new eslintrc with modified tslint rules.