volarjs / services Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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.
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 ?
- 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 🙏
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.
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.
Configuration File Confusion: The new project setup includes vite.config.js
but not volar.config.js
. I tried two approaches:
vite.config.js
as per the volar-service-vetur
documentation.volar.config.js
using the code from the documentation.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.
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.
services/packages/vetur/index.ts
Line 19 in 0230a41
services/packages/html/index.ts
Line 9 in 0230a41
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
.
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.
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
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>
import fs from 'fs';
in a <script>
tag in Vue fileDelete 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
sync
function should not depend on ts projectgetAllMarkdownDocuments
should return file list that searches from the file systemi 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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.