Nx: eslint missing in angular apps

[gperdomor]

_Please make sure you have read the submission guidelines before posting an issue_

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

Create angular apps using eslint should be possible

Current Behavior

Can't create a angular app using eslint as linter

Failure Information (for bugs)

Cannot parse arguments. See below for the reasons.
    Argument --linter could not be parsed using value "eslint". Valid values are: "tslint".

Process failed 🐳

Steps to Reproduce

Run ng generate @nrwl/angular:application console --linter=eslint --dry-run --no-interactive

Context

Please provide any relevant information about your setup:

• version of Nx used: 8.4.6

[iangregsondev]

I get something different :-(

➜  new-work-test git:(master) ✗ ng generate @nrwl/angular:application console --linter=eslint --dry-run --no-interactive

Cannot parse arguments. See below for the reasons.
    Argument --linter could not be parsed using value "eslint". Valid values are: "tslint".

[gperdomor]

any update about this? @vsavkin

[vsavkin]

We are waiting on the Angular team to port Angular-specific lint checks to make tslint/es-lint options comparable.

[Chumachenkovlad]

@vsavkin Will you plan to add the possibility of migration from tslint to eslint for existing Angular app?

[vsavkin]

It's hard to migrate everyone reliability. We will likely have something that will get you 90% there.

To be clear, you can already use eslint with Angular.

Define the builder like this:

   "lint": {
          "builder": "@nrwl/linter:lint",
          "options": {
            "linter": "eslint",
            "config": "libs/my-angular-lib/.eslintrc",
            "tsConfig": [
              "libs/my-angular-lib/tsconfig.lib.json",
              "libs/my-angular-libtsconfig.spec.json"
            ],
            "exclude": ["**/node_modules/**", "!libs/react/lib4/**"]
          }
        },

Define a root-level .eslintrc:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "@nrwl/nx"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/explicit-member-accessibility": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-parameter-properties": "off",
    "@nrwl/nx/enforce-module-boundaries": [
      "error",
      {
        "allow": [],
        "depConstraints": [
          {
            "sourceTag": "*",
            "onlyDependOnLibsWithTags": [
              "*"
            ]
          }
        ],
        "enforceBuildableLibDependency": true
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "*.tsx"
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off"
      }
    }
  ]
}

And a project-level eslintrc:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "plugins": ["import"],
  "extends": ["../../../.eslintrc"]
}

[xmlking]

I am using the latest nx (Release 9.0.4) workspace created with

create-nx-workspace yeti --preset="angular" --appName="webapp" --style="scss" --cli=nx --interactive

based on docs: https://github.com/nrwl/nx/blob/master/docs/angular/api-workspace/schematics/library.md

I am guessing this is correct way to create apps/libs with eslint

nx g app sumo --style="scss" --linter="eslint" --routing  --dry-run
Schematic input does not validate against the Schema: {"unitTestRunner":"jest","e2eTestRunner":"cypress","style":"scss","linter":"eslint","routing":true,"name":"sumo"}
Errors:

  Data path ".linter" should be equal to one of the allowed values.
----

nx g lib  sumo --style="scss" --linter="eslint" --routing  --dry-run
Could not match option 'linter' to the @nrwl/angular:library schema.

please advise if i miss something

[vsavkin]

@xmlking sorry, I think I mislead you. You have to create a project with tslint and then replace it with eslint.

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark _not reproducible_ issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[offwork]

Unfortunately, Angular is trapped in his own shell. The angular team should make CLI freer as soon as possible. To me, a CLI task should be limited. It is a nightmare to constantly consider the compatibility problem of the packages that CLI is dependent on. CLI is betraying its developers by taking responsibility for the lint and test process.

[Lonli-Lokli]

Btw with creating workspace + angular app leads to both eslint & tslint listed as dev deps.

[brandonroberts]

eslint has been added to Angular projects as an option via https://github.com/nrwl/nx/pull/3479

[wrslatz]

Should a separate issue be made to align with whatever path is chosen for Angular as part of https://github.com/angular/angular-cli/issues/13732?

Or would an Nx update likely include that work and be the appropriate place to track?

[asherccohen]

Hey guys, any news on migrating from tslint to eslint?