Codelyzer: [Question] Codelyzer is not working with VS Code

[devguysin]

Hi,

I created an Angular2 project using angular-cli. Then I updated VS Code (version: 1.6) workspace setting file to:

{
        "tslint.rulesDirectory": "./node_modules/codelyzer",
        "typescript.tsdk": "./node_modules/typescript/lib"
}

I also intentionally created a Codelyzer error, and run "ng lint" ang got the following error:

src/app/app.component.ts[8, 14]: The name of the class AppComponen should end with the suffix Component (https://goo.gl/5X1TE7)

However, VS Code does not mark AppComponen with a red underline.

Can someone please explain what I should do to make VS Code detect Codelyzer errors?

[mgechev]

Most likely it is misconfiguration. Make sure the directories you are pointing to in VSCode's settings exist. Do you get tslint errors in VSCode by following the instructions for the custom setup?

[devguysin]

Folders exist. When I run the following:

C:\Angular2-app>node_modules.bin\tslint -c tslint.json C:\Angular2-app\src\app\app.component.ts

I get:

C:/Angular2-app/src/app/app.component.ts[8, 14]: The name of the class AppComponen should end with the suffix Component (https://goo.gl/5X1TE7)

To create this folder I only installed angular-cli and then ran "ng new Angular2-app", so if there is a misconfiguration in the folder, it is probably angular-cli bug.

Here is a link to the created folder (I removed the nodes packages, since they take +200MB).

I would really appreciate it if you can help me troubleshoot this problem.

[mgechev]

Do you get tslint errors in VSCode by following the instructions for the custom setup?

Would you verify that?

[devguysin]

I installed tslint extensions for VSCode. I get green underline with the error above, prefixed with [tslint].

I ran the following command:

C:\Angular2-app>npm i codelyzer tslint typescript @angular/[email protected] @angular/[email protected] [email protected] [email protected]

This is the output I got:

[email protected] C:\Angular2-app
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- [email protected]
| -- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] -- zone.[email protected] invalid

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

I then ran:

C:\Angular2-app>node_modules\.bin\tslint -c tslint.json C:\Angular2-app\node_modules\component.ts

And the output was:

C:/Angular2-app/node_modules/component.ts[15, 2]: file should end with a newline
C:/Angular2-app/node_modules/component.ts[4, 13]: The selector of the component "Codelyzer" should have prefix "app" (https://goo.gl/cix8BY)
C:/Angular2-app/node_modules/component.ts[4, 13]: The selector of the component "Codelyzer" should be named kebab-case (https://goo.gl/mBg67Z)
C:/Angular2-app/node_modules/component.ts[3, 1]: Implement lifecycle hook interfaces (https://goo.gl/w1Nwk3)
C:/Angular2-app/node_modules/component.ts[9, 7]: The name of the class Codelyzer should end with the suffix Component (https://goo.gl/5X1TE7)

But VSCode still does not mark errors.

[devguysin]

ok, when I put component.ts in C:\Angular2-app\src VSCode did show the errors.
But it only works if I have tslint extension installed. Is having this extension installed a requirement?

[mgechev]

Oh, sorry I have forgotten to mentioned this as a requirement 😞 .

Yes, in order to make the tool as portable as possible we reuse the error reporting mechanism of tslint. Maybe at some point we'll abstract it to allow ESLint plugin support too but it wasn't necessary at this point.

[devguysin]

OK, thanks. I suggest documenting that to avoid similar questions from newcomers.

BTW after I installed tslint, it also works even if I delete the rules configuration from user/workspace setting file, I mean the following line:

{
        "tslint.rulesDirectory": "./node_modules/codelyzer",
}