Neovim Vue.js 설정

끔찍한 하얀 텍스트

Vue.js 프로젝트를 시작하게 되면서 기존에 작업했던 Neovim 설정들에 문제가 발생하였었다.

*.vue로 끝나는 확장자의 SFC (Single File Component)을 편집하게 되면
template, style, script가 모두 한 파일에 존재하여 기존의 vim LSP와 Treesitter가 동작하지 못하여 syntax highlightingr과 intellisense를 사용하는 데 어려움이 있었다.

Intellisense와 Syntax highlighting이 없는 끔찍한 하얀 텍스트

일단 임시로 오랜만에 VSC로 돌아와 작업을 진행하였는데, 이미 vim에 적응되어 버린 나에게 VSC는 너무나도 불편했다.
(그래도 다행히 vim Extension이 많은 도움이 되었다.)

차츰 프로젝트가 정리가되어 Neovim 설정을 손보아 Vue.js의 SFC도 작업할 수 있도록 설정하였다.

RTM (Read the Manual)

진작에 README를 읽어야했다 😂

vue-language-server의 README에는 친절하게도 "How to configure vue language server with neovim and lsp?"라는 섹션이 있었고, 여기에 해답이 있었다.

나의 해결 설정

우선 나는 lsp-zero 그리고 Mason.nvim을 통하여 LSP를 관리하고, treesitter를 사용하여 syntax-highlighting을 설정한다.

volar의 공식문서에 따르면 Vue의 SFC는 template, style, script가 공존하므로 다양한 LSP의 협업(?)이 필요하기에 Hybrid 모드로 실행되어야 한다고 한다.

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 lspconfig = require("lspconfig")

-- Typescript Language Server에 Vue 플러그인을 사용하여 Hybrid 모드로 실행하기 위한 설정을 추가한다.
lspconfig.ts_ls.setup({
	init_options = {
		plugins = {
			{
				name = "@vue/typescript-plugin",
				location = vue_language_server_path,
				languages = { "vue" },
			},
		},
	},

	filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" },
})
lspconfig.volar.setup({})

그리고 SFC에는 타입스크립트, CSS 등이 공존하기에 필요한 Treesitter를 다음 커맨드로 설치한다.
TSInstall typescript, TSInstall vue, TSInstall css

결과물

이제 다시 Vim으로 돌아가자.. ㅎㅎㅎ