언어 도구

Vue 언어 도구

⚡ Volar.js 기반의 고성능 Vue 언어 도구

Discord 서버의 #언어 도구

패키지

• Vue 언어 기능
  Vue, Vitepress, VSCode용 petite-vue 언어 지원 확장

• vue-tsc
  유형 확인 및 dts 빌드 명령줄 도구

• vue-컴포넌트-메타
  구성요소 소품, 이벤트, 슬롯 유형 정보 추출 도구

• vite-플러그인-vue-구성요소-미리보기
  Vue Language Features 포함된 Vue 구성 요소 미리 보기 보기를 지원하는 Vite 플러그인

• @vue/language-server
  언어 서버 자체 .

• @vue/typescript-plugin
  언어 서버용 Typescript 플러그인 .

커뮤니티 통합

yaegassy/coc-volar ⚡ ? ?️
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 실행해야 합니다. 다음은 버전 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_언어_server_path = mason_registry.get_package('vue-언어-server'):get_install_path( ) .. '/node_modules/@vue/언어-서버'local vue_언어_server_path = '/path/to/@vue/언어-서버'local lspconfig = require('lspconfig')lspconfig.ts_ls.setup { init_options = {plugins = {
      {이름 = '@vue/typescript-plugin', 위치 = vue_언어_서버_경로, 언어 = { '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를 사용하세요.

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

.vue 파일에만 volar 사용하고 .ts 및 .js 파일에는 ts_ls 사용하세요.

 로컬 lspconfig = require('lspconfig')lspconfig.ts_ls.setup { init_options = {플러그인 = {
      {이름 = '@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 언어 클라이언트

토마송/노바뷰
Nova용 Vue 언어 클라이언트

xiaoxin-하늘/lapce-vue
Lapce용 Vue 언어 클라이언트

킹울/모나코볼라
브라우저에서 Monaco에 대한 Vue 언어 지원

웹스톰
@vue/language-server 대한 내장 통합

Eclipse WildWeb개발자
Eclipse용 Vue 언어 서버 구성

* ⚡ 여러 서버 지원
* ? 인계 모드 지원
* ?️ 추가 미리보기 기능 지원

기여 가이드

volar 확장 작업을 수행하려면 다음 명령을 따라 로컬 개발 환경을 설정하세요.

? pnpm이 필요합니다. https://pnpm.io/installation에서 다운로드할 수 있습니다.

 자식 클론 https://github.com/vuejs/언어-tools.gitcd 언어 도구
pnpm 설치
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를 사용하여 작업 공간을 설정할 수 있습니다.