VTI feedback thread

[octref]

VTI (Vetur Terminal Interface) is available since 0.23.0.

Docs: https://vuejs.github.io/vetur/vti.html

Usage:

npm i -g vti
# run this in the root of a Vue project
vti
vti diagnostics

It's not very well tested. I don't have the bandwidth to test it in real world projects.

Formatting can be done, but I'm not sure what config to prefer.

Anyway, this surfaces Vetur's interpolation service's errors onto CLI. When this becomes stable enough, it can help people catch errors currently uncatchable by Vue's compiler or Webpack.

If you have bug with repro cases, open new issues.

[cexbrayat]

@octref Thank you for taking the time to do this!

It looks like it also goes through node_modules resulting in false positive for a Vue CLI project that uses the router.

Repro:

npx -p @vue/cli@next vue create vetur-router --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false}, "@vue/cli-plugin-router": {}}}'
cd vetur-router
vti diagnostics

Throws:

Error: Debug Failure. Expected 3 === 1. Registered script kind should match new script kind. /Users/ced-pro/Code/test/vue-cli-tests/vetur-router/node_modules/@vue/cli-plugin-router/generator/template/src/views/About.vue.template
    at Object.assertEqual (/usr/local/lib/node_modules/vti/node_modules/typescript/lib/typescript.js:2109:17)
    at getOrCreateSourceFileByPath (/usr/local/lib/node_modules/vti/node_modules/typescript/lib/typescript.js:131217:34)

PS: let me know if you want a dedicated issue

[octref]

@cexbrayat I can repro it. Opened #1639. For bugs please use new issue.

[goldingdamien]

How can this be used on a whole Vue project? Or a Nuxt project?

[goldingdamien]

"any" error with text "Property '...' does not exist on type 'object'.Vetur(2339)" not being outputted. Please check.

[octref]

@goldingdamien If you have bugs, please make a repro case and open a new issue.

[mesqueeb]

@octref Will it be possible to catch type errors for the props of another component?

Eg. something like:

<template>
  <MyComponent date="2019" />
</template>

MyComponent.date must be a valid Date object

So to have VTI check the type of the prop of the underlying component which are defined like so:

props: {
  date: Object as PropType<Date>
}

[yoyo930021]

@octref Will it be possible to catch type errors for the props of another component?

Eg. something like:

<template>
  <MyComponent date="2019" />
</template>

MyComponent.date must be a valid Date object

So to have VTI check the type of the prop of the underlying component which are defined like so:

props: {
  date: Object as PropType<Date>
}

#1596

[shameleo]

Is VTI already supposed to work with Vue 3? I've not been able to get any relevant result. Here is my setup (look readme): https://github.com/shameleo/vue-next-test/tree/f1ed6946ec92b6678cb835465db86926bda06775

[jackkoppa]

Thanks so much for doing this, @octref. This is going to be huge for us when it's stable.

I'm currently seeing the same issue that @ktsn has opened here: #1699
Both on our production apps - which are a similar size to what they mention (100+ .vue, 50+ .ts) - and also on this much smaller app, with only 8 files under test.

I'll try to open a simplified, reliable repro rep

EDIT: created repro case here, though I suspect the breaking point, file-count-wise, may be machine-specific. If anyone on this thread has a few minutes to try the README steps below & let me know if they see similar behavior, that'd be much appreciated

git clone https://github.com/jackkoppa/vti-failures-1699.git
cd vti-failures-1699
npm ci
npm run vti

# fails

# Now, change one of the ComplexComponent files from .vue -> .txt
# thus removing it from vti observation, and run vti again
mv src/components/ComplexComponent4.vue src/components/ComplexComponent4.txt
npm run vti

# succeeds

# Finally, if you *still* see a failure message, we can try one more thing:
git checkout -- .
git clean -df
# Branch w/ even fewer vti-checked files
git checkout minimal-file-count-for-additional-testing
npm run vti

[harvey-woo]

In my case, vti stop when invoke clientConnection.sendRequest('$/getDiagnostics') without any error

[yoyo930021]

In my case, vti stop when invoke clientConnection.sendRequest('$/getDiagnostics') without any error

#1805 will fix.

[rfox12]

After spending very many hours on "my utlimate Vue setup" I've found that JS/TS errors in the template is really the missing ingredient for me. I want to see error 2339 when a developer references an attribute that does not exist! I think VTI may be the key. Thanks for all the hard work on this (and Vetur).

Two quick questions:

1. Is the plan to also incorporate this into the "Problems" area of VSCode--that would be nice.
2. I haven't really used much Typescript in the template section, but will vti be equally good at handling TS and JS format?

[octref]

Is the plan to also incorporate this into the "Problems" area of VSCode--that would be nice.

You can turn it on with vetur.experimental.templateInterpolationService.

I haven't really used much Typescript in the template section, but will vti be equally good at handling TS and JS format?

I don't think you can use TS in template interpolations without extra setup.

[vegerot]

This is related to my question on #2036.

I have code in a template tag like <div v-if=foo.bar.baz>, and Vetur gives this error in the editor:

Object is possibly 'null'.Vetur(2531)

However, when I run vti diagnostics I just get

(node:43211) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:43211 Warning: Accessing non-existent property ''column' of module exports inside circular dependency
node:43211)( Warning: Accessing non-existent property filename'' of module exports inside circular dependency
node:43211)( Warning: Accessing non-existent property lineno'' of module exports inside circular dependency
(node:43211 Warning: Accessing non-existent property ''column' of module exports inside circular dependency
node:43211)( Warning: Accessing non-existent property filename'' of module exports inside circular dependency
Loaded bundled typescript@3.9.6.
Vetur initialized

and do not see this error. How would I specifically get Vetur(2531) from either ESLint, vti, or some other method on the CLI?

[andrewisaburden]

vue-cli seems to use codeframe for formatting ESLint errors by default. VTI could use the same.

What kind of use-cases do you have in mind for VTI? I think it would be very useful along with a lint step in CI/build pipelines, for example.

The docs here don't seem to quite contain enough information for me to easily figure out how to run a debugger on VLS when running vti diagnostics. It could be useful to explain a little more somewhere.

I have some ideas for minor improvements and contributions. Is creating an issue the best way to propose changes?

[octref]

@andrewisaburden I use console.log to debug VTI. I haven't looked into how to set it up with a debugger. Opening new issues is definitely the best way to propose changes.

[P4sca1]

Thanks for making vti, it is very helpful!
It would be even more helpful, if line numbers could be shown for each error.

[lzxb]

Me too.

[yoyo930021]

@P4sca1 @lzxb
Follow #2449

[soerenmartius]

At the moment it seems that the vti diagnostics command only accepts directories as an argument?
E.g., running vti diagnostics src/components/ will check all .vue inside the src/components directory. Passing a single file as an argument results in an ENOTDIR exception. It would be helpful to pass single files or a list of single files also use vti with pre-commit hooks also.

[yoyo930021]

At the moment it seems that the vti diagnostics command only accepts directories as an argument?
E.g., running vti diagnostics src/components/ will check all .vue inside the src/components directory. Passing a single file as an argument results in an ENOTDIR exception. It would be helpful to pass single files or a list of single files also use vti with pre-commit hooks also.

You can open a new issue on it. ^_^

[soerenmartius]

At the moment it seems that the vti diagnostics command only accepts directories as an argument?
E.g., running vti diagnostics src/components/ will check all .vue inside the src/components directory. Passing a single file as an argument results in an ENOTDIR exception. It would be helpful to pass single files or a list of single files also use vti with pre-commit hooks also.

You can open a new issue on it. ^_^

Sure

[bertvanbrakel]

Very cool tool. I'm wondering if it would be possible to accept a flag to only show errors on failure. and otherwise just be silent? I'd liked to incorporate this into my npm build (as a pre-commit hook using 'shared-git-hhok') and currently it spams the console.

Maybe a flat '--errors-only' or '--log-level DEBUG/INFO/WARN/ERROR ? The latter allowing more room for printing diagnostics if required.

Many thanks for building this tool

[andrewisaburden]

@bertvanbrakel I think this will be solved with #2451

[Spaubleit]

When I use VTI with css modules I always get same errors:

Error: Property '$style' does not exist on type 'CombinedVueInstance<...>
  1 | <template>
> 2 |   <div :class="['main', $style.event]">
    |                         ^^^^^^

[ChristianBirkl]

We've enabled it in a medium sized project (currently 300+ .vue files) and I can't live without it!

That said - some features i'd like to see:

• Be able to exclude specific files (e.g. !glob filters on the command line or something vti.config.json file)
• Specify warn as error (I can't seem to find any switch to set warn to error (e.g. missing props)
• I've tried to integrate it in the vite rollup chain in order to get validation errors in the browser - but $/getDiagnostics seems to cache the file - any chance to invalidate the cached version?

[Juice10]

I'm using vue 2 and have a mix of typescript and non-typescript components. I'd love to be able to tell vti to ignore my plain javascript components and just run diagnostics for my typescript components.
Otherwise it spits out reams of errors like these:

Error: Property 'isLoading' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.
  261 |     <PlayerDebugger
  262 |       v-if="showDebugger"
> 263 |       :is-loading="isLoading"
      |                    ^^^^^^^^^
  264 |       :is-playing="isPlaying"
  265 |       :video-id="video.id"
  266 |       :current-action-id="currentActionId"

[owlyowl]

When using syntax in my template like so:

<state v-else-if="viewState !== 'empty'"
                @retry="loadAgain()"
                :state="viewState"
                contentType="cats">

I'm getting errors that content-type hasn't been supplied in type when it is clearly defined here in the component and is supplied?
Is it something to do with kebab vs camel case support in these early days of vti?

It works with kebab case e.g. content-type

export default class State extends Vue {
    @Prop() public state!: ViewState;
    @Prop() public contentType!: 'cats' | 'fish';
    @Prop() public productId?: string | undefined;

Error: Property ''content-type'' is missing in type '{ "product-id":
string; "top-border": false; state: string; contenttype: string; }'
but required in type '{ [other: string]: any; state: any;
'content-type': any; 'product-id': any; 'top-border'?: any; }'.

[snake-py]

Hey pretty cool package, I have trouble to set it up correctly, if anyone could perhaps provide some guidance.

I have installed it globally, now in vscode I have enabled template interpolation. Now I am going into a file without any type errors and copy the relative path. When I am running now:

vti diagnostics -l ERROR  . src/components/widgets/compopnenWithoutErrors.vue

I am getting something like this:

Error: 'this' implicitly has type 'any' because it does not have a type annotation.
  118 |           </button>
  119 |           <button v-else type="button" class="btn btn-secondary" v-on:click="stopIdle()">
> 120 |             {{ $t('notification.modal.button.close.on.fallback') }}
      |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 121 |           </button>
      | ^^^^^^^^^^^^^^^^^^^
> 122 |         </div>

SO it is basically showing me that there are errors, but if I check manually I do not see any error.

or like this in a component which does not even get any props

Error: Subsequent property declarations must have the same type.  Property 'props' must be of type '{ [other: string]: any; 'available-products': any; 'loading-products': any; 'session-state': any; 'default-addons': any[]; }', but here has type '{ [other: string]: any; 'available-products': any; 'loading-products': any; 'default-addons': any; 'recommended-products': any; }'.
> 1 | <template>

[Weeb6279]

I don't know if vti is still relevant but from my experience its setup is too hard to be worth it.

'this' implicitly has type 'any' because it does not have a type annotation.
Cannot find name '__vlsComponentData'.
Cannot find name '__vlsComponentHelper'.

This are issues that every single user would face but it is not documented how to resolve them. So vetur is useless as its just highlighting every single line in vue files.

[snake-py]

@Popeye4242 I essentially gave up on the issue as well.

[kije]

I've ran in to an issue with the following code, where vti doesn't seem to pick up the correct type for processingProgress (should allow null, but VTI insists that it only can be number | undefined)

Error: Type 'number | null' is not assignable to type 'number | undefined'.
  Type 'null' is not assignable to type 'number | undefined'.
  4 |       <DropZone
  5 |         :processing="importProgress !== null || isLoading"
> 6 |         :processingProgress="importProgress"
    |          ^^^^^^^^^^^^^^^^^^
  7 |         :limit="1"
  8 |         :error.sync="dropzoneError"

  private get importProgress(): number | null {
    const uploadRange = 85;

    if (this.uploadProgress === null) {
      return null;
    }

    return (uploadRange / 100) * this.uploadProgress;
  }

DropZone.vue:

@Component({
  components: { ProgressBar, WithDragAndDrop, LoadingIndicator },
})
export default class DropZone extends Vue {
  // ... other props

  @Prop({ default: null, type: Number, required: false })
  private readonly processingProgress: number | null;