Skip to content

[no-unsafe-*] rules are triggered on members imported from Vue component modules #2865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
3 tasks done
6XGate opened this issue Dec 10, 2020 · 6 comments
Closed
3 tasks done

[no-unsafe-*] rules are triggered on members imported from Vue component modules #2865

6XGate opened this issue Dec 10, 2020 · 6 comments
Labels
package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin wontfix This will not be worked on

Comments

@6XGate
Copy link

6XGate commented Dec 10, 2020

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.
  • I have read the FAQ and my problem is not listed.

Repro

https://github.com/6XGate/VueTypeSciprtLinting/tree/main/src/page/home/parts

In this example project, WebPack cannot compile the project with ESLint enabled due to many of the [no-unsafe-*] rules. Disabling it allows it to compile just fine. You can change some of the calls or properties accessed on the Vue components to something that does not exist, and TypeScript will not allow you to compile the project demonstrating that it knows the type information.

ESLint config: in repo
TS config: in repo
index.ts: in repo
HomePage component: in repo
Counter component: in repo

Expected Result

This project should compile without any problems and not have any safety holes as detected by these rules.

Actual Result

The project will display errors related to the various [no-unsafe-*] rules.

 ERROR  Failed to compile with 2 errors                                                                                                                            9:34:51 AM

 error  in ./src/index.ts

Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
/home/matthew/Projects/VueTypeSciprtLinting/src/index.ts:6:15: Unsafe assignment of an any value. [Error/@typescript-eslint/no-unsafe-assignment]
/home/matthew/Projects/VueTypeSciprtLinting/src/index.ts:6:22: Unsafe construction of an any type value. [Error/@typescript-eslint/no-unsafe-call]
/home/matthew/Projects/VueTypeSciprtLinting/src/index.ts:8:9: Unsafe member access .$mount on an any value. [Error/@typescript-eslint/no-unsafe-member-access]
/home/matthew/Projects/VueTypeSciprtLinting/src/index.ts:8:9: Unsafe call of an any typed value. [Error/@typescript-eslint/no-unsafe-call]

4 problems

 @ multi ./src/index.ts ./src/index.scss

 error  in ./src/page/home/HomePage.vue

Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
/home/matthew/Projects/VueTypeSciprtLinting/src/page/home/HomePage.vue:18:19: Unsafe assignment of an any value. [Error/@typescript-eslint/no-unsafe-assignment]
/home/matthew/Projects/VueTypeSciprtLinting/src/page/home/HomePage.vue:25:7: Unsafe member access .inc on an any value. [Error/@typescript-eslint/no-unsafe-member-access]
/home/matthew/Projects/VueTypeSciprtLinting/src/page/home/HomePage.vue:25:7: Unsafe call of an any typed value. [Error/@typescript-eslint/no-unsafe-call]

3 problems

As far as I can tell, ESLint did not throw any exceptions.

Versions

package version
@typescript-eslint/eslint-plugin 4.9.1
@typescript-eslint/parser 4.9.1
TypeScript 4.1.2
ESLint 7.15.0
node 12.19.0
@6XGate 6XGate added package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin triage Waiting for team members to take a look labels Dec 10, 2020
@bradzacher
Copy link
Member

This is expected.

We are built on top of TypeScript, and TypeScript does not support Vue syntax.

But why does your webpack build work? Because your webpack build doesn't use pure typescript, just like your IDE doesn't use pure typescript.

Both make heavy modifications to TS so that it can understand Vue syntax.

Unfortunately we simply cannot provide type information for imported Vue files (if they use vue's template syntax).

The Vue eslint parser will do its magic and let you use type aware lint rules within Vue template files, but that does not help when they are imported.

@bradzacher bradzacher added awaiting response Issues waiting for a reply from the OP or another party and removed triage Waiting for team members to take a look labels Dec 10, 2020
@6XGate
Copy link
Author

6XGate commented Dec 10, 2020

Would this be something to bring up with their team to see if anything can be done to make the TypeScript parse work?

@bradzacher
Copy link
Member

There's just not been a whole lot of interest from the Vue community to support Vue in linting (nobody wants to [/ has the time to] champion it)

There are also issues due to lack of features from typescript (no compiler plugins means it's hard to build support).

@yoyo930021 has been pitching in when able, and might have some additional insight.

@yoyo930021
Copy link
Contributor

I will take a look.

Vue team have a ts plugin for inject typescript.
It can help to make TypeScript parse work.
https://github.com/znck/vue-developer-experience

I'll talk to the Vue team.
If we can improve the typescript-eslint with vue situation.

@6XGate
Copy link
Author

6XGate commented Dec 11, 2020

That would be great.

@bradzacher
Copy link
Member

CLosing this as there's nothing we can action.

@bradzacher bradzacher added wontfix This will not be worked on and removed awaiting response Issues waiting for a reply from the OP or another party labels Feb 18, 2021
@yoyo930021 yoyo930021 mentioned this issue Mar 5, 2021
Open
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
package: eslint-plugin Issues related to @typescript-eslint/eslint-plugin wontfix This will not be worked on
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@6XGate @bradzacher @yoyo930021