языковые инструменты

Инструменты языка Vue

⚡ Высокопроизводительные инструменты языка Vue на основе Volar.js.

#language-tools на нашем сервере Discord

Пакеты

• Возможности языка Vue
  Расширение поддержки языка Vue, Vitepress, petite-vue для VSCode

• vue-tsc
  Инструмент командной строки для проверки типов и сборки dts

• vue-компонент-мета
  Инструмент извлечения информации о свойствах компонентов, событиях, типах слотов

• Vite-плагин-vue-компонент-предварительный просмотр
  Плагин Vite для поддержки предварительного просмотра компонентов Vue с Vue Language Features

• @vue/language-server
  Сам языковой сервер .

• @vue/typescript-plugin
  Плагин Typescript для языкового сервера .

Интеграция сообщества

yaegassy/coc-volar ⚡ ? ?️
Языковой клиент Vue для coc.nvim

neovim/nvim-lspconfig ⚡ ?
Конфигурация языкового сервера Vue для Neovim

Как настроить языковой сервер vue с neovim и lsp?

Конфигурация гибридного режима (требуется @vue/language-server версии ^2.0.0 )

Примечание. Режим «Взять на себя» больше не поддерживается. Вместо этого был введен новый «Гибридный» режим. В этом режиме языковой сервер Vue управляет исключительно разделами CSS/HTML. В результате вам необходимо запустить @vue/language-server вместе с сервером TypeScript, который использует @vue/typescript-plugin . Ниже приведена упрощенная конфигурация LSP Neovim, обновленная для поддержки языкового сервера после обновления до версии 2.0.0 .

Для версий nvim-lspconfig ниже v1.0.0 используйте 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 = {
      {name = '@vue/typescript-plugin',location = vue_language_server_path,languages ​​= { '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.

Используйте volar для всех файлов .{vue,js,ts,tsx,jsx} .

 local lspconfig = require('lspconfig') -- lspconfig.ts_ls.setup {} lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = {vue = {гибридный режим = ложь,
    },
  },
}

Используйте volar только для файлов .vue и ts_ls для файлов .ts и .js .

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

интеграция nvim-cmp

Посмотрите это обсуждение

mattn/vim-lsp-настройки ⚡
Автоматическая настройка языкового сервера Vue для vim-lsp

сублимелсп/LSP-волар ?
Языковой клиент Vue для Sublime

кабиаа/атом-иде-волар
Языковой клиент Vue для Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ ?
Языковой клиент Vue для Emacs

tommasongr/nova-vue
Языковой клиент Vue для Nova

xiaoxin-sky/lapce-vue
Языковой клиент Vue для Lapce

Кингвл/Монако-Волар
Поддержка языка Vue для Монако в браузере

ВебШторм
Встроенная интеграция с @vue/language-server

Eclipse WildWebРазработчик
Конфигурация языкового сервера Vue для Eclipse

* ⚡ поддержка нескольких серверов
* ? поддержка режима захвата
* ?️ поддержка дополнительных функций предварительного просмотра

Руководство по вкладу

Если вы хотите работать над расширением volar, следуйте этим командам, чтобы настроить локальную среду разработки.

? Обратите внимание, что вам понадобится pnpm — скачать его можно здесь: https://pnpm.io/installation.

 git clone 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.