Typescript 개발을 위한 Neovim 설정

theminimalistdeveloper.com에 원래 게시됨

소개

가장 먼저 해야 할 일, 맞죠? 예. 그래서 저는 새로운 프로그래밍 언어를 배우기 시작할 때마다 Typescript 배우고 있습니다. 저는 개발 환경을 설정하는 것부터 시작합니다.

코드 스니펫, 테스트 등을 제대로 실행하는 데 필요한 모든 것입니다. 빌드를 시작하기 위한 견고한 기반처럼 느껴집니다.

제가 선택한 무기는 Neovim 이므로 여기에서는 자동 완성, 정의로 이동, 코드 유효성 검사, 문서 표시 및 모든 좋은 기능을 갖춘 Typescript용 개발 환경을 갖추는 데 필요한 사항을 설명하겠습니다.

요구 사항

이 게시물은 특히 Typescript 개발에 필요한 구성 요소에 중점을 둘 것입니다. 이미 Neovim을 설치 및 구성했다고 가정합니다. 귀하의 경우가 아니라면 당황하지 마십시오! this 네오빔이 무엇이고 설치하는 방법에 대한 포인트 포스트까지 짧고 직선적으로 확인하세요.

힘내

🔗 git-scm.com

Coc 및 해당 확장에는 Git이 필요합니다. 모든 개발자가 자신의 컴퓨터에 Git을 가지고 있다고 가정하는 것이 타당하지만 미안한 것보다 안전한 것이 더 낫습니다. :D

노드JS

🔗 nodejs.org

코드를 컴파일한 후 실행해야 합니다. 현재 12버전을 사용하고 있습니다.

플러그

🔗 github.com/junegunn/vim-plug

Plug는 Vim/Neovim용 플러그인 관리자입니다. Vim 또는 Neovim의 다른 플러그인 관리자를 사용하여 동일한 결과를 얻을 수 있지만 이 게시물을 따라 하려면 플러그인을 설치하는 것이 더 쉽습니다.

설치

CoC

🔗 github.com/neoclide/coc.nvim

CoC 또는 Conquer of Completion은 적절한 자동 완성, 정의로 이동, 문서 표시, 리팩토링 도구 등과 같은 많은 훌륭한 기능을 제공하기 위해 언어 서버와 인터페이스하는 플러그인입니다.

CoC의 설치는 매우 간단합니다. init 파일에 다음 행을 추가하기만 하면 됩니다.

Plug 'neoclide/coc.nvim', {'branch': 'release'}

그리고 Neovim에서 실행합니다.

:PlugInstall

init 파일에 나열된 플러그인을 설치하기 위한 Plug의 명령입니다. 초기화 파일을 다시 소싱하는 것을 잊지 마십시오.

source /path/to/your/init.vim

CoC Tsserver 확장

🔗 github.com/neoclide/coc-tsserver

CoC 플러그인 자체는 우리에게 별로 도움이 되지 않습니다. 원하는 기능을 추가하려면 확장 프로그램을 설치해야 합니다.

해당 확장자는 Typescript 및 Javascript용 언어 서버인 Tsserver라고 합니다.

설치하려면 Neovim에서 다음 명령을 실행하십시오.

:CocInstall coc-tsserver

모든 것이 예상대로 진행되었는지 확인하려면 다음을 실행하십시오.

:CocList extensions

이렇게 하면 CoC용으로 설치된 모든 확장이 있는 창이 열리며 다음과 같은 목록이 표시되어야 합니다.

+ coc-tsserver 1.5.6 ~/.config/coc/extensions/node_modules/coc-tsserver

그것은 모든 것이 정확하다는 것을 의미합니다!

그렇다면 이 확장 프로그램에서 무엇을 기대할 수 있습니까?
공식 Github 저장소의 기능 목록은 다음과 같습니다.

Supports javascript & typescript and jsx/tsx.

Installs typings automatically.

Commands to work with tsserver, including:

• tsserver.reloadProjects

• tsserver.openTsServerLog

• tsserver.goToProjectConfig

• tsserver.restart

• tsserver.organizeImports

• tsserver.watchBuild

Code completion support.

Go to definition.

Code validation.

Document highlight.

Document symbols of current buffer.

Folding and folding range of current buffer.

Format current buffer, range format, and format on type.

Hover for documentation.

Implementations codeLens and references codeLens.

Organize imports command.

Quickfix using code actions.

Code refactor using code actions.

Find references.

Signature help.

Rename symbols support.

Rename imports on file rename, require watchman installed in your $PATH.

Search for workspace symbols.

꽤 달콤한 목록이죠?

결론

지금까지 살펴본 바와 같이 Neovim 및 CoC를 사용하여 즉시 전체 Typescript 설정을 실행하는 것은 그리 어렵지 않습니다.
우리가 조정하고 개선할 수 있는 것이 훨씬 더 많습니다. 이것은 Neovim에서 Typescript를 사용하기 위한 최소한의 작업입니다.

다음으로 Tsserver CoC 확장 프로그램과 다른 멋진 Neovim 플러그인에 대해 좀 더 자세히 살펴보겠습니다!