search

vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.87k stars 402 forks source link

readme

Vue Language Tools

⚡ High-performance Vue language tooling based-on Volar.js

💬 #language-tools on our Discord Server

Packages

Community Integration

yaegassy/coc-volar ⚡ 🤝 🅿️ \ Vue language client for coc.nvim

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`. > For nvim-lspconfig versions below [v1.0.0](https://newreleases.io/project/github/neovim/nvim-lspconfig/release/v1.0.0) use tsserver instead of ts_ls, e.g. `lspconfig.ts_ls.setup` ```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.ts_ls.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 {} ``` ### Non-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 `ts_ls` 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.ts_ls.setup {} lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = { vue = { hybridMode = false, }, }, } ``` Use `volar` for only `.vue` files and `ts_ls` for `.ts` and `.js` files. ```lua local lspconfig = require('lspconfig') lspconfig.ts_ls.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 ⚡ \ Vue language server auto configuration for vim-lsp

sublimelsp/LSP-volar 🤝 \ Vue language client for Sublime

kabiaa/atom-ide-volar \ Vue language client for Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ 🤝 \ Vue language client for Emacs

tommasongr/nova-vue \ Vue language client for Nova

xiaoxin-sky/lapce-vue \ Vue language client for Lapce

Kingwl/monaco-volar \ Vue language support for Monaco on Browser

WebStorm \ Built-in integration for @vue/language-server

Eclipse WildWebDeveloper \ Vue language server configuration for Eclipse

* ⚡ support multiple servers \ * 🤝 support take over mode \ * 🅿️ support extra preview features

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.

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 provided by VSCode. Alternatively, you can run one of the scripts defined in the 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.