volarjs / services Goto Github PK

Mentioned in language tools: vuejs/language-tools#4111

Based on standalone Sass language server.

Would be nice to have dedicated Sass language service support. Any tips on how to get started?

I want to define some default TypeScript compiler options, but I can't find the related API for this. I hope you can help me.

Please add support for stylus.

Let’s say we have the following TypeScript code:

function service() {}

export default service

This roughly compiles to the following JavaScript:

function service() {}

exports.default = service

Now if a user wants to use this package in CJS, usage looks like this:

import service = require('some-package')

service.default()

Or from native ESM:

import service from 'some-package'

service.default()

This is not pretty, and can lead to interop problems.

Possible solutions

1. Use named exports. Named exports don’t support from ESM ↔ CJS compatibility issues as much.
2. Use native ESM. If there is no CJS, there are no ESM ↔ CJS compatibility issues to take into account.
3. Use export = syntax.

Personally I like option 2. This gives us the ability to use native ESM dependencies. Also I think Volar currently doesn’t have a lot of dependants yet, so the impact on users is still relatively small.

I can see this behavior in both prettier and prettyhtml plugins:

newText = '\n' + newText.trim() + '\n';

Is there a technical reason why this is done? When copying and pasting text in .vue files, this creates unnecessary newlines which is frankly quite annoying.

Genuinely curious.

Thanks!

How to migrate volar 0.33.xx use @volar-plugins/prettyhtml ?

Prerequisite

• Not use Prettier plugin
• Use volar take over mode
• Use volar format .vue file default

• volar.config.js

import prettierHtml from '@volar-plugins/prettyhtml';

module.exports = {
  plugins: [
    prettierHtml({
      usePrettier: true,
      printWidth: 100,
    }),
  ],
};

• .vscode/extension.json

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "voorjaar.windicss-intellisense"
  ]
}

• .vscode/setting.json

{
  "volar.tsPlugin": true,
  "volar.icon.preview": true,
  "volar.icon.finder": true,
  "eslint.enable": true,
  "eslint.format.enable": true,
  "eslint.options": {
    "extensions": [
      ".vue"
    ]
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

• App.vue

So, how will I configure it，save the file can automatically format HTML 😰, thank you 🙏‍

After installing volar extension and @volar/vue-language-plugin-pug, I noticed many "Duplicate attribute" errors appearing in my error window.

As we know, if we use duplicate attributes, they will be combined into one attribute in the processed HTML, so there should not be any warning displayed.

Background

I recently transitioned from using Vue 2 (generation using: "vue-cli", and using vscode extension: "Vetur") in my projects to the new Vue 3. This new project was set up using the official Vue quick start guide (npm create vue@latest), which generated a Vue 3 + Vite project. The recommended VS Code extension for this setup is Volar.

Issue

I've noticed that Volar lacks several features I frequently used in Vetur, particularly the customizable scaffold snippets (Vetur feature reference). To address this, I attempted to integrate volar-service-vetur following the instructions on volar-service-vetur.

Challenges Encountered

1. Configuration File Confusion: The new project setup includes vite.config.js but not volar.config.js. I tried two approaches:

   • Modifying vite.config.js as per the volar-service-vetur documentation.
   • Creating a new volar.config.js using the code from the documentation.

2. Module Syntax Issue: My IDE raised issues with the require() syntax in volar.config.js, as it's CommonJS syntax. I attempted to convert this to ES module syntax using import/export, but without success.

Request for Assistance

Could someone guide me on how to successfully integrate volar-service-vetur into my Vue 3 + Vite project?
Or if there are other better solutions out there?

A hack would be to temporarily enable Vetur for the features and disable it when done and continue with Volar, but that is inconvenient and I am looking for a permanent dev setup solution.

I'm particularly looking to regain the Vetur base features like customizable scaffold snippets, component data, etc in my current Vue 3 + Vite + Volar project setup.

Any help or pointers would be greatly appreciated!

I have gone through these service plugins, and each may create a new LanguageService for its own.

Is there anyway to share these LanguageService among plugins using context?

Or should we share ?

Some popular libraries like vue-i18n, unplugin-vue-router, vite-plugin-pages and @nuxtjs/router-extras allow to define a custom json block in SFC, eg. <route>, <i18n>. With support of json schema, users can profit auto-completion or validation in those custom blocks.

Author of volar thinks it's easy to implement😀

For non-ts files, getEditsForRefactor will hit the following assertion.

Error: Debug Failure. File /.../xxx.yyy has unknown extension.

This is hardcoded by TS in the internal variable extensionsToRemove, and there is currently no way to modify it.

It's a minor inconvenience to have the types break when writing the config file, since you have to finagle the export to get it to work in a "module":true project.

Personally I like the tsup cli tool for single-command config-less TS builders when I need to support both Module and CommonJS exports.

SCSS has https://stylelint.io/ which is similar to eslint and currently I have a LSP running for it specifically but would be nice to reduce to just volar if possible.

It would be great if those typescript hints from twoslash would be available in the script part of vue as well :D

shout out to @orta for
https://github.com/orta/vscode-twoslash-queries

Vetur supports custom block syntax highlighting - this is the one thing I am still missing from Volar:
https://vuejs.github.io/vetur/guide/highlighting.html#custom-block

Especially when using plugins as https://github.com/hannoeru/vite-plugin-pages or https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n

Hi,

I have a pretty nice idea about speeding up defining and using ref.

Current situation

Amazing, My cursor is in template tag somewhere and I want to add a new ref like const isActive = ref(false). For this, I have to move up in the file and write the desired ref and later I have to come back and use the same.

Solution

Instead, I hope we can create a new command which will allow inserting a new ref in SFC so we don't have to move up and down in file.

At First, I thought about creating an extension but I am new to both authoring vscode extension and tooling vue. Hence, I thought volar is strong enough to provide this feature quickly and more effectively.

If this is out of the scope of volar, I am happy to create vs code extension. For this, it will be great if you can provide some guidance on how can I parse the SFC and inject code into SFC.

Thanks :)

Repro: https://github.com/kingyue737/volar-starter-service-v2

I've changed the config according to the docs:

module.exports = {
  services: [require("volar-service-prettyhtml").create({ printWidth: 10 })],
}

and format App.vue with Vue Offical extension. Nothing happened.

Then I tried

module.exports = {
  services: [
    require("volar-service-prettyhtml").create({
      getFormattingOptions() {
        return { printWidth: 10 };
      },
    }),
  ],
};

Nothing happened again.

I also added console.log("print something"); in volar.config.js but nothing was printed in output of Vue Language Server.

I've also tried volar-service-vetur. It does not work either in my old vue2 project.

OS: Windows 11

This problem causes vscode to not prompt Vue files properly.

The plugin seems to ignore vscode's tabwidth when formating
volar.config.js

/** @type {import('@volar-plugins/prettier')} */
const { volarPrettierPlugin } = require("@volar-plugins/prettier");

module.exports = {
    plugins: [
        volarPrettierPlugin({
            languages: ["postcss", "css", "scss"],
        }),
    ],
};

HTML and Typescript are both fine, volar seems to have the correct tab width, but as soon as volarPrettier kicks in, the wrong tabwidth is inserted. (I use prettier for css because vscode's formatter messes up tailwind <class>:<class> to <class> :<class> [add whitespace])
The tabwitdth in Prettier in configured to 4

used

vs code message

volar.config.js

/** @type {import('@volar-plugins/prettier')} */
const { volarPrettierPlugin } = require("@volar-plugins/prettier");


module.exports = {
  plugins: [
    volarPrettierPlugin({
      languages: ['html', 'css', 'scss', 'typescript', 'javascript'],
      html: {
        breakContentsFromTags: true,
      },
      useVscodeIndentation: true,
    }),
  ],
};

Hello,
Per the title, I noticed that the prettier plugin adds a newline at the top of files. Could we get an option to disable this? It's not standard behavior for prettier.

Thanks

Using the example volar.config.js from the README I get a parsing error right in the config itself:

and at the very start of every .vue file, right in the <template> tag:

Parsing error: "parserOptions.programs" has been provided for @typescript-eslint/parser.⏎The file was not found in any of the provided program instance(s): components/SoAndSo.vue

Here is my .eslintrc.cjs file:

module.exports = {
  "root": true,
  "parser": "vue-eslint-parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  },
  "ignorePatterns": ["types/*.ts", "types/**/*.ts"],
  "extends": [
    "@nuxtjs/eslint-config-typescript"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": ["warn"],
    "@typescript-eslint/no-var-requires": ["off"],
    "space-before-function-paren": ["error", {
      "anonymous": "never",
      "named": "never",
      "asyncArrow": "never"
    }],
    "vue/no-unused-vars": ["warn"],
    "vue/no-v-html": ["off"]
  },
  "overrides": [
    {
      "files": ["store/**/*.ts"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off"
      }
    }
  ]
}

And here are some relevant dependencies I have installed:

    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@volar-plugins/eslint": "^2.0.0-alpha.21",
    "@volar/language-service": "^1.0.24",
    "typescript": "^4.8.4",
    "vue-component-meta": "^1.2.0",

It should use https://github.com/microsoft/vscode-markdown-languageservice to make a plugin into https://github.com/johnsoncodehk/volar/tree/master/packages/vue-language-service/src/plugins.

I have a project in git. The package.json, the prettier config and the volar config is in the frontend folder. I use the prettier plugin. The plugin works fine, but it formats the code with default prettier config it cannot find my prettier config. Is there an easy way to solve this?

I have set in vs code :
"vue.server.configFilePath": "./frontend/volar.config.js",

My volar.config.js looks like this
module.exports = { services: [require('volar-service-prettier').default()] };
Thank you,
Kornél Horváth

I noticed the prettier plugin adds space around the value/content for all a tags. Is this by design? I'm only noticing it on a tags, not p, div or h tags.

example:

before format: <a>some text</a>

after format: <a> some text </a>

1. Add import fs from 'fs'; in a <script> tag in Vue file
2. Trigger code actions on that line and select Delete all unused imports

Volar doesn't return matching document version in the codeAction/resolve response.

[Trace - 11:01:42] Sending notification 'textDocument/didChange'.
Params: {
    "textDocument": {
        "uri": "file:///usr/local/workspace/file.vue",
        "version": 2
    },
    "contentChanges": [
        {
            "range": {
                "start": {
                    "line": 86,
                    "character": 0
                },
                "end": {
                    "line": 86,
                    "character": 0
                }
            },
            "rangeLength": 0,
            "text": "import fs from 'fs';"
        }
    ]
}

[Trace - 11:01:48] Received response 'codeAction/resolve - (25)' in 7ms.
Result: {
    "title": "Delete all unused imports",
    "data": {
        "uri": "file:///usr/local/workspace/file.vue.ts",
        "type": "fixAll",
        "fileName": "/usr/local/workspace/file.vue.ts",
        "fixIds": [
            "unusedIdentifier_deleteImports"
        ]
    },
    "kind": "",
    "diagnostics": [
        {
            "range": {
                "start": {
                    "line": 6,
                    "character": 0
                },
                "end": {
                    "line": 6,
                    "character": 20
                }
            },
            "message": "'fs' is declared but its value is never read.",
            "data": {
                "uri": "file:///usr/local/workspace/file.vue",
                "version": 4,
                "type": "service",
                "serviceOrRuleId": "typescript",
                "isFormat": false,
                "original": {},
                "ruleFixIndex": 0,
                "documentUri": "file:///usr/local/workspace/file.vue.ts"
            },
            "code": 6133,
            "severity": 4,
            "tags": [
                1
            ],
            "source": "ts"
        }
    ],
    "edit": {
        "documentChanges": [
            {
                "textDocument": {
                    "uri": "file:///usr/local/workspace/file.vue",
                    "version": 4
                },
                "edits": [
                    {
                        "newText": "",
                        "range": {
                            "start": {
                                "line": 86,
                                "character": 0
                            },
                            "end": {
                                "line": 87,
                                "character": 0
                            }
                        }
                    }
                ]
            }
        ]
    }
}

As can be seen here, Volar specified version 4 in the code action while the document is at version 2 right now.

It appears that VSCode doesn't really care about version and still applies the edit but in case of Sublime Text the edit is ignored.

In most cases, it's better to let users control the version of Prettier themselves as different versions includes formatting changes. Users won't like it if one install they have different formatting from another. Downstream consumers who don't want users to control the version can add Prettier into their language-server deps directly.

Hey,

when using astro in neovim the language server crashes with this error:

[ERROR][2024-02-25 18:56:28] .../vim/lsp/rpc.lua:734	"rpc"	"/Users/toby/.local/share/nvim/mason/bin/astro-ls"	"stderr"	"/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/volar-service-prettier/index.js:18
                throw new Error(\"Could not load Prettier: \" + e);
                      ^

Error: Could not load Prettier: Error: Cannot find module 'prettier'
Require stack:
- /Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/volar-service-prettier/index.js
- /Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/dist/languageServerPlugin.js
- /Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/dist/nodeServer.js
- /Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/bin/nodeServer.js
    at Object.create (/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/volar-service-prettier/index.js:18:23)
    at createServiceContext (/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/@volar/language-service/lib/languageService.js:156:65)
    at createLanguageService (/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/@volar/language-service/lib/languageService.js:39:21)
    at Object.getLanguageService (/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/@volar/language-server/lib/project/typescriptProject.js:74:76)
    at sendDocumentDiagnostics (/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/@volar/language-server/lib/server.js:278:66)
    at async updateDiagnostics (/Users/toby/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/@volar/language-server/lib/server.js:267:13)

Node.js v21.6.2
"

I was able to fix this by doing this:

$ cd ~/.local/share/nvim/mason/packages/astro-language-server/node_modules/@astrojs/language-server/node_modules/volar-service-prettier
$ npm install

Maybe this is some kind of dependency issue?

Let me know if you need more information, I would really love to see this resolved :)

The latest version of browser language server no longer works due to the addition of jsonc-parser dependency, we need to extract jsonc-parser function for tsconfig into a separate service.

Refs: https://github.com/microsoft/vscode/tree/main/extensions/markdown-language-features

• the sync function should not depend on ts project
• getAllMarkdownDocuments should return file list that searches from the file system

i had installed @volar-plugins/prettyhtml, and added volar.config.js. but it didn't useful。

Greetings. Was hoping this work would allow me to have Prettier formatting in my Vue's <script setup> tags. If that is what this service is not supposed to help with, apologies.

I have the volar-service-prettier package installed and my volar.config.js file appears like so:

import { volar } from "volar-service-prettier";
export default {
  services: [
    volar({
      languages: ["html", "javascript"],
    }),
  ],
};

However, I get this output in my VS Code and my package.json type is set to module.

[Warn  - 10:31:39 PM] Error [ERR_REQUIRE_ESM]: require() of ES Module /workspaces/project/volar.config.js from /home/vscode/.vscode-server/extensions/vue.volar-1.8.8/dist/server.js not supported.
Instead change the require of volar.config.js in /home/vscode/.vscode-server/extensions/vue.volar-1.8.8/dist/server.js to a dynamic import() which is available in all CommonJS modules.

In VS Code, extensions can add custom data through the following code:

{
  "contributes": {
    "html": {
      "customData": ["./html.html-data.json"]
    },
    "css": {
      "customData": ["./css.css-data.json"]
    }
  }
}

At this time, this custom data isn't found by the HTML and CSS services, leading to downstream issues like this one: withastro/language-tools#700

When I use https://github.com/alex8088/electron-vite to create an Electron Vue project, (pnpm create @quick-start/electron). Whenever I open electron.d.ts, I observe that volar ls has a long 100% CPU usage, during which ls does not respond to other operations.

CPU-20231031T215046.cpuprofile

I am not very familiar with vscode, ts, lsp. I observed using the Chrome performance panel and found that it occupies a lot of time here.

https://github.com/volarjs/services/blob/v0.0.16/packages/typescript/src/features/codeAction.ts#L102

It was introduced in #29

I looked up the implementation of the vscode ts plugin and found that it does not invoke getEditsForRefactor in provideCodeActions. (I am not very familiar with vscode)
https://github.com/microsoft/vscode/blob/1.83.1/extensions/typescript-language-features/src/languageFeatures/refactor.ts#L487

References:

• https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/languageFeatures/codeLens/baseCodeLensProvider.ts
• https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/languageFeatures/codeLens/implementationsCodeLens.ts
• https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/languageFeatures/codeLens/referencesCodeLens.ts

Stylus is a very good choice for those who like indentation-based language such as Pug.
Hope Volar also supports it.
For more details, see vuejs/language-tools#1122.