Neovim Vue 설정

끔찍한 하얀 텍스트

Neovim에서 .vue 파일을 열었더니 하이라이팅도 자동완성도 없는 흰 글자만 보인다면, 아래 Lua 설정 20줄로 해결된다. lsp-zero와 Mason으로 LSP를 관리하는 경우를 기준으로 설명한다.

Vue.js 프로젝트를 시작하면서 잘 쓰던 Neovim 설정에 문제가 생겼다. Vue의 SFC(Single File Component, .vue 파일)는 template, style, script가 한 파일에 공존한다. 그래서 자동완성과 진단을 담당하는 LSP(Language Server Protocol) 서버도, 구문 트리를 기반으로 하이라이팅하는 Treesitter도 어느 언어로 다뤄야 할지 몰라 손을 놓아버렸다.

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

일단 임시로 오랜만에 VS Code로 돌아와 작업을 진행했는데, 이미 vim에 적응되어 버린 나에게 VS Code는 너무나도 불편했다. (그래도 다행히 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 설정을 간소화해주는 lsp-zero와 언어 서버를 설치, 관리해주는 Mason.nvim으로 LSP를 관리하고, treesitter로 syntax highlighting을 설정한다.

Vue 언어 서버(volar)의 공식 문서에 따르면, SFC에는 template, style, script가 공존하므로 TypeScript 서버와 Vue 서버가 역할을 나눠 맡는 Hybrid 모드로 실행되어야 한다. 아래 설정이 하는 일은 두 가지다. TypeScript 서버에 Vue 플러그인을 끼워 .vue 파일의 script를 이해하게 하고, volar는 나머지(template, style)를 맡는다.

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으로 돌아가자.. ㅎㅎㅎ