Ionic-app-scripts: VSCode doesn't show any linting issues

[lordgreg]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

Opening the Ionic 3 project with VSCode with Linting issues which are shown using npm run lint

[15:18:58]  tslint: src/pages/more/more-listview-tablet.ts, line: 17
            Property 'navCtrl' is declared but never used.

      L16:  constructor(
      L17:    private navCtrl: NavController,
      L18:    private share: ShareProvider

VSCode doesn't find any issues.

What behavior are you expecting?

VSCode to show the same issues in their "lint" window.

Steps to reproduce:
1.
2.
3.

insert any relevant code between the above and below backticks

Which @ionic/app-scripts version are you using?

▶ ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v8.1.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 5.0.4 

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

[danielsogl]

How should the app-scripts repo add lint functions to VSCode? :D
Install the tslint plugin: https://marketplace.visualstudio.com/items?itemName=eg2.tslint

[lordgreg]

Thank you for your reply, however, its unhelpful. Even though, I'll explain the issue again:

• ionic-app-scripts includes linting
• ionic project includes ionic-app-scripts
• ionic project includes tsconfig.json and tslint.json files
• why/how can it be that IDE is not showing the same issues as the CLI?
• vscode tslint extension is installed
• tslint and typescript modules are globally installed

And the question back at you..

• does your ide of choice shows linting errors using NON-ide-plugin with ionic project?

[lordgreg]

Also, vscode in tslint windows reports:

[Info  - 3:09:24 PM] Linter is running.
Warning: The 'no-unused-variable' rule requires type infomation.

And the tslint includes:

{
  "rules": {
    "no-duplicate-variable": true,
    "no-unused-variable": [
      true
    ]
  },
  "rulesDirectory": [
    "node_modules/tslint-eslint-rules/dist/rules"
  ]
}

[vkniazeu]

I'm getting the same behavior, and this did work before.
It seems that it stems from some configuration mismatch or the newer versions of tslint and/or typescript.
I do have the latest installed both globally and as local dev dependencies.
In some of my projects using https://github.com/ionic-team/tslint-ionic-rules instead of the default tslint.json generated by the Ionic CLI seems to bring back the highlighting in VSCode with its tslint extension installed.
I can't yet pinpoint as to what causes the linting issues to not show in the IDE anymore.

[vkniazeu]

FWIW, I don't think tslint-ionic-rules is active and should be used.

[vkniazeu]

It was suggested in https://github.com/Microsoft/vscode-tslint/issues/181#issuecomment-290339874 that "Mixing a global and local install can be the source of problem, can you try whether installing both modules globally or locally fixes the problem.", but trying either approach doesn't seem to fix the problem.
Moreover, with a global install TSLint doesn't seem to kick in at all in VSCode.
Trying to downgrade the tslint and typescript versions to see if that helps.

[vkniazeu]

I agree with @danielsogl , however, that this is extremely unlikely an issue with ionic-app-scripts.
It's not in the picture until you do anything with Ionic CLI, which is unrelated to the IDE.

[vkniazeu]

https://github.com/palantir/tslint shows node v7 as the dev requirement. I use the latest 8+.
Perhaps, this is the reason for the problem. Downgrading seems to require a reversal of many other things I've upgraded.
I think for now, I'll just rely on linting during ionic serve to pick up the errors.

[vkniazeu]

Installing tslint-ionic-rules as a dev dependency and updating tslint.json to the following starts picking up some rules in VS Code.

{
  "extends": "tslint-ionic-rules"
}

But I feel that those are only the rules defined in this package's tslint.js, but not the ones that are extended from tslint-eslint-rules/dist/rules, which Ionic defaults to when creating new apps.

Creating a blank Ionic project with the CLI and having the tslint extension installed does reproduce the problem of highlighting missing.

Perhaps, the problem is with the tslint-eslint-rules package, or its or its dependencies versions that Ionic relies on.

[vkniazeu]

Installing tslint-eslint-rules as a dev dependency and extending it instead doesn't solve the problem.

[tigrannajaryan]

Any update on this? I am on latest Ionic and VS Code and no linting is shown in VS Code although npm run lint works fine.

[svzi]

I would appreciate an update as well. 👍

[darkguy2008]

Same here, 2019...

[fermmm]

I fixed this problem, TSlint fails silently most of the time, I run tslint -c tslint.json 'src/**/*.ts' to see if TSlint was working at least on the console and then the error appeared, in my case the problem was a dependency not installed.