VS Code 統合

Warning

Vize のエディターサポートは実験段階です。Vue - Official（vuejs/language-tools）を使っている場合は、両方を並べて使えるよう lint だけを有効にする設定から始めるか、Vize のすべての機能を有効にする前にワークスペースで Vue - Official を無効にしてください。

リポジトリには、2 つの実験的な VS Code 拡張機能が含まれています。

Vize— vize lsp による Vue 言語サポート
Vize Art— Musea *.art.vue ファイルの構文ハイライト

VS Code マーケットプレイスからインストールします。

code --install-extension ubugeeei.vize
code --install-extension vize.vize-art

*.art.vue でも Vize のホバー、補完、定義への移動、参照検索を使えます。 Vize Art は art ファイルの構文ハイライトを提供します。

Vize 拡張機能

Vize 拡張機能は vize lsp を起動します。lint、型チェック、エディター支援などを個別に有効にできます。拡張機能や各機能が無効のまま Vue ファイルを開くと、ワークスペースに推奨設定を適用する操作が表示されます。この操作は vize.enable、vize.lint.enable、vize.typecheck.enable、vize.editor.enable を有効にします。手動で vize.enable: true だけを設定した場合も、推奨される診断とエディター支援が有効になります。ステータスバーの Vize をクリックすると Vize: Show Status が開きます。プロファイルの変更、サーバー実行ファイルの選択、再起動、設定、ログの確認をまとめて行えます。

lint だけを有効にして試す

{
  "vize.enable": true,
  "vize.lint.enable": true,
  "vize.typecheck.enable": false,
  "vize.editor.enable": false,
  "vize.formatting.enable": false
}

この設定では lint 診断だけを有効にします。定義への移動、補完、フォーマットは既存の Vue ツールに任せます。

共通設定

設定	目的
`vize.enable`	拡張機能と言語サーバーを有効にする
`vize.serverPath`	使用する `vize` 実行ファイルのパスを指定する
`vize.lint.enable`	lint 診断を有効にする
`vize.typecheck.enable`	型情報を使う診断とバックエンド機能を有効にする
`vize.editor.enable`	ホバーや補完などのエディター機能をまとめて有効にする
`vize.completion.enable`	補完を有効にする
`vize.formatting.enable`	ファイルのフォーマットを有効にする
`vize.definition.enable`	定義への移動を有効にする
`vize.references.enable`	参照検索を有効にする
`vize.hover.enable`	ホバーを有効にする
`vize.codeActions.enable`	lint クイックフィックスを有効にする
`vize.semanticTokens.enable`	セマンティックトークンを有効にする
`vize.trace.server`	LSP 通信をトレースする

便利なコマンド

コマンド	目的
`Vize: Show Status`	状態と初期設定の操作画面を開く
`Vize: Enable Recommended Profile`	lint、型チェック、およびエディター支援を有効にする
`Vize: Enable Lint-Only Profile`	他のツールを使用したまま診断を有効にする
`Vize: Select Language Server Executable`	ファイル選択画面で `vize.serverPath` を指定する
`Vize: Disable Language Server`	現在の設定対象の Vize を停止する
`Vize: Restart Language Server`	言語サーバーを再起動する
`Vize: Show Output Channel`	拡張機能と LSP ログを表示する

拡張機能が使用するもの

VS Code
  ↕ Language Server Protocol
vize lsp
  → parser and semantic analysis
  → lint rules
  → type checker
  → formatter

ソースまたは VSIX からのインストール

Vite+ インストールガイドに従って vp を用意し、次の手順を実行します。

git clone https://github.com/ubugeeei-prod/vize.git
cd vize
cd editors/vscode
vp install -- --ignore-workspace
vp pack
vp exec vsce package --no-dependencies --out dist/vize.vsix
code --install-extension dist/vize.vsix

Vize Art 拡張機能

Vize Art は、Musea の *.art.vue ファイルに構文ハイライトを提供します。マーケットプレイス拡張機能 ID は vize.vize-art です。

次のブロックを認識します。

<art> メタデータのブロック
<variant> ブロック
標準の Vue <template>、<script>、および <style> セクション

他のエディター

Tip

Zed、Neovim、Vim、Helix、Emacs の設定手順は言語サーバーのガイドを参照してください。

vize lsp は Language Server Protocol に対応しているため、Neovim、Helix、Zed、Emacs などでも利用できます。

同梱のプラグインを使う Neovim の設定例です。

-- editors/nvim from the Vize repository, Neovim 0.11+
require("vize").setup({
  init_options = {
    lint = true,
    typecheck = true,
    editor = true,
  },
})

editor = true を指定すると、ホバー、補完、定義への移動、参照検索、シンボル検索をまとめて評価できます。 tsgo など別の TypeScript サーバーでプロジェクトの診断を実行する場合は、typecheck = false にして、試したい Vue 固有の機能だけを有効にしてください。