语言工具

Vue 语言工具

⚡ 基于Volar.js的高性能Vue语言工具

我们的 Discord 服务器上的#language-tools

套餐

• Vue 语言特性
  VSCode 的 Vue、Vitepress、petite-vue 语言支持扩展

• vue-tsc
  类型检查和 dts 构建命令行工具

• vue-组件元
  组件道具、事件、槽位类型信息提取工具

• vite-插件-vue-组件-预览
  Vite 插件，用于支持具有Vue Language Features的 Vue 组件预览视图

• @vue/language-server
  语言服务器本身。

• @vue/typescript-plugin
  语言服务器的 Typescript 插件。

社区整合

yaegassy/coc-掌 ⚡ ？ ？️
coc.nvim 的 Vue 语言客户端

neovim/nvim-lspconfig ⚡ ？
Neovim 的 Vue 语言服务器配置

如何使用neovim和lsp配置vue语言服务器？

混合模式配置（需要@vue/language-server版本^2.0.0 ）

注意：“接管”模式已停止。相反，引入了新的“混合”模式。在此模式下，Vue 语言服务器专门管理 CSS/HTML 部分。因此，您必须与使用@vue/typescript-plugin的 TypeScript 服务器结合运行@vue/language-server 。下面是 Neovim LSP 的简化配置，在升级到版本2.0.0后进行了更新以适应语言服务器。

对于 v1.0.0 以下的 nvim-lspconfig 版本，请使用 tsserver 而不是 ts_ls，例如lspconfig.ts_ls.setup

 -- 如果你使用的是 mason.nvim，你可以这样获取 ts_plugin_path -- 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 = {
      {名称 = '@vue/typescript-plugin'，位置 = vue_language_server_path，语言 = { 'vue' },
      },
    },
  }, filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}-- 无需将 `hybridMode` 设置为 `true`，因为它是默认值lspconfig.volar.setup {}

非混合模式（类似于接管模式）配置（需要@vue/language-server版本^2.0.7 ）

注意：如果hybridMode设置为false Volar将运行嵌入式ts_ls ，因此无需单独运行它。

欲了解更多信息，请参阅#4119

确保您已全局安装 typescript 或将位置传递给 volar

对所有.{vue,js,ts,tsx,jsx}文件使用 volar。

本地 lspconfig = require('lspconfig')-- lspconfig.ts_ls.setup {} lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = {vue = { 混合模式 = false,
    },
  },
}

仅对.vue文件使用volar ，对.ts和.js文件使用ts_ls 。

本地 lspconfig = require('lspconfig')lspconfig.ts_ls.setup { init_options = {plugins = {
      {名称 = '@vue/typescript-plugin'，位置 = '/path/to/@vue/语言服务器'，语言 = { 'vue' },
      },
    },
  },
}lspconfig.volar.setup { init_options = {vue = { HybridMode = false,
    },
  },
}

nvim-cmp 集成

看看这个讨论

mattn/vim-lsp-设置 ⚡
vim-lsp 的 Vue 语言服务器自动配置

sublimelsp/LSP-掌侧？
Sublime 的 Vue 语言客户端

卡比亚/atom-ide-volar
Atom 的 Vue 语言客户端

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ ?
Emacs 的 Vue 语言客户端

Tommasongr/nova-vue
Nova 的 Vue 语言客户端

小新天空/lapce-vue
Lapce 的 Vue 语言客户端

Kingwl/摩纳哥掌侧
浏览器上对 Monaco 的 Vue 语言支持

网络风暴
@vue/language-server的内置集成

Eclipse WildWeb 开发者
Eclipse 的 Vue 语言服务器配置

* ⚡ 支持多服务器
*？支持接管模式
* ？️支持额外的预览功能

贡献指南

如果您想使用 volar 扩展，请按照以下命令设置本地开发环境。

？请注意，您将需要 pnpm - 您可以在此处下载：https://pnpm.io/installation。

 git 克隆 https://github.com/vuejs/language-tools.gitcd 语言工具
即插即用安装
pnpm 运行构建

开发 volar 扩展的推荐方法是使用 VSCode 提供的调试工具。或者，您可以运行 package.json 文件中定义的脚本之一。

❗ 您应该始终使用项目根目录中定义的调试启动配置或 package.json 脚本。

可以在此处找到有关为开源项目做出贡献的其他信息：https://docs.github.com/en/get-started/quickstart/contributing-to-projects

要使用上游 Volar.js 模块进行开发，您可以使用 https://github.com/volarjs/workspace 设置工作区。