เครื่องมือภาษา

เครื่องมือภาษา Vue

⚡ เครื่องมือภาษา Vue ประสิทธิภาพสูงที่ใช้ Volar.js

#เครื่องมือภาษา บนเซิร์ฟเวอร์ Discord ของเรา

แพ็คเกจ

• คุณสมบัติภาษาวิว
  Vue, Vitepress, ส่วนขยายการรองรับภาษา petite-vue สำหรับ VSCode

• วิว-tsc
  เครื่องมือตรวจสอบประเภทและเครื่องมือบรรทัดคำสั่ง dts build

• vue-ส่วนประกอบ-meta
  อุปกรณ์ประกอบฉาก เหตุการณ์ เครื่องมือแยกข้อมูลประเภทสล็อต

• vite-plugin-vue-component-ตัวอย่าง
  ปลั๊กอิน 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 )

หมายเหตุ: โหมด "Take Over" ถูกยกเลิกแล้ว แต่กลับมีการนำโหมด "ไฮบริด" ใหม่มาใช้แทน ในโหมดนี้ Vue Language Server จะจัดการส่วน 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 = need('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 = need('lspconfig')lspconfig.ts_ls.setup { init_options = {ปลั๊กอิน = {
      {name = '@vue/typescript-plugin',location = vue_language_server_path,ภาษา = { '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} ทั้งหมด

 lspconfig ท้องถิ่น = ต้องการ ('lspconfig') -- lspconfig.ts_ls.setup {} lspconfig.volar.setup { ประเภทไฟล์ = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = {vue = { โหมดไฮบริด = เท็จ
    -
  -
-

ใช้ volar สำหรับไฟล์ .vue เท่านั้น และ ts_ls สำหรับไฟล์ .ts และ .js

 lspconfig ท้องถิ่น = ต้องการ ('lspconfig') lspconfig.ts_ls.setup { init_options = {ปลั๊กอิน = {
      {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

sublimelsp/LSP-volar ?
ไคลเอนต์ภาษา Vue สำหรับ Sublime

คาเบีย/อะตอม-ไอด์-โวลาร์
ไคลเอ็นต์ภาษา Vue สำหรับ Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ ?
ไคลเอนต์ภาษา Vue สำหรับ Emacs

ทอมมาซองเกอร์/โนวา-วู
ไคลเอนต์ภาษา Vue สำหรับ Nova

xiaoxin-sky/lapce-vue
ไคลเอนต์ภาษา Vue สำหรับ Lapce

Kingwl/โมนาโก-โวลาร์
รองรับภาษา Vue สำหรับโมนาโกบนเบราว์เซอร์

เว็บสตอร์ม
บูรณาการในตัวสำหรับ @vue/language-server

นักพัฒนา Eclipse WildWeb
การกำหนดค่าเซิร์ฟเวอร์ภาษา Vue สำหรับ Eclipse

* ⚡ รองรับหลายเซิร์ฟเวอร์
- รองรับโหมดเทคโอเวอร์
- ? รองรับคุณสมบัติการแสดงตัวอย่างเพิ่มเติม

คู่มือการบริจาค

หากคุณต้องการทำงานกับส่วนขยาย volar ให้ทำตามคำสั่งเหล่านี้เพื่อตั้งค่าสภาพแวดล้อมการพัฒนาในเครื่องของคุณ

- โปรดทราบว่าคุณจะต้องมี pnpm - คุณสามารถดาวน์โหลดได้ที่นี่: https://pnpm.io/installation

 git clone https://github.com/vuejs/ language-tools.gitcd ภาษาเครื่องมือ
ติดตั้ง pnpm
pnpm รันบิลด์

วิธีที่แนะนำในการพัฒนา volar extension คือการใช้ Debug Tools ที่ได้รับจาก VSCode หรือคุณสามารถเรียกใช้สคริปต์ตัวใดตัวหนึ่งที่กำหนดไว้ในไฟล์ package.json

❗ คุณควรใช้การกำหนดค่าการเริ่มต้นการแก้ไขข้อบกพร่องหรือสคริปต์ package.json ที่กำหนดไว้ในรูทของโปรเจ็กต์เสมอ

ข้อมูลเพิ่มเติมสำหรับการมีส่วนร่วมในโครงการโอเพ่นซอร์สสามารถพบได้ที่นี่: https://docs.github.com/en/get-started/quickstart/contributing-to-projects

หากต้องการพัฒนาด้วยโมดูล upstream Volar.js คุณสามารถตั้งค่าพื้นที่ทำงานด้วย https://github.com/volarjs/workspace