vuedx / languagetools Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 29.0 31.49 MB

A collection of tools for better IDE experience.

Home Page: https://vuedx.com

License: MIT License

JavaScript 4.68% TypeScript 94.64% Vue 0.18% Shell 0.01% EJS 0.50%

languagetools's People

Contributors

Stargazers

Watchers

languagetools's Issues

Generate changelog for weekly releases

Generate and inject changelog in readme.md file.

Question: can @vuedx/typecheck be used as tsc with vue support?

see https://github.com/vitejs/create-vite-app/pull/17/files#diff-226f2590d9b4e5717134aee8d0aa266f1e32c9d59c5928a32f1336d7204dc444R6-R13

We can use tsc --noEmit if there has no .vue file.

Can @vuedx/typecheck be used as tsc --noEmit?

VSCode release

Even though this plugin is still experimental, would it be a good idea to put this on the VSCode marketplace? Obviously making sure to clearly advertise the current status of this project

@vuedx/typecheck: commetns in template

Adding a comment in a template breaks the typechecking:

<div>
  <!-- comment -->
  <div v-for="user in users" :key="user">{{ user }}</div>
</div>

Throws:

./src/App.vue
=============
=> ./src/App.vue:4:17
Error :: Parameter declaration expected. (code 1138)
   2 |   <div>
   3 |     <!-- comment -->
   4 |     <div v-for="user in users" :key="user">{{ user }}</div>
     |                 ^
   5 |   </div>
   6 | </template>

=> ./src/App.vue:4:6
Error :: '}' expected. (code 1005)
   2 |   <div>
   3 |     <!-- comment -->
   4 |     <div v-for="user in users" :key="user">{{ user }}</div>
     |      ^^
   5 |   </div>
   6 | </template>

=> ./src/App.vue:4:6
Error :: Unexpected token. Did you mean `{'>'}` or `&gt;`? (code 1382)
   2 |   <div>
   3 |     <!-- comment -->
   4 |     <div v-for="user in users" :key="user">{{ user }}</div>
     |      ^
   5 |   </div>
   6 | </template>

=> ./src/App.vue:4:6
Error :: Expression expected. (code 1109)
   2 |   <div>
   3 |     <!-- comment -->
   4 |     <div v-for="user in users" :key="user">{{ user }}</div>
     |      ^^^^^^
   5 |   </div>
   6 | </template>

Repro: cexbrayat/template-typechecking#5

TS Server fatal error: Cannot read property 'getProjectVersion' of undefined

TypeScript Version: 3.9.2-insiders.20200509
Steps to reproduce crash
1.
2.
3.
TS Server Error Stack

TypeError: Cannot read property 'getProjectVersion' of undefined
    at synchronizeHostData (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:138623:22)
    at Proxy.getProgram (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:138806:13)
    at VueLanguageServer.getProgram (/Users/znck/.vscode-insiders/extensions/znck.vue-language-features-0.0.7/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js:58320:38)
    at Object.proxy.<computed> [as getProgram] (/Users/znck/.vscode-insiders/extensions/znck.vue-language-features-0.0.7/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js:58682:54)
    at ConfiguredProject.Project.updateGraphWorker (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:143298:53)
    at ConfiguredProject.Project.updateGraph (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:143241:42)
    at ConfiguredProject.updateGraph (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:144035:63)
    at updateProjectIfDirty (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:144505:45)
    at Array.forEach (<anonymous>)
    at ProjectService.assignProjectToOpenedScriptInfo (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:146617:41)
    at /Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:146886:97
    at Object.flatMap (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:465:25)
    at ProjectService.applyChangesInOpenFiles (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:146886:41)
    at Session.handlers.ts.createMapFromTemplate._a.<computed> (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:147749:46)
    at /Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:149512:88
    at IOSession.Session.executeWithRequestId (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:149503:28)
    at IOSession.Session.executeCommand (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:149512:33)
    at IOSession.Session.onMessage (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:149536:35)
    at Interface.<anonymous> (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js:150852:27)
    at Interface.emit (events.js:203:13)
    at Interface._onLine (readline.js:316:10)
    at Interface._normalWrite (readline.js:461:12)
    at Socket.ondata (readline.js:172:10)
    at Socket.emit (events.js:203:13)
    at addChunk (_stream_readable.js:295:12)
    at readableAddChunk (_stream_readable.js:276:11)
    at Socket.Readable.push (_stream_readable.js:210:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:166:17)

TypeScript Completion Issues

Auto import prompt shows the wrong name for .vue files.

e.g.
Completion at cursor should include suggestions from _ctx. and scope namespace (v-for/v-slot).

Importing vue files doesn't auto-complete or show the file

There's no code completion for the file, only when the path is fully set

import App from './App.vue' // has definitions
import App from './Ap // no auto-complete

New added files do not work

when you create a new .vue file you don't get completion or hover information

virtual files are correct, but it just doesn't get the info

@vuedx/typecheck: v-if fails if inside an element

Using 0.3.1-insiders-1606311019.0

<img alt="Vue logo" src="./assets/logo.png" v-if="msg">

compiles fine, but:

<div>
  <img alt="Vue logo" src="./assets/logo.png" v-if="msg">
</div>

throws:

=> ./src/App.vue:3:55
Error :: Property assignment expected. (code 1136)
   1 | <template>
   2 |   <div>
   3 |     <img alt="Vue logo" src="./assets/logo.png" v-if="msg">
     |                                                       ^
   4 |   </div>
   5 |   <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

=> ./src/App.vue:4:5
Error :: Unexpected token. Did you mean `{'}'}` or `&rbrace;`? (code 1381)
   2 |   <div>
   3 |     <img alt="Vue logo" src="./assets/logo.png" v-if="msg">
   4 |   </div>
     |     ^
   5 |   <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
   6 | </template>

=> ./src/App.vue:3:55
Error :: This expression is not callable.
      -> Type '{}' has no call signatures. (code 2349)
   1 | <template>
   2 |   <div>
   3 |     <img alt="Vue logo" src="./assets/logo.png" v-if="msg">
     |                                                       ^
   4 |   </div>
   5 |   <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

repro: cexbrayat/template-typechecking#6

npm install @vuedx/typescript-plugin-vue failed

It seems that the dependency @vuedx/[email protected] is not published

Enable code formatting for vue files

Format the code with CTRL+SHIFT+F (or MaxOS equivalent)

Support global components

first party global components (e.g. Transition from vue or RouterLink from 'vue-router`)
third party global components (e.g. vuetify, use vuejs/vetur#2378)
local global components

Can't refactor/rename "text" in <div v-for="{ text } in headers" :key="text" />

I have the following line:

<TableHeader v-for="{ text } in headers" v-text="text" :key="text" />
<!--                  ~~~~                                               -->
<!-- Property 'text' does not exist on type '{ name: string; }'.Vetur(2339) -->

I noticed that I was getting a Vetur error that "text" does not exist on type {name: string} (which is correct). I also noticed that I'm using the "text" variable in v-text and :key. So I thought - let's F2 rename the v-for var text to name

What I expected to happen:
I wanted to change all occurences of the non-existent property "text" into the correct property "name".
If I press F2 while my cursor is in middle of {text} (eg. {te|xt}), if I type in an a new name and press enter, VueDX is gonna rename it in v-for, v-text and :key to name, and then I'm not gonna have the "property does not exist in type X" error

What actually happened:
{text} was renamed to {name}, but v-text="text" and :key="text" did not change.

Things to consider:
There are two things the user may want to do here. First is my case, where I just want to find and replace all occurrences, but the user may also prefer to destructure rename an existing property

<!-- | -> cursor position when pressing F2 -->

<div v-for="{na|me} in headers" :key="name" v-text="name"/> <!-- rename to nameOfPet and press enter -->
<!-- What the user may want instead -->
<div v-for="{name: nameOfPet} :key="nameOfPet" v-text="nameOfPet"/>

<!-- What I'm expecting to happen here -->
<div v-for="{nameOfPet} :key="nameOfPet" v-text="nameOfPet"/>

Perhaps there should be some custom logic here like "if the user is refactoring a property name that is causing an error, replace everywhere". But if refactoring a property name that exists, destructure instead

Repro https://gist.github.com/3nuc/031b75f6a1e3cf2880be83d50ef99cac

@vuedx/typecheck: Element is missing end tag

With the latest insiders release 0.3.1-insiders-1606101276.0, a simple template with elements like img and br throws: Error :: Element is missing end tag. (code 50024)

Repro: cexbrayat/template-typechecking#4

Throws:

./src/components/HelloWorld.vue
===============================
=> ./src/components/HelloWorld.vue:5:76
Error :: Element is missing end tag. (code 50024)
   3 |     <h1>{{ msg }}</h1>
   4 |     <p>
   5 |       For a guide and recipes on how to configure / customize this project,<br>
     |                                                                            ^
   6 |       check out the
   7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.


./src/App.vue
=============
=> ./src/App.vue:2:3
Error :: Element is missing end tag. (code 50024)
   1 | <template>
   2 |   <img alt="Vue logo" src="./assets/logo.png">
     |   ^
   3 |   <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
   4 | </template>

How do I check by saving in the vscode?

now I run the Typecheck command manually every time.

vue script type doesn't update to typescript after added lang='ts'

If you add lang="ts" to the script you need to reload for it to be typescript file.

What is the current status of this project?

Vue's TypeScript support needs to be improved. What do we need to do now?

Auto complete on the template is not working

The info works but not auto-complete, either for attributes or for expressions

Support Vue 2.x

Template warn "__completionsTag' is declared but its value is never read."

Launch TS server for .vue file

The TS language server (from the typescript-language-features extension) starts only when a JavaScript or TypeScript file is opened.

We want similar behaviour for .vue files.

Support builtin global components

vue/dist/vue has no exported member 'toDisplayString'.

ts-plugin error:

{
	"resource": "/Users/zhaojinxiang/yfd/vue-developer-experience/examples/simple/Bar.vue",
	"owner": "typescript",
	"code": "2305",
	"severity": 8,
	"message": "Module '\"../../../../../../Users/zhaojinxiang/yfd/vue-developer-experience/examples/simple/node_modules/vue/dist/vue\"' has no exported member 'toDisplayString'.",
	"source": "ts-plugin",
	"startLineNumber": 1,
	"startColumn": 1,
	"endLineNumber": 1,
	"endColumn": 2
}

@yyx990803 Should we export toDisplayString in node_modules/@vue/runtime-core/dist/runtime-core.d.ts?

typecheck: v-if and undefined

Using @vuedx/typecheck version 0.2.4-0, a false warning is emitted when using a prop in a v-if:

<template>
  <div v-if="user">
    <h1>{{ user.name }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { UserModel } from '@/user.model';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    user: Object as PropType<UserModel>,
  },
});
</script>

UserModel is defined as:

export interface UserModel {
  name: string;
}

Running typecheck on this applciation throws:

Loading plugin from /vue-cli-tests/template-typechecking/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js
./src/components/HelloWorld.vue
===============================
=> ./src/components/HelloWorld.vue:2:14
Error :: Object is possibly 'undefined'. (code 2532)
   1 | <template>
   2 |   <div  v-if="user">
     |                      ^^^^
   3 |     <h1>{{ user.name }}</h1>
   4 |   </div>

Weirdly, removing the v-if removes all errors, whereas you would expect the warning to start showing up if there is no v-if, as user.name can effectively be a problem if user is undefined.

You can check out cexbrayat/template-typechecking#2 for a quicker repro

@vuedx/typecheck v-slot typings

When using v-slot, for example with RouterView, vudex-typecheck throws:

=> ./src/App.vue:4:27
Error :: Binding element 'Component' implicitly has an 'any' type. (code 7031)
   2 |   <Navbar />
   3 |   <div class="container" style="margin-top: 70px">
   4 |     <RouterView v-slot="{ Component }">

This obvious fix is to disable noImplicitAny, but I was wondering if it was possible to do better?

Support v-if/v-else/v-else-if directive type checking

Questions about using vuedx-typecheck as tsc

vuedx-typecheck should exit with non-zero exit code if it has type errors
vuedx-typecheck should print output same as tsc

Support `v-if` directive

<template>
<div v-if="true">
</div>
</template>
<script>
export default {
  
}
</script>

render vue

import _Ctx from './Edit.vue?internal'

export function render(_ctx: InstanceType<typeof _Ctx>) {
  return /*@@vue:start*/<div __directive_if_0={[true,]}></div>/*@@vue:end*/
}

(ts-plugin) False-positive error. Something about jsx

I don't use jsx or have any references to jsx in my project. In a valid template tag I get this error:

<template>
  <v-autocomplete
    :hide-details="hideDetails"
    type="text"
    filled
    background-color="stone"
    :value="value"
    :items="items"
    :multiple="multiple"
    v-bind="$attrs"
    :menu-props="{ auto: true, ...menuProps }"
    class="styled-autocomplete"
    v-on="$listeners"
    @input="$emit('input', $event)"
    @change="$emit('change', $event)"
    @blur="$emit('blur', $event)"
  >
    <template
      v-if="multiple && selectAll && !$scopedSlots['prepend-item']"
      #prepend-item
    >
      <v-list-item
        ripple
        @click="toggleAllSelected"
      >
        <v-list-item-action>
          <v-icon :color="items.length > 0 ? 'indigo' : 'unset'">
            {{ selectedIcon }}
          </v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>
            Select All
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template>
    <template
      v-for="(_, slot) of $scopedSlots"
      #[slot]="scope"
    >
      <slot
        :name="slot"
        v-bind="scope"
      />
    </template>
  </v-autocomplete>
</template>

As you can see, the error starts in the middle of the class name and extends to nearly the start of the closing tag.

Don't know if it's related, but when I hover some listeners, I get seemingly incorrect signature lookup

Typechecking: Configuration does not load on Windows

After debugging, I noticed that the TS server returns the path to the config in the posix format:

tsConfig  = "C:/Users/kozac/Dev/vite-electron-boilerplate/tsconfig.json"

https://github.com/znck/vue-developer-experience/blob/a6e9ad052529b2c514dc89d6f609e9a0849689b7/packages/typecheck/src/index.ts#L106-L110

While the path to the root directory corresponds to the system (in my case - Windows)

directory = "C:\Users\kozac\Dev\vite-electron-boilerplate"

Because of this, condition is false:
https://github.com/znck/vue-developer-experience/blob/a6e9ad052529b2c514dc89d6f609e9a0849689b7/packages/typecheck/src/index.ts#L117

Vue DX prefers renaming globally over destructuring rename

export default defineComponent({
  setup() {
    const {
      params: { id },
    } = useRoute();
   //renaming "{data, ...}" into "employeeData" with F2 turns it into "{employeeData, ...}" instead of "{data: employeeData, ..."
   //and also renames all usages of "data" in useRequest in the whole repo into employeeData
    const { data, isLoading: isEmployeeLoading, VkLoader } = useRequest(
      getSingleEmployee(id as string)
    );

    return {
      data,
      isEmployeeLoading,
      VkLoader,
    };
  },
});

Repro one liner to download repro case and open the example file:

git clone --single-branch --branch vuedx-destructuring-naively-renames-in-workspace https://github.com/3nuc/zio.git && code zio -- zio/src/modules/employee/pages/PageSingleEmployee.vue

Clone the repo and open this file https://github.com/3nuc/zio/blob/vuedx-destructuring-naively-renames-in-workspace/src/modules/employee/pages/PageSingleEmployee.vue
On line 14 while your cursor is on the variable name data, press F2 and rename it to employeeData

Expected behavior:
{data, isLoading: isEmployeeLoading, VkLoader} = useRequest(...) turns into {data: employeeData, isLoading: isEmployeeLoading, VkLoader} = useRequest(...)

Actual behavior:
It's renamed to {employeeData, ...} which doesn't exist on useRequest.

It also globally changes the name of data to employeeData in 4-5 files. It's as if I was refactoring the 'data' name in useRequest itself, so Vue DX wants to rename data in all files that use useRequest. Like this:

typecheck: no such file or directory 'HelloWorld.vue_________render.tsx'

Using @vuedx/typecheck version 0.3.1-insiders-1604891675.0 I'm running into an error straight away in a bare CLI project.

Repro:

npx @vue/cli@ create vue-integration -m yarn --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false},"vue-cli-plugin-vue-next": {}}}'
yarn add --dev --exact @vuedx/typecheck@insiders
yarn typecheck

Throws:

$ /vue-cli-tests/template-typechecking/node_modules/.bin/typecheck
Loading plugin from node_modules/@vuedx/typescript-plugin-vue/dist/index.cjs.js
Loading project from tsconfig.json
./src/components/HelloWorld.vue
===============================
Unexpected error. Please report 👉 https://github.com/znck/vue-developer-experience/issues/new
Error: ENOENT: no such file or directory, open '/vue-cli-tests/template-typechecking/src/components/HelloWorld.vue_________render.tsx'
    at Object.openSync (fs.js:465:3)
    at Object.readFileSync (fs.js:368:35)
    at readFile (/vue-cli-tests/template-typechecking/node_modules/@vuedx/typecheck/bin/typecheck.js:23:31)

vue-language-features: throwing errors on commented-out lines

Type checking within <script/> block works mostly fine, however I found somehow it keeps throwing errors even when I commend out the line which contains an error.

Add docs for start this project and debug extensions.

I will be very happy if there is guidance for participating in the project.

fails due to invalid paths on windows

TS Plugin returns lower cased drive letters (https://github.com/znck/vue-developer-experience/runs/1331814456?check_suite_focus=true)
Module resolution is not working in .ts/.js file (Error: Cannot find module './App.vue' or its corresponding type declarations.)

Order of <template> and <script> breaks refactoring/renaming

Possible approach: collect all edits in vue language service, sort by position in the file, rebase all edits to assuming all preceding edits have been applied.

Enable quick info on virtual files

When inspecting the virtual file would be nice to have the type on hover

@vuedx/typecheck error on component emits

Using 0.3.1-insiders-1606311019.0

Given a component that emits an event wave (properly declared with emits), than vuedx throws:

./src/App.vue
=============
=> ./src/App.vue:3:62
Error :: Type '{ msg: string; onWave: () => boolean; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Pick<Readonly<{} & { msg?: string | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "msg" | ... 9 more ... | "style">'.
      -> Property 'onWave' does not exist on type 'IntrinsicAttributes & Partial<{}> & Pick<Readonly<{} & { msg?: string | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "msg" | ... 9 more ... | "style">'. (code 2322)
   1 | <template>
   2 |   <img alt="Vue logo" src="./assets/logo.png">
   3 |   <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" @wave="waved = true"/>
     |                                                              ^^^^^^
   4 |   {{ waved }}
   5 | </template>

with HelloWorld.vue

export default defineComponent({
  name: 'HelloWorld',
  emits: {
    wave: () => true
  },
  props: {
    msg: String,
  },
  setup(props, { emit }) {
    return {
      wave: () => emit('wave')
    }
  }
});

repro: cexbrayat/template-typechecking#7

Parse and rewrite TSX diagnostics to make it familiar for <template> users

This requires examples where rewriting errors would be helpful. Please submit examples here 👇

@vuedx/typecheck: issue with latest insiders release

Trying to install "@vuedx/typecheck": "0.3.1-insiders-1605961078.0", throws:

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:../projectconfig

It looks like this commit ce90604 introduced the regression.

Open prefixIdentifiers in code transform

create file ./HelloWorld.vue:

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>
    Edit <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup: (props: { readonly msg: string }) => {
    const { msg } = props;
    const count = ref(0);
    return { msg, count };
  },
});
</script>

run ./packages/@vuedx/compiler-typescript/bin/vue-ts-render.js ./HelloWorld.vue

and it export

import { Fragment as _Fragment, toDisplayString as _toDisplayString, h as _h } from "vue"
import _Ctx from './HelloWorld.vue'


export function render(_ctx: InstanceType<typeof _Ctx>) {
  return _h(_Fragment, [
    _h("h1", {}, [_toDisplayString(_ctx.msg)]),
    _h("button", {
      onClick: $event => (count++)
    }, ["count is: ", _toDisplayString(_ctx.count)]),
    _h("p", {}, [
      " Edit ",
      _h("code", {}, ["components/HelloWorld.vue"]),
      " to test hot module replacement. "
    ])
  ])
}

it seems prefixIdentifiers is false in (count++);

Warn if <script> is not using defineComponent

If an SFC <script> block is missing defineComponent() (and there is no <script setup> block) then display a warning on export default text range.

<script>
export default {}
^^^^^^^^^^ Missing defineComponent()

This warning should be fixable, ⌘ + . shortcut in VS Code.

rename typecheck to vue-typecheck or vuedx-typecheck

The name typecheck is too common.

"bin": "bin/typecheck.js", in package @vuedx/typecheck will add node_modules/.bin/typecheck.

I think creating node_modules/.bin/vue-typecheck is better

Test suite for language server functions

Example: packages/@vuedx/typescript-plugin-vue/tests/e2e/spec/completions.spec.ts

Functions:

TS Server fatal error: Cannot read property 'fsPath' of undefined

Issue Type: Bug

TypeScript Version: 3.8.3
Steps to reproduce crash

Open a .vue file with @/ path mapping
Hover over import specifier symbol
Error
TS Server Error Stack

TypeError: Cannot read property 'fsPath' of undefined
    at /Users/znck/.vscode-insiders/extensions/znck.vue-language-features-0.0.2/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js:4114:64
    at Array.map (<anonymous>)
    at ConfiguredProject.resolveModuleNames (/Users/znck/.vscode-insiders/extensions/znck.vue-language-features-0.0.2/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js:4091:49)
    at Object.compilerHost.resolveModuleNames (tsserver.js:135192:52)
    at resolveModuleNamesWorker (tsserver.js:97713:127)
    at resolveModuleNamesReusingOldState (tsserver.js:97983:24)
    at processImportedModules (tsserver.js:99448:35)
    at findSourceFile (tsserver.js:99191:17)
    at tsserver.js:99020:85
    at getSourceFileFromReferenceWorker (tsserver.js:98987:34)
    at processSourceFile (tsserver.js:99020:13)
    at processRootFile (tsserver.js:98843:13)
    at tsserver.js:97809:60
    at Object.forEach (tsserver.js:167:30)
    at Object.createProgram (tsserver.js:97809:16)
    at synchronizeHostData (tsserver.js:135218:26)
    at Proxy.getProgram (tsserver.js:135310:13)
    at VueLanguageServer.getProgram (/Users/znck/.vscode-insiders/extensions/znck.vue-language-features-0.0.2/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js:3755:38)
    at Object.getProgram (/Users/znck/.vscode-insiders/extensions/znck.vue-language-features-0.0.2/node_modules/@vuedx/typescript-plugin-vue/dist/typescript-plugin-vue.js:4034:54)
    at ConfiguredProject.Project.updateGraphWorker (tsserver.js:139786:53)
    at ConfiguredProject.Project.updateGraph (tsserver.js:139729:42)
    at ConfiguredProject.updateGraph (tsserver.js:140654:63)
    at ProjectService.createLoadAndUpdateConfiguredProject (tsserver.js:142246:25)
    at ProjectService.assignProjectToOpenedScriptInfo (tsserver.js:143101:44)
    at tsserver.js:143396:107
    at Object.mapDefined (tsserver.js:562:30)
    at ProjectService.applyChangesInOpenFiles (tsserver.js:143396:48)
    at Session.handlers.ts.createMapFromTemplate._a.<computed> (tsserver.js:144260:46)
    at tsserver.js:146003:88
    at IOSession.Session.executeWithRequestId (tsserver.js:145994:28)
    at IOSession.Session.executeCommand (tsserver.js:146003:33)
    at IOSession.Session.onMessage (tsserver.js:146027:35)
    at Interface.<anonymous> (tsserver.js:147342:27)
    at Interface.emit (events.js:203:13)
    at Interface._onLine (readline.js:316:10)
    at Interface._normalWrite (readline.js:461:12)
    at Socket.ondata (readline.js:172:10)
    at Socket.emit (events.js:203:13)
    at addChunk (_stream_readable.js:295:12)
    at readableAddChunk (_stream_readable.js:276:11)
    at Socket.Readable.push (_stream_readable.js:210:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:166:17)

Extension version: 0.0.2
VS Code version: Code - Insiders 1.45.0-insider (2225d77536d12fea2eda04930f431a5eb0930bba, 2020-04-09T09:26:30.083Z)
OS version: Darwin x64 19.4.0

Automatically import components on the Template

Import Vue component automatically on the template

// file MyComponent.vue
//etc


// Main.vue
<template>
   <my-compo // it should show the auto-completion here
</template>
```

On auto completion it should import the dependency and add it to the `components: {}`

Renaming in setup() doesn't rename in template

<template>
  <!-- Button is a global component -->
  <Button :disabled="!isFromValid">Dodaj kandydata</Button>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from "vue";
import { Training } from "@/mock-server";
export default defineComponent({
  setup() {
    const form = reactive<Omit<Training, "id">>({
      nazwa: "",
      data_szkolenia: new Date(),
      rodzaj_szkolenia: 0,
    });

    const isFromValid = computed(() => Object.values(form).every((formValue) => !!formValue));
    return {
      form,
      isFromValid,
    };
  },
});
</script>

Repro steps:

Create a .vue file with the above content
Move cursor to const isFrom|Valid (| = cursor position)
Press F2 and rename to isFormValid

Expected result:
Instance property is renamed in <template> (:disabled="!isFromValid") and setup()

Actual result:
Renamed in setup() (const is renamed in definition and in setup()'s return object)

This was tested with:

znck.vue-language-features-insiders v2020.11.2548606
octref.vetur enabled

Settings:

Type checking ignore `.vue` files

I'm trying to set up type checking in my project. However, it seems that type checking is performed only in the .ts files, and .vue files are ignored.

Steps to reproduce:

Clone [email protected]:cawa-93/vite-electron-builder.git
Checkout to commit bf5c918af18174061bab1b73c065e1e41f406054
Install dependencies npm install
Run npm run typecheck

There are two intentional errors in the project:

However, type checking only reports an error in the /src/main/index.ts file but error in /src/rendered/App.vue ignored.

Renaming a vue file to .ts yields wrong file

when renaming .vue file to .ts typescript rename will rename the file to ${file}_________module

Support `if` and `for` attributes of NativeScriptVue

if and for attributes syntactically behave as v-if and v-for.

vuedx / languagetools Goto Github PK

languagetools's People

Contributors

Stargazers

Watchers

Forkers

languagetools's Issues

Functions:

Recommend Projects

Recommend Topics

Recommend Org