FE 개발자를 위한 안드로이드 후려치기 #2 자바스크립트 인터페이스 만들기
2023-07-30
iTerm2, Vim, Zsh의 Syntax highlight를 비롯한 플러그인 및 테마 설정하기 (for Mac OS)
2019-02-23
Explanation
이것 저것 준비하느라 바빴는데, 오늘은 모처럼 바쁘지 않은 휴일이랍니다. 그래서 오늘은 뭘 할까 고민을 하다가 Vim 에디터 설정을 해보려고 합니다.
저는 코딩을 할때 서브라임 텍스트를 사용하는데요, 꽤 오랜시간 사용해 왔고 딱히 불편함 없이 잘 쓰고 있지만 앞으로는 Vim 에디터를 조금씩 써 보려고 합니다.(뭔가.. 멋있어서…)
지금 글을 쓰면서 진행하지 않고 꽤 오랜 시간의 이곳 저곳의 삽질과 중구 난방의 글들을 검색하며 설정을 한 후에 쓴 글이라 순서대로 따라하면 안될 수도 있어요. 잘 안되는 부분은 댓글 남겨주세요 :)
우선 저는 터미널을 사용하지는 않고 iTerm2 라는 프로그램을 사용합니다.
https://www.iterm2.com/ 이곳에 가셔서 다운로드 및 설치합니다.
우선 iTerm2의 컬러 설정인 .itermcolors 파일을 다운로드 받아야 하는데요. https://github.com/mbadolato/iTerm2-Color-Schemes 여기서 컬러 참고하시고 https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/schemes 여기서 다운로드 받으시면 됩니다.
그다음 iTerm2를 실행하시고 Preferences -> Profiles -> Colors으로 이동하시거나 단축키 [커맨드 + i] -> Colors 로 이동하신후 오른쪽 아래의 ‘color Presets…’ 셀렉트 박스를 클릭하신 후 ‘Import…’를 선택하셔서 아까 다운 받으신 .itermcolors 파일을 임폴트 해주시고 설정 해주시면 끝~
참고로 저는 서브라임 텍스트도 Ayu 컬러를 주로 사용하는데요. 위에 링크에는 없지만, https://github.com/hwyncho/ayu-iTerm에서 ‘ayu-Mirage.itermcolors’를 사용한답니다. Ayu의 Mirage Color는 대략 아래와 같아요.
제가 따로 Vim을 설치한 기억이 없는 것으로 보아 Mac에는 기본적으로 설치되어 있는거 같아요.
Vim에디터의 설정은
|
1 |
$ vi ~/.vimrc |
이 파일을 통해서 합니다. 기본적으로 vi 커맨드는 파일이 있으면 열고 없으면 저장하면 만들어지니까, 있던 없던 저렇게 입력하시면 되요.
추가로 .vimrc에서 주석은 “(큰따움표)가 한줄 주석입니다.
그럼 바로 몇가지 설정값을 넣어볼까요. 검색해보면 설정이 엄청 많고 편할 것 같은 설정도 많은데요. 우선은 초보이니까 몇가지 중요해보이는 몇가지만 우선 추가하였습니다.
|
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 |
" 검색어 하이라이트 set hlsearch " 검색시 대소문자 구분 set smartcase " 현재 커서 위치 표시 set ruler " 자동으로 들여쓰기 set autoindent set cindent " 왼쪽에 몇번째 줄인지 출력 set nu " Tab 너비 값 set ts=2 " 자동으로 들여쓰기할 너비 값 set shiftwidth=2 " 접근했을때 마지막으로 수정한 곳에서 커서를 위치합니다. au BufReadPost * \ if line("'\"") > 0 && line("'\"") <= line("$") | \ exe "norm g`\"" | \ endif " 신텍스 켬 syntax on |
전 우선 이 정도 설정을 하였습니다.
우선은 Zsh가 설치되어 있는지 확인합니다.
|
1 |
$ zsh --version |
설치되어 있지 않다면 brew를 사용해서 설치합니다.
|
1 |
$ brew install zsh |
혹시나 Homebrew도 설치되어 있지 않다면 먼저 아래의 링크로 이동하여 설명에 따라 설치합니다.
https://brew.sh/index_ko
다음으로 ‘Oh My Zsh’를 설치합니다. 저는 curl을 사용해서 설치하였습니다.
|
1 |
$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" |
이렇게 설치가 끝났다면 Zsh의 플러그인일 설치하도록 하겠습니다.
저는 ‘zsh-syntax-highlighting’와 ‘zsh-autosuggestions’ 이렇게 2가지를 설치하였는데요. 이름 그대로 첫번째는 신택스 하이라이팅, 두번째는 자동완성 기능입니다.
Oh My Zsh 의 플러그인 설치 경로는 저 같은 경우에는 아래와 같았어요.
|
1 |
/Users/falsy/.oh-my-zsh/custom/plugins |
저기서 ‘falsy’는 자신의 컴퓨터 사용자명 입니다.
그러면 저기의 플러그인 디렉토리로 이동해서 제가 설치한 2개의 플러그인을 설치하도록 하겠습니다.
|
1 2 3 4 5 6 |
# 플러그인 디렉토리로 이동 $ cd /Users/falsy/.oh-my-zsh/custom/plugins # zsh-syntax-highlighting 설치 $ git clone https://github.com/zsh-users/zsh-syntax-highlighting.git # zsh-autosuggestions 설치 $ git clone https://github.com/zsh-users/zsh-autosuggestions |
그리고 마지막으로 설치된 플러그인을 연결해줍니다. vim 설정과 비슷하게 아래의 파일을 열어서 수정합니다.
|
1 |
$ vi ~/.zshrc |
위 커맨드로 설정파일을 열고 쭉 내려가다보면 아래와 같은 부분이 나오면
|
1 2 3 4 5 |
... plugins=( git ) ... |
이렇게 수정합니다.
|
1 2 3 4 5 |
plugins=( git zsh-syntax-highlighting zsh-autosuggestions ) |
여기까지 하면 Zsh 설정 끝.
다음으로 Vim 플러그인을 설치합니다.
플러그인을 설치하는데 몇가지 방법이 있는데요, 많은 방법이 있는 것 같지만 저는 ‘Vundle’과 ‘Plug’를 짧게 사용해보았습니다. 우선은 Vundle을 사용해보도록 할게요
|
1 |
$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim |
터미널에서 위 명령어를 입력하여 설치합니다. 그리고 아까 수정했던 vimrc 파일을 다시 열어 수정합니다.
|
1 |
$ vi ~/.vimrc |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... set nocompatible filetype off set rtp+=~/.vim/bundle/Vundle.vim call vundle#begin() " 이곳에 플러그인을 추가합니다. Plugin 'scrooloose/syntastic' call vundle#end() filetype plugin indent on |
위와 같이 추가하시고, 이제 저 사이에 플러그인을 추가하면 되는데요. 역시.. 플러그인이 엄청 많은데요. 필요한 부분은 검색하셔서 ‘call vundle#begin()’와 ‘call vundle#end()’ 사이에 추가하시면 됩니다.
한가지 예를 들어서 우선 ‘syntastic’라는 플러그인을 적어놓았는데요, 문법 에러가 발생하면 알려주는 플러그인 입니다.
이렇게 작성하시고 Vim 에디터를 종료하지 않고 일반 모드에서 : 를 눌러서 명령어 입력 상태로 만든 후 PluginInstall 라는 명령어로 해당 플러그인을 설치합니다.
Done! 이라는 출력으로 설치가 끝나면 :q -> :wq! 명령어로 편집을 종료합니다.
참고로 제가 설치한 플러그인 목록은 아래와 같습니다. 그리고 그 아래에 있는 내용은 플러그인 정보를 검색할때 저렇게 추가하라고 적혀있어서 추가한 부분입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Plugin 'jelera/vim-javascript-syntax' Plugin 'pangloss/vim-javascript' Plugin 'nathanaelkane/vim-indent-guides' Plugin 'Raimondi/delimitMate' Plugin 'marijnh/tern_for_vim' Plugin 'scrooloose/syntastic' Plugin 'vim-airline/vim-airline' Plugin 'airblade/vim-gitgutter' Plugin 'tpope/vim-fugitive' Plugin 'ctrlpvim/ctrlp.vim' Plugin 'Valloric/YouCompleteMe' imap <C-c> <CR><Esc>O let g:syntastic_check_on_open=1 let g:ycm_add_preview_to_completeopt=0 let g:ycm_confirm_extra_conf=0 set completeopt-=preview |
Color scheme라고 하는 설정을 하는 건데요, 직접 해당 컬러 디렉토리에 .vim 설정 파일을 넣는 방법과 플러그인을 설치하는 방법으로 이렇게 두가지 방법이 있습니다.
첫번째 방법으로 mango.vim라는 Color Scheme를 다운로드 받아서 적용해볼게요. 우선 https://www.vim.org/scripts/script.php?script_id=3779이곳으로 이동해서 mango.vim을 다운로드 받으신 후에
|
1 |
/usr/share/vim/vim**/colors/ |
여기서 ** 은 버전값 입니다. 저는 vim80 이에요.
저 위에 디렉토리에 넣으시면 되는데요. 저는 여기에서 몇시간을 애먹었네요… 최신 버전의 Mac OS에서는 root 권한으로도 /usr 디렉토리에 내용을 추가하거나 수정할 수 없도록 되어 있더라고요. 한참을 찾아 떠돌다.. 역시나 해답은 스텍오버플로우에 있었습니다.
간단하게 이야기하면 컴퓨터를 재부팅하고 화면에 사과가 뜨기전에 커맨드 + R 키를 눌러서 시스템 복구 모드로 진입하고 그곳에서 터미널을 열고 ‘csrutil disable’ 라는 명령어를 입력한 후 다시 컴퓨터를 재부팅 하시면 관리자 권한으로 /usr 디렉토리도 수정이 가능합니다.
참고 링크 : https://apple.stackexchange.com/questions/208478/how-do-i-disable-system-integrity-protection-sip-aka-rootless-on-macos-os-x
성공적으로 …/colors/ 디렉토리에 .vim 파일을 넣으셨다면 다시 .vimrc 파일을 열어 수정합니다.
|
1 |
$ vi ~/.vimrc |
|
1 2 3 |
... color mango |
이렇게 한줄을 추가해주시면 끝~
다음 두번째 방법은 플러그인을 이용한 방법인데요, 훨씬 간단해요. 앞서 이야기한 플러그인 설치 방법으로 .vimrc 파일에 추가하면 된답니다.
|
1 |
$ vi ~/.vimrc |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... set rtp+=~/.vim/bundle/Vundle.vim call vundle#begin() ... Plugin 'dracula/vim' ... call vundle#end() filetype plugin indent on ... color dracula |
dracula라는 Color Scheme을 예로 들어 작성해보면 위와 같습니다. 그리고 :PluginInstall 명령어를 실행하여 설치하면 끝~
참고.
* https://medium.com/sunhyoups-story/vim-%EC%97%90%EB%94%94%ED%84%B0-%EC%9D%B4%EC%81%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-5b6b8d546017″
* https://bluesh55.github.io/2016/10/09/vim-ide/
* https://github.com/VundleVim/Vundle.vim
* https://nine-hundred.github.io/Blog/vim%EC%9D%98-Color-Scheme%EC%84%A4%EC%A0%95%EB%B0%A9%EB%B2%95/
* http://hochulshin.com/osx-vi-javascript/
* http://www.dreamy.pe.kr/zbxe/CodeClip/3769409
* https://ringsterz.wordpress.com/2015/01/23/mac-os%EC%9D%98-vim%EC%97%90%EC%84%9C-syntax-highlight-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/
* https://blog.seotory.com/post/2017/12/start-zsh-and-zplug-and-oh-my-zsh
* https://beomi.github.io/2017/07/07/Beautify-ZSH/
* https://nachwon.github.io/how-to-install-zsh-plugins/
