VIM | prettier 적용하기

vscode 에서 nodejs 코딩을 하다보면 코드를 정렬해 주는 툴 중에 prettier라는 것이 있다. 이 기능을 vim에서도 사용할 수 있는 방법이 있다.

https://vimawesome.com/plugin/vim-prettier-who-speaks 에서 설치하는 방법을 따라서 할 수 있다.

Vundle 을 설치했다고 가정하고.

~/.vimrc 파일에 아래 옵션을 추가 한다

Plugin 'prettier/vim-prettier', { 'do': 'yarn install' }

1. :w를 통해 저장
2. :source %명령을 통해 소스를 적용 시킨다.
3. :PluginInstall 을 통해서 설치한다.

이제 yarn 을 통해서 설치해야 한다.

node 가 설치되어 있고, npm 이 설치 되어 있는 상태에서 진행을 해야 한다.
prettier를 사용하기 위해서는 npm이 필요하다.
$ npm -g install yarn를 통해서 global로 yarn을 설치하자.

vim-prettier가 설치되어 있는 폴더로 이동

$ cd ~/.vim/bundle/vim-prettier/

yarn을 통해서 vim-pretter에 필요한 모듈을 설치

$ yarn

참고

yarn = yarn install 과 같은 동작을 한다

이제 파일들을 수정하고 난 뒤에

:Prettier명령을 통해서 자동으로 정렬되는 것을 확인 할 수 있다.

저장할 때 자동으로 Prettier 적용하기

~/.vimrc파일 에 아래 항목을 추가 한다.

vim 8+ 버전에서

let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue,*.yaml,*.html PrettierAsync

기타 옵션에 대해서

VimAwesome페이지에서 더 많은 옵션을 찾을 수 있다.