Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/language-tools?tab=readme-ov-file
⚡ High-performance Vue language tooling based-on Volar.js
https://github.com/vuejs/language-tools?tab=readme-ov-file
Last synced: about 1 month ago
JSON representation
⚡ High-performance Vue language tooling based-on Volar.js
- Host: GitHub
- URL: https://github.com/vuejs/language-tools?tab=readme-ov-file
- Owner: vuejs
- License: mit
- Created: 2020-05-01T20:40:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-27T08:38:32.000Z (4 months ago)
- Last Synced: 2024-05-28T13:37:20.002Z (4 months ago)
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=Vue.volar
- Size: 29.2 MB
- Stars: 5,494
- Watchers: 42
- Forks: 364
- Open Issues: 281
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - IDE Language Support
README
# Vue Language Tools
> ⚡ High-performance Vue language tooling based-on [Volar.js](https://volarjs.dev/)
💬 **#language-tools** on our [Discord Server](https://discord.gg/vue)
## Packages
- [Vue Language Features](https://github.com/vuejs/language-tools/tree/master/extensions/vscode) \
*Vue, Vitepress, petite-vue language support extension for VSCode*
- [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) \
*Type-check and dts build command line tool*
- [vue-component-meta](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) \
*Component props, events, slots types information extract tool*
- [vite-plugin-vue-component-preview](https://github.com/johnsoncodehk/vite-plugin-vue-component-preview) \
*Vite plugin for support Vue component preview view with `Vue Language Features`*
- [`@vue/language-server`](/packages/language-server/) \
*The language server itself*.
- [`@vue/typescript-plugin`](/packages/typescript-plugin/) \
*Typescript plugin for the language server*.
## Community Integration
[yaegassy/coc-volar](https://github.com/yaegassy/coc-volar) ⚡ 🤝 🅿️ \
*Vue language client for coc.nvim*
[neovim/nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) ⚡ 🤝 \
*Vue language server configuration for Neovim*
How to configure vue language server with neovim and lsp?
### Hybrid mode configuration (Requires `@vue/language-server` version `^2.0.0`)
Note: The "Take Over" mode has been discontinued. Instead, a new "Hybrid" mode has been introduced. In this mode, the Vue Language Server exclusively manages the CSS/HTML sections. As a result, you must run `@vue/language-server` in conjunction with a TypeScript server that employs `@vue/typescript-plugin`. Below is a streamlined configuration for Neovim's LSP, updated to accommodate the language server following the upgrade to version `2.0.0`.
```lua
-- If you are using mason.nvim, you can get the ts_plugin_path like this
-- local mason_registry = require('mason-registry')
-- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server'
local vue_language_server_path = '/path/to/@vue/language-server'
local lspconfig = require('lspconfig')
lspconfig.tsserver.setup {
init_options = {
plugins = {
{
name = '@vue/typescript-plugin',
location = vue_language_server_path,
languages = { 'vue' },
},
},
},
filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}
-- No need to set `hybridMode` to `true` as it's the default value
lspconfig.volar.setup {}
```
### None-Hybrid mode(similar to takeover mode) configuration (Requires `@vue/language-server` version `^2.0.7`)
Note: If `hybridMode` is set to `false` `Volar` will run embedded `tsserver` therefore there is no need to run it separately.
For more information see [#4119](https://github.com/vuejs/language-tools/pull/4119)
*Make sure you have typescript installed globally or pass the location to volar*
Use volar for all `.{vue,js,ts,tsx,jsx}` files.
```lua
local lspconfig = require('lspconfig')
-- lspconfig.tsserver.setup {}
lspconfig.volar.setup {
filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
init_options = {
vue = {
hybridMode = false,
},
},
}
```
Use `volar` for only `.vue` files and `tsserver` for `.ts` and `.js` files.
```lua
local lspconfig = require('lspconfig')
lspconfig.tsserver.setup {
init_options = {
plugins = {
{
name = '@vue/typescript-plugin',
location = '/path/to/@vue/language-server',
languages = { 'vue' },
},
},
},
lspconfig.volar.setup {
init_options = {
vue = {
hybridMode = false,
},
},
},
```
### nvim-cmp integration
Check out this [discussion](https://github.com/vuejs/language-tools/discussions/4495)
[mattn/vim-lsp-settings](https://github.com/mattn/vim-lsp-settings) ⚡ \
*Vue language server auto configuration for vim-lsp*
[sublimelsp/LSP-volar](https://github.com/sublimelsp/LSP-volar) 🤝 \
*Vue language client for Sublime*
[kabiaa/atom-ide-volar](https://github.com/kabiaa/atom-ide-volar) \
*Vue language client for Atom*
[emacs-lsp/lsp-mode](https://github.com/emacs-lsp/lsp-mode) ([jadestrong/lsp-volar](https://github.com/jadestrong/lsp-volar)) ⚡ 🤝 \
*Vue language client for Emacs*
[tommasongr/nova-vue](https://github.com/tommasongr/nova-vue) \
*Vue language client for Nova*
[xiaoxin-sky/lapce-vue](https://github.com/xiaoxin-sky/lapce-vue) \
*Vue language client for Lapce*
[Kingwl/monaco-volar](https://github.com/Kingwl/monaco-volar) \
*Vue language support for Monaco on Browser*
[WebStorm](https://www.jetbrains.com/webstorm/) \
*Built-in integration for `@vue/language-server`*
[Eclipse WildWebDeveloper](https://github.com/eclipse-wildwebdeveloper/wildwebdeveloper) \
*Vue language server configuration for Eclipse*
\* ⚡ support [multiple servers](https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736) \
\* 🤝 support [take over mode](https://github.com/vuejs/language-tools/discussions/471) \
\* 🅿️ support [extra preview features](https://twitter.com/johnsoncodehk/status/1507024137901916161)
## Contribution Guide
If you want to work on the volar extension follow these commands to set up your local development environment.
🔎 Note that you will need pnpm - you can download it here: https://pnpm.io/installation.
```bash
git clone https://github.com/vuejs/language-tools.git
cd language-tools
pnpm install
pnpm run build
```
The recommended way to develop the volar extension is to use the [Debug Tools](https://code.visualstudio.com/Docs/editor/debugging) provided by VSCode.
Alternatively, you can run one of the scripts defined in the [package.json](https://github.com/vuejs/language-tools/blob/master/package.json) file.
❗ You should always use the debug launch configs or package.json scripts defined in the root of the project.
Additional info for contributing to open source projects can be found here: https://docs.github.com/en/get-started/quickstart/contributing-to-projects
To develop with upstream Volar.js modules, you can setup workspace with https://github.com/volarjs/workspace.
---
Full-time Support by
Boot a fresh environment in milliseconds.
