言語ツール

Vue言語ツール

⚡ Volar.js ベースの高性能 Vue 言語ツール

Discord サーバーの# language-tools

パッケージ

• Vue 言語の機能
  VSCode の Vue、Vitepress、petite-vue 言語サポート拡張機能

• vue-tsc
  型チェックおよび dts ビルド コマンド ライン ツール

• vue-コンポーネント-メタ
  コンポーネントのプロパティ、イベント、スロット タイプの情報抽出ツール

• vite-plugin-vue-component-preview
  Vue Language Featuresを使用した Vue コンポーネントのプレビュー ビューをサポートするための Vite プラグイン

• @vue/language-server
  言語サーバー自体。

• @vue/typescript-plugin
  言語サーバー用の Typescript プラグイン。

コミュニティの統合

ヤエガッシー/コックボラール ⚡ ? ⁉️
coc.nvim 用の Vue 言語クライアント

neovim/nvim-lspconfig ⚡ ?
Neovim の Vue 言語サーバー構成

neovim と lsp を使用して vue 言語サーバーを構成するにはどうすればよいですか?

ハイブリッド モード構成 ( @vue/language-serverバージョン^2.0.0が必要)

注: 「Take Over」モードは廃止されました。代わりに、新しい「ハイブリッド」モードが導入されました。このモードでは、Vue 言語サーバーが CSS/HTML セクションを排他的に管理します。そのため、 @vue/typescript-plugin使用する TypeScript サーバーと@vue/language-serverを組み合わせて実行する必要があります。以下は、バージョン2.0.0へのアップグレード後の言語サーバーに対応するために更新された、Neovim の LSP の合理化された構成です。

v1.0.0 より前の nvim-lspconfig バージョンの場合は、ts_ls の代わりに tsserver を使用します (例: lspconfig.ts_ls.setup

 -- mason.nvim を使用している場合は、次のように ts_plugin_path を取得できます-- local mason_registry = require('mason-registry')-- local vue_lang_server_path = mason_registry.get_package('vue- language-server'):get_install_path( ) .. '/node_modules/@vue/言語サーバー'ローカル vue_言語サーバー_パス = '/パス/to/@vue/言語サーバー'ローカル lspconfig = require('lspconfig')lspconfig.ts_ls.setup { init_options = {plugins = {
      {名前 = '@vue/typescript-plugin'、場所 = vue_lang_server_path、言語 = { 'vue' },
      }、
    }、
  }, ファイルタイプ = { '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 を使用します。

 local 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使用します。

 local 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-volar ?
Sublime 用の Vue 言語クライアント

kabiaa/atom-ide-volar
Atom 用の Vue 言語クライアント

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ ?
Emacs 用の Vue 言語クライアント

tommasongr/nova-vue
Nova 用の Vue 言語クライアント

xiaoxin-sky/lapce-vue
Lapce 用の Vue 言語クライアント

Kingwl/モナコヴォラール
ブラウザ上のモナコの Vue 言語サポート

ウェブストーム
@vue/language-serverの組み込み統合

Eclipse WildWeb開​​発者
Eclipse の Vue 言語サーバー構成

* ⚡ 複数のサーバーをサポート
* ?引き継ぎモードをサポート
* ⁉️追加のプレビュー機能をサポートする

貢献ガイド

volar 拡張機能で作業する場合は、次のコマンドに従ってローカル開発環境をセットアップします。

? pnpm が必要になることに注意してください。https://pnpm.io/installation からダウンロードできます。

 git clone https://github.com/vuejs/ language-tools.gitcd language-tools
pnpmインストール
pnpm ビルドを実行する

volar 拡張機能を開発するための推奨される方法は、VSCode が提供するデバッグ ツールを使用することです。あるいは、package.json ファイルで定義されているスクリプトの 1 つを実行することもできます。

❗ プロジェクトのルートで定義されたデバッグ起動構成または package.json スクリプトを常に使用する必要があります。

オープンソース プロジェクトに貢献するための追加情報は、https://docs.github.com/en/get-started/quickstart/contributing-to-projects でご覧いただけます。

アップストリームの Volar.js モジュールを使用して開発するには、https://github.com/volarjs/workspace でワークスペースをセットアップできます。