Vue-cli: Typed TSLint rules can fail on .vue snippets

Created on 7 Nov 2018  路  4Comments  路  Source: vuejs/vue-cli

Version

3.1.1

Reproduction link

https://github.com/millimoose/vue-tslint-microsoft-contrib-bug

Node and OS info

Node 9.7.1 / npm 6.4.1

Steps to reproduce

  1. Clone and npm install in that repro
  2. npm run lint --no-fix

What is expected?

Typed TSLint rules should only be run on files that have a corresponding entry in the backing TypeScript program. Some operations run on nodes in the files by TSLint rules query the program for type information only available on those files.

What is actually happening?

The Vue CLI is patching the program's getSourceFile to return a manually created file from ts.createSourceFile for Vue files (per isVueFile). https://github.com/vuejs/vue-cli/blob/f8a0a6372fec324171c6f19baf0a77c6869e7d80/packages/%40vue/cli-plugin-typescript/lib/tslint.js#L60

Untyped rules will work fine with this, but some typed rules will throw. For example, no-unsafe-any crashes: https://github.com/palantir/tslint/issues/4273


Related TypeScript issue: https://github.com/Microsoft/TypeScript/issues/8136

This is a more general case of #2712 as originally reported by @millimoose. The bug investigation trail went from there to TSLint to TypeScript and back to here, amusingly.

bug typescript

Most helpful comment

I'm getting a crash on the "deprecation" rule:

The 'deprecation' rule threw an error in '/Users/shauncutts/src/factfiber/vue-grid-scroller/src/views/Home.vue':
TypeError: Cannot read property 'members' of undefined
    at resolveNameHelper (/Users/shauncutts/src/factfiber/vue-grid-scroller/node_modules/typescript/lib/typescript.js:32099:70)
 ```
I think related? .... Is there a work-around for this? I tried to ignore deprecation but no change (in vue.config.js):
```js
    config.plugin('fork-ts-checker')
      .tap(args => {
        args.ignoreLints = ['deprecation']
        return args
      })

All 4 comments

I notice that running vue-cli-service serve will lint correctly.
After digging deeper it seems the linting is done via fork-ts-checker-webpack-plugin.
Its underlying implementation for typecheck and linting is done via IncrementalChecker.
The vue related part is VueProgram.
The most notable difference I observed is VueProgram overrides resolveModuleNames but vue-cli does't.

I tried to adapt similar strategies demonstrated in fork-ts-checker-webpack-plugin.
But encounter an issue that auto fix will be broken for vue files.
https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/191

I'm getting a crash on the "deprecation" rule:

The 'deprecation' rule threw an error in '/Users/shauncutts/src/factfiber/vue-grid-scroller/src/views/Home.vue':
TypeError: Cannot read property 'members' of undefined
    at resolveNameHelper (/Users/shauncutts/src/factfiber/vue-grid-scroller/node_modules/typescript/lib/typescript.js:32099:70)
 ```
I think related? .... Is there a work-around for this? I tried to ignore deprecation but no change (in vue.config.js):
```js
    config.plugin('fork-ts-checker')
      .tap(args => {
        args.ignoreLints = ['deprecation']
        return args
      })

Now that TSLint is officially deprecated, TSLint support will be fully dropped in the next major version; as for the current major version, no more bug fixes or features will be implemented except for security reasons. So I'm closing this issue now.

Was this page helpful?
0 / 5 - 0 ratings