Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vuejs/language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://github.com/vuejs/language-tools

Last synced: 3 days ago
JSON representation

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

Awesome Lists containing this project

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`.



> 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](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.