projects built with vite-plugin-SSR do not support CSS hints

I'm getting a Property does not exist error when accessing the data parameters inside a function. However this works fine in the application.

Any ideas why this happens ?

With take over mode, user can use one extension to take over language support for *.vue and *.ts both.

Just for reference. If you are willing to implement, you need to change document selector of LanguageClientOptions by user setting like this:
https://github.com/johnsoncodehk/volar/blob/f51ccbcb8628f803f2bef3613dafaf1051442b7f/packages/client/src/extension.ts#L53-L73

i can't use autocomplete width component props like the document does

Hi,

The component auto import feature only works if the imported component is defined by "script setup",

Here is an print when i try to import a non script setup component into one.

Is there any configuration that i'm missing?

Thanks in advance

When volar updated, coc-volar usually does not need to change the code. Are you interested in using GitHub Action to automatically release coc-volar when @volar/server released a new version? (If tsc compile pass)

When I auto import some function from vue, for example the onMounted function, this plugin cause some problem.

It prompts that [coc.nvim]Error on applyEdits:file:///[My file address changed] before apply edit

Description

This is a problem only with coc-volar. VSCode's volar extension is not a problem.

I think it will be reflected since there is a createFileSystemWatcher to begin with, but I don't know the cause.

REF

• https://github.com/yaegassy/coc-volar/blob/master/src/index.ts#L248-L250

  const clientOptions: LanguageClientOptions = {
    // ...snip
    synchronize: {
      fileEvents: workspace.createFileSystemWatcher('{**/*.vue,**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.json}'),
    },
    // ...snip

DEMO

Misc

Unfortunately, this symptom seems to be a problem only with coc-volar. Other Vim plugins that use volar do not seem to have this problem.

It seems to be the same with vim-lsp and Neovim builtin lsp.

My environment is Win11, I'm having some trouble.

Cannot install the plug-in & throw error "notarget No matching version found for @volar/[email protected]".

And the plug-in @yaegassy/coc-volar-tools cannot be installed too. It throw error "notarget No matching version found for @volar/[email protected]".

Even the option volar.autoCreateQuotes set to false, it will still create quotes when typing html attributes.

There seems to be an error in the background at startup when the Code Lens feature is enabled ("codeLens.enable": true in coc-settings.json).

There is nothing wrong with the operation of the extension itself, but it needs to be modified so that the error does not occur.

(As an additional note, this error seems to have occurred since the early development of coc-volar)

Log of coc.nvim:

Repro: :CocInfo

2021-08-02T08:50:27.543 WARN (pid:18787) [events] - Handler of CursorHold blocked more than 2s: Error
    at Events.on (/Users/yaegassy/.local/share/nvim/plugged/coc.nvim/build/index.js:18356:23)
    at CodeLensManager2.listen (/Users/yaegassy/.local/share/nvim/plugged/coc.nvim/build/index.js:66679:24)
    at new CodeLensManager2 (/Users/yaegassy/.local/share/nvim/plugged/coc.nvim/build/index.js:66671:14)
    at new Handler (/Users/yaegassy/.local/share/nvim/plugged/coc.nvim/build/index.js:70517:25)
    at Plugin.init (/Users/yaegassy/.local/share/nvim/plugged/coc.nvim/build/index.js:70924:26)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async /Users/yaegassy/.local/share/nvim/plugged/coc.nvim/build/index.js:71122:11

Capture:

As of typescript 4.7 and this commit of coc-tsserver go to source definition was added. In takeover mode I am unsure how to run this command.

:CocCommand tsserver.goToSourceDefinition works without takeover mode. Not sure if it is possible to run, or does volar need to implement a similar command?

CodeAction works fine when the file is opened for the first time, but an error occurs when the file is modified.

CodeAction where the problem occurs.

• Delete all unused imports
• Organize Imports

The following code actions seem to work fine

• Remove unused declaration for: '...'

DEMO (mp4):

Similar past issues

• #112
• #134

Is there a way to disable autocompletion suggestions from the Volar LS? I'm getting lots of noise from this plugin/vue-semantic-server via the autocomplete menu - is there a way to disable this programmatically? My current workaround is to call :CocList sources and toggle it off, but it resets each time Vim is opened.

The tsserver CoC plugin has configurations like

typescript.suggest.enabled
javascript.suggest.enabled

but I'm not seeing anything similar for Volar in the docs.

Thanks for this project - it works in great for typescript project. I have a non typescript .vue file and now that I upgraded to coc-volar 0.5.10 I started getting typescript errors such as

[ts 2322] [E] Type '() => void' is not assignable to type 'never'.

mostly in callback props. How can I resolve this? Thanks.

or it only works inside script block in SFC?

Hi,
I have installed coc-volar and enable take over mode in my vue project. I find volar syntax highlight crashed randomly when I edit or browse through a SFC vue file:

this is my coc log:

Can anyone help? Thanks!

First of all, A very huge thank you. and then during use, I found that the renaming function does not work properly, and the other related dependent files cannot be modified correctly.

Hey, it would be really great if you could, add configuration on how to install this using Packer.
I tried it and was just playing around with it.

cd ~/.config/nvim/lua
open packer_init.lua
add
->  use {'neoclide/coc.nvim', branch = 'release'}

":PackerInstall"

Once you have coc.nvim
:CocInstall @yaegassy/coc-volar

Awesome work!
Thanks

I just updated this plugin and see that [email protected] is deprecated and npm suggests @jridgewell/sourcemap-codec instead

When using volar in takeover mode (by following the instructions laid out in this projects readme), when i use the code action auto module import, it works only once before i have to restart the server.

I am met with this erro message

[coc.nvim] Error on applyEdits: {path to file} changed before apply edit.

after restarting the server on a .vue file, i am able to use the auto import from within a typescript only once yet again

for context this is a vue2 project, and i followed the instructions on the volar project readme for setting things up vue 2 support

Normally when I save in vim, it will reformat my vue file. If there is a syntax error, volar will refuse to reformat my vue file silently.

is it possible for volar to provide hints for those wrong syntax or typos in the code? I just spent an hour to check my code and found there is a place I put `;' instead of ',' inside export default.

in c/c++ etc vim scenario, vim can highlight the syntax errors for quick fixes. I wonder if volar can do that too? or it is already there but I just don't know how to set it up?

Description

coc-volar also needs to support use cases such as disabling the formatting capabilities of volar and using "prettier".

Unfortunately, coc.nvim does not allow you to set editor.defaultFormatter for each filetype, which is configurable in "VSCode".

[Not support] coc.nvim:

"[vue]": {
    "editor.defaultFormatter": "EXTENSION_NAME"
}

• Ref
  • vuejs/language-tools#53
  • vuejs/language-tools#163

About adding feature

Recently, initializationOption was made very flexible in "volar". (Thanks! johnsoncodehk)

Prepare to add the volar.formatting.enable setting so that you can control whether the format is enabled or disabled. (Like vetur's vetur.format.enable)

Misc (Using vue files in coc-prettier)

coc.nvim has an extension for coc-prettier.

The vue file is "disabled" in the default configuration of coc-prettier.

• REF: https://github.com/neoclide/coc-prettier#prettierdisablelanguages-default-vue

Please change the setting of prettier.disableLanguages

e.g:

Overwrite disableLanguages with empty

{
  // ...snip
  "prettier.disableLanguages": []
  // ...snip
}

1. vue.autoInsert.bracketSpacing doesn't seem to work.

2. Syntax highlighting is abnormal when scrolling down in a SFC that has a long script part.

Since version 0.27.2, the diagnostic function cannot be used, and there is no prompt even if there is a syntax error, which is normal before

In my CoC config file, the coc.preferences.formatOnSaveFiletypes list contains vue.

• With volar.formatting.enable set to true, the file is formatted on save, but the formatter ignores the local configuration for Prettier
• With volar.formatting.enable set to false, the file is not formatted on save

I recall that coc-vetur had the vetur.useWorkspaceDependencies flag that respected local configurations. Is there something similar for coc-volar? Is there another CoC configuration option that should be used instead?

I've noticed Volar has instructions for VS Code in this instance, but I don't know of an analog for Neovim.

Hi, i'm having some trouble to get coc-volar running after the update 0.5.30

It just occur when i type anything inside any vue file.

Is there any config im missing?

Description

In the shim (env.d.ts) of create-vue, declare module "*.vue" ... has been intentionally removed.

• https://github.com/vuejs/create-vue/blob/main/template/config/typescript/env.d.ts
• vuejs/create-vue#26

For editors other than VSCode, the direction seems to be to recommend the use of "Take Over Mode".

In coc-volar, the current flow is to first open the vue file and then run the command to enable Take Over Mode.

• :CocCommand volar.initializeTakeOverMode

Even if your project already has Take Over Mode enabled, you will need to open the vue file first.

Change

It would be better to be able to enable Take Over Mode more smoothly than currently.

I will soon make changes to activate coc-volar extensions for ts, js, tsx, and jsx files. (VSCode's volar extension like)

  "activationEvents": [
    "onLanguage:vue",
    "onLanguage:javascript",
    "onLanguage:typescript",
    "onLanguage:javascriptreact",
    "onLanguage:typescriptreact",
    "onCommand:volar.initializeTakeOverMode"
  ],

i want nvim to hint '@/asset' , how should i do

my tsconfig.json is below:

in the script section of my vue code, it seems there is no autocompete for any javascript or typescript code, is this supposed to work?

tried volar in vscode all autocomplete with javascript and typescript worked fine.

Description

This problem occurs only with coc-volar (coc.nvim). VSCode's volar extension is not a problem.

I have a feeling that the inserted text is broken in the case of fuzzy matching.

e.g:

• Input: martop -> can be matched margin-top

Demo

Case1

Case2

Hi, thanks for plugin.
I am using vue3 composition api
I tested 2 methods, Takeover Mode, and typescript-vue-plugin, but for both have this error.

For example, for this component, i have error from header:

    <div class="container" style="padding: 3.2rem 0;" v-if="loading">
      <LoadingComponent/>
    </div>

And also this error exists and for other Components properties or emits.

I founded in google a lot of reasons, but no one don't work.
Like, to create a file ** vue-file-import.d.ts** with this ext

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Or in main.ts to add

    app.config.globalProperties.appName = 'vue3'

Thanks in advance.

Hi. I might just be missing some configs, but I cannot jump to a different component when the path of that component does not include the .vue file extension. Jumping to .js files work fine even if they're missing the extension, but for some reason, Vue components need to have a .vue in the import statement for the JumpDefinition to work. Any ideas or workarounds?

It works fine in vue files but in ts files I can't import Vue files.
For example, in src/main.ts :

In Vue doc, it is mentioned that we should install TypeScript Vue Plugin.

I'm not sure if coc-colar also installs TypeScript Vue Plugin or if there is another coc implementation to install it.

Hi, thanks for plugin, but i don't understand how to make them works.
Make

:CocInstall @yaegassy/coc-volar

Also for coc-tsserver

But in vue file, i write a component, and don't see errors that need to import.
Also coc-codeaction-cursor don't import.

Recently, I upgraded from 0.23.3 to 0.24.
Suddenly, variables and imported components declared in <script setup> show the warning "[ts 6133] value is never read" for using in <template>.

Variables are using in <script setup> are correctly detecting.
However, variables which only used in <template> show "value is never read" warnings.

I rollbacked coc-volar to 0.23.3, There is no problem, and problem has been solved

Because I have defined the icon of diagnostics in coc but not work on here. I want the icons to be consistent with coc or I can customize the symbols.

Thanks to create this coc extension!

This extension seem dependency VSCode, maybe helpful if I remove appRoot option and publish @volar/vscode-server?

Description

I think this problem is probably coming from this commit. vuejs/language-tools@097cfd0#diff-4687ed2e9ff82d7e4c306953ce08ad1136d7bc1a89f4d21e6215727f730b30d5

No problem for VSCode's volar extension.

DEMO (mp4)

[NG] @volar/server v0.30.2 later

[OK] @volar/server v0.30.1

"volar.takeOverMode.enabled": true

coc-volar:

VSCode's volar extension (upstream):

Same

really heavy application, takes a long time to install on linux(along with boost c++ libraries etc), can we use some better alternatives

During installation, an Error occured:

- ✗ @yaegassy/coc-volar-tools Request failed using proxy proxy.<companydomain>.com: self-signed certificate in certificate chain
     Using npm from: /home/wangx/node/bin/npm
Get info from https://registry.npmjs.org/ 
Request failed using proxy proxy.<companydomain>.com: self-signed certificate in certificate chain                                                                                                                                                                                                        

It seems that during installation, the plugin will not read the ~/.npmrc or ./.npmrc config file.

Diagnostic info is not showing up, probably after I did an update? I don't remember exactly.
I see a similar issue earlier.

Not showing in vue file:

Shows in normal ts file:

I use takeover mode:

  "volar.takeOverMode.enabled": true,
  "tsserver.enable": false

Diagnostic will show if I change tsserver.enable to true, but I don't think that's what I should do.

Thanks in advance!

Hey! I tried to install this and test this using vue-vite: I get really weird errors:

:CocInfo

:messages

volar must work with watchman?

coc.nvim is latest version.
project package mainly used : vite + vue3.2.37 + ts4.8.3

After installing as written in the docs and opening any vue file, I get the following error.

[coc.nvim]: UnhandledRejection: Connection to server got closed. Server will not be restarted.
Error: Connection to server got closed. Server will not be restarted.                                                                                                                  
    at np.handleConnectionClosed (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:967)
    at np.handleConnectionClosed (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:28612)
    at t (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:386)
    at tM.invoke (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:9670)
    at sd.fire (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:10436)
    at bi (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:36:10897)
    at tM.invoke (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:9670)
    at sd.fire (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:10436)
    at _M.fireClose (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:12716)
    at ChildProcess.<anonymous> (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:62:11975)
UnhandledRejection: Connection to server got closed. Server will not be restarted.
Error: Connection to server got closed. Server will not be restarted.
    at np.handleConnectionClosed (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:967)
    at np.handleConnectionClosed (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:28612)
    at t (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:386)
    at tM.invoke (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:9670)
    at sd.fire (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:10436)
    at bi (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:36:10897)
    at tM.invoke (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:9670)
    at sd.fire (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:10436)
    at _M.fireClose (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:12716)
    at ChildProcess.<anonymous> (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:62:11975)
UnhandledRejection: Connection to server got closed. Server will not be restarted.
Error: Connection to server got closed. Server will not be restarted.
    at np.handleConnectionClosed (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:967)
    at np.handleConnectionClosed (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:28612)
    at t (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:223:386)
    at tM.invoke (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:9670)
    at sd.fire (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:10436)
    at bi (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:36:10897)
    at tM.invoke (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:9670)
    at sd.fire (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:10436)
    at _M.fireClose (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:35:12716)
    at ChildProcess.<anonymous> (/home/user/.config/nvim/plugged/coc.nvim/build/index.js:62:11975)
UnhandledRejection: Connection to server got closed. Server will not be restarted.

{
  "name": "Volar doctor info",
  "filePath": "xxx.vue",
  "clientVersion": "0.7.8",
  "serverVersion": "0.29.8",
  "vueVersion": "3.2.22",
  "vueRuntimeDomVersion": "3.2.22",
  "vueTscVersion": "0.29.8",
  "tsVersion": "4.4.3",
  "tsServerPath": "/home/user/.config/coc/extensions/node_modules/@yaegassy/coc-volar/node_modules/typescript/lib/tsserverlibrary.js",
  "settings": {
    "enable": true,
    "useWorkspaceTsdk": false,
    "diagnostics": {
      "enable": true,
      "tsLocale": "en"
    },
    "lowPowerMode": false,
    "codeLens": {
      "references": true,
      "pugTools": false,
      "scriptSetupTools": false
    },
    "autoClosingTags": false,
    "autoCompleteRefs": false,
    "takeOverMode": {
      "enabled": false
    },
    "formatting": {
      "enable": true,
      "printWidth": 100
    },
    "completion": {
      "tagNameCase": "both",
      "attrNameCase": "kebab",
      "autoImportComponent": true
    },
    "dev": {
      "serverPath": ""
    },
    "fix": {
      "completion": true
    }
  }
}

It seems to be a problem with the typescript version.

Ref: vuejs/language-tools#428

The latest version of coc-volar had v4.4.2 installed.

You need to change the dependency to v4.3.5.