Sprachwerkzeuge

Vue-Sprachtools

⚡ Leistungsstarke Vue-Sprachtools basierend auf Volar.js

#Sprachtools auf unserem Discord-Server

Pakete

• Vue-Sprachfunktionen
  Vue, Vitepress, Petite-Vue-Sprachunterstützungserweiterung für VSCode

• vue-tsc
  Typprüfung und DTS-Build-Befehlszeilentool

• vue-component-meta
  Tool zum Extrahieren von Informationen zu Komponenten-Requisiten, Ereignissen und Slot-Typen

• vite-plugin-vue-component-preview
  Vite-Plugin zur Unterstützung der Vorschauansicht von Vue-Komponenten mit Vue Language Features

• @vue/language-server
  Der Sprachserver selbst .

• @vue/typescript-plugin
  Typescript-Plugin für den Sprachserver .

Community-Integration

yaegassy/coc-volar ⚡ ? ?️
Vue-Sprachclient für coc.nvim

neovim/nvim-lspconfig ⚡ ?
Vue-Sprachserverkonfiguration für Neovim

Wie konfiguriere ich den Vue-Sprachserver mit Neovim und LSP?

Konfiguration des Hybridmodus (erfordert @vue/language-server Version ^2.0.0 )

Hinweis: Der Modus „Übernehmen“ wurde eingestellt. Stattdessen wurde ein neuer „Hybrid“-Modus eingeführt. In diesem Modus verwaltet der Vue Language Server ausschließlich die CSS/HTML-Abschnitte. Daher müssen Sie @vue/language-server in Verbindung mit einem TypeScript-Server ausführen, der @vue/typescript-plugin verwendet. Nachfolgend finden Sie eine optimierte Konfiguration für Neovims LSP, die nach dem Upgrade auf Version 2.0.0 aktualisiert wurde, um den Sprachserver zu unterstützen.

Für nvim-lspconfig-Versionen unter v1.0.0 verwenden Sie tsserver anstelle von ts_ls, z. B. lspconfig.ts_ls.setup

 – Wenn Sie mason.nvim verwenden, können Sie den ts_plugin_path wie folgt abrufen: local mason_registry = require('mason-registry') ) .. '/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_sprache_server_pfad,sprachen = { 'vue' },
      },
    },
  }, filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}-- „hybridMode“ muss nicht auf „true“ gesetzt werden, da es sich um den Standardwert handeltlspconfig.volar.setup {}

Konfiguration des Nicht-Hybrid-Modus (ähnlich dem Übernahmemodus) (Erfordert @vue/language-server Version ^2.0.7 )

Hinweis: Wenn hybridMode auf false gesetzt ist, führt Volar eingebettetes ts_ls aus, daher besteht keine Notwendigkeit, es separat auszuführen.

Weitere Informationen finden Sie unter #4119

Stellen Sie sicher, dass Typescript global installiert ist, oder übergeben Sie den Speicherort an volar

Verwenden Sie volar für alle .{vue,js,ts,tsx,jsx} -Dateien.

 local lspconfig = require('lspconfig')-- lspconfig.ts_ls.setup {} lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = {vue = { hybridMode = false,
    },
  },
}

Verwenden Sie volar nur für .vue -Dateien und ts_ls für .ts und .js Dateien.

 local lspconfig = require('lspconfig')lspconfig.ts_ls.setup { init_options = {plugins = {
      {name = '@vue/typescript-plugin',location = '/path/to/@vue/sprache-server',sprachen = { 'vue' },
      },
    },
  },
}lspconfig.volar.setup { init_options = {vue = { hybridMode = false,
    },
  },
}

nvim-cmp-Integration

Schauen Sie sich diese Diskussion an

mattn/vim-lsp-settings ⚡
Automatische Konfiguration des Vue-Sprachservers für vim-lsp

sublimelsp/LSP-volar ?
Vue-Sprachclient für Sublime

kabiaa/atom-ide-volar
Vue-Sprachclient für Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ ?
Vue-Sprachclient für Emacs

tommasongr/nova-vue
Vue-Sprachclient für Nova

xiaoxin-sky/lapce-vue
Vue-Sprachclient für Lapce

Kingwl/monaco-volar
Vue-Sprachunterstützung für Monaco im Browser

WebStorm
Integrierte Integration für @vue/language-server

Eclipse WildWebDeveloper
Vue-Sprachserverkonfiguration für Eclipse

* ⚡ unterstützt mehrere Server
* ? Unterstützung Übernahmemodus
* ?️ unterstützen zusätzliche Vorschaufunktionen

Beitragsleitfaden

Wenn Sie an der Volar-Erweiterung arbeiten möchten, befolgen Sie diese Befehle, um Ihre lokale Entwicklungsumgebung einzurichten.

? Beachten Sie, dass Sie pnpm benötigen – Sie können es hier herunterladen: https://pnpm.io/installation.

 Git-Klon https://github.com/vuejs/lingual-tools.gitcd language-tools
pnpm installieren
pnpm run build

Die empfohlene Methode zum Entwickeln der Volar-Erweiterung ist die Verwendung der von VSCode bereitgestellten Debug-Tools. Alternativ können Sie eines der in der Datei package.json definierten Skripte ausführen.

❗ Sie sollten immer die Debug-Startkonfigurationen oder package.json-Skripte verwenden, die im Stammverzeichnis des Projekts definiert sind.

Weitere Informationen zum Mitwirken an Open-Source-Projekten finden Sie hier: https://docs.github.com/en/get-started/quickstart/contributing-to-projects

Um mit vorgelagerten Volar.js-Modulen zu entwickeln, können Sie einen Arbeitsbereich mit https://github.com/volarjs/workspace einrichten.