語言工具

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_instaguage ( .. '/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 設定工作區。