티스토리 뷰

Vim에 Node.js 환경 구축하기

  • 말이 Node.js지 사실 vim에서의 Javascript 개발 환경 구축이라고 봐도 무방하다..

하이라이팅이 날 미치게 해...!

하이라이팅이 없어 고통받는 개발자

  • 얼마전에 vim 플러그인들을 한번 정리했는데, 그 때 js 관련 플러그인 몇 개가 같이 갈려들어간 듯 하다.
  • 그리고 `String`나 ${} 같은 것들을 사용하기 시작했는데, 하이라이팅이 완전 똥망이다.
  • 이대로는 안된다..! 이번 기회에 vim을 렙업 좀 시키고 vim의 javascript 스탯에 투자를 해야겠다.

일단 Vim Plugin Manager Vundle을 설치해보자

Javascript 관련 플러그인들

  • 나는 주로 JavascriptNode.js와 가끔씩 쓸 일이 생기는 React.js를 사용해 개발하고 있으며, 최근에 ECMA2015 (ES6) 문법을 적용하여 열심히 사용 중이다.
  • 그래서 이와 관련된 플러그인들을 설치할 것이다.
  • Vundle을 사용하여 Plugin을 설치하는 방법을 일반적으로 테크를 타면 된다.
    1. 설정하려는 플러그인을 찾자 일반적으로 구글링, vim.org, vimawesome 등을 뒤적거리면 찾을 수 있다. 나는 vimawesome을 추천한다.
    2. ~/.vimrc 설정 파일 내부의 call vundle#begin() 구문과 call vundle#end() 구문 사이에 Plugin을 추가해주면 된다. 일반적으로 Plugin 'pluginName' 혹은 Plugin 'maker/pluginName'이다.
    3. vim에 실행하고 :VundleInstall을 입력하거나 터미널에서 vim +VundleInstall +q 명령어를 입력하면 된다.

pangloss/vim-javascript

  • vim-javascript 플러그인은 vim의 js 기본 Syntax Highlighting과 Indentation을 향상시켜준다.
    Plugin 'pangloss/vim-javascript'
  • es6 문법도 어느정도 지원해 주는 것 같다.

mxw/vim-jsx

  • React.js를 사용하다보면 필연적으로 jsx 문법을 사용하게 된다. 당연히 vim의 기본 하이라이팅과 인덴트는 지원을 해주지 않아서 vim으로 react 개발할 때 고통을 받는다.
  • vim-jsx는 jsx 문법의 하이라이팅과 인덴트를 지원해주는 플러그인이다.
  • 직접 확인한 것은 아니지만 바로 위의 vim-javascript 플러그인과 의존성이 있는 것 같다.
    Plugin 'pangloss/vim-javascript'
    Plugin 'mxw/vim-jsx''
  • 여담으로 생각보다 많은 사람들이 react 개발할 때 jsx 문법을 사용하더라도 파일의 확장자를 *.jsx로 하지 않고 *.js로 하는 경우가 많다. 이 플러그인을 *.js 확장자에도 적용하고 싶으면 .vimrc에 다음 설정 구문을 추가해주자. (call vundle#(begin|end)() 구문 외부에 추가해야한다.)
    let g:jsx_ext_required = 0
  • 사실 무슨 차이 나는지 잘 모르겠다.

isRuslan/vim-es6

  • Write JavaScript ES6 easily with vim. (vim에서 javascript es6를 쉽게 작성하세요.)
  • 사용하기 위해서는 SirVer/ultisnips 혹은 'garbas/vim-snipmate플러그인이 필요하다고 한다. 플러그인 자체에 스니펫 기능이 있어서 그런 듯. 나는 설치가 덜 귀찮아 보이는 ultisnips를 설치했다.
    Plugin 'SirVer/ultisnips'
    Plugin 'isRuslan/vim-es6'
  • 그런데 테스트를 해봤는데, 솔직히 큰 차이가 없는 것 같다. 혹시 vim-javascript와 충돌이 나나..?
    • vim-javascript에서 es6 문법을 어느정도 지원해주는 것 같다. (ex. Arrow Function)
  • 그냥 한번 추가해보고, 별로 바뀌는게 없다 싶으면 없애버려도 될 듯 하다. 참고로 플러그인 삭제는 .vimrc에서 플러그인 구문을 제거하고 vim에서 :VundleClean

마무리

  • 적용 전 하이라이팅이 없어 고통받는 개발자
  • 적용 후 하이라이팅이 잘 되니 고통을 덜 받는다.
  • 마음이 깨끗해지지고 정신이 맑아지는 기분이다.
  • 정리하고 보니 vim-javascript가 짱인 것 같다.
  • 뭔가 도움이 될 것 같은 URL

다음 TIL 예고 : 좀 더 심화된 기능

  • 다음 TIL에서는 youcompleteme를 사용하여 javascript 분석 도구인 ternvim에 붙이는 것을 해 볼 것이다. 나의 vim이 점점 IDE화 되어간다..


프로필사진

Yowu (Yu Yongwoo)

흔한 백엔드 개발자입니다
우분투 데스크탑 개발 환경을 선호합니다
최근에는 vscode에 neovim 모드 올려서 쓰고 있습니다
개발용 키보드는 역시 해피해킹 프로2 무각입니다
락 밴드에서 드럼을 쳤습니다

«   2020/09   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      
글 보관함
Total
2,943,830
Today
694
Yesterday
910