VSCode Terminal Customizing
서버에서 vscode 터미널 많이들 사용하고 계시죠?!! 캠퍼여러분들께 도움이되는 터미널 커스텀에 대해서 소개해드릴까 합니다!
vscode의 default terminal은 bash로, 커스터마이징의 끝은 순정이라고는 하지만.. zsh의 강력함을 한 번 맛보면 bash로 돌아가기가 정말 힘듭니다.
그러면.. zsh는 뭐가다른데?! 이미지 한장으로 보여드릴게요. 결과는 아래와 같습니다.
딱봐도 엄청나죠..!!!? 위의 것들은 oh-my-zsh과 powerlevel10k, 그리고 zsh-autosuggestions 과 zsh-syntax-highlighting 이라는 플러그인을 적용한 모습입니다. 여러분들도 이대로만 따라하시면 위와같은 스마트한 기능과 멋을 가진 매력적인 터미널을 얻을 수 있습니다!
자 그렇다면 지금부터 본격적인 세팅 들어갑니다. 레쓰기릿!!
- Linux 환경을 전제로 둔 방법입니다. MacOS나 Window사용자분들은 주의해주세요!
목차
1. Prev Installation
2. install oh-my-zsh
3. install zsh plugins
4. install powerlevel10k & config p10k
5. color customizing
Prev Installation
curl 만 설치되어있다면 모든 것을 할 수 있습니다. curl 이 깔려있지 않다면, 터미널을 열고
1 | apt-get install curl |
위의 명령어를 타이핑하여 curl 설치를 먼저 진행해주세요!
저는 이미 깔려있기 때문에, 처음 설치하는 분들은 다른 메세지가 출력될 거에요! 아무튼 저렇게 쫘르르르르륵 나오고 설치가 완료되었다는 메세지가 나타나면 성공!
Install oh-my-zsh
위에서 설치한 curl을 가지고 oh-my-zsh 를 설치하는 단계입니다.
1 | sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" |
oh-my-zsh 는 오픈소스 프로젝트로, zsh을 자유롭게 customizing 할 수 있는 프레임워크입니다.
위와 같은 메세지가 나타나면 성공!
자, 그럼 저희는 한 번의 복붙으로 oh-my-zsh에서 지원하는 여러 테마를 사용할 수 있게 되었어요!! agnoster 와 같은 이쁜 테마도 있긴 하지만, 저희는 조금 더 강력하고 자유로운 커스텀이 쉬운 powerlevel10k 라는 녀석을 사용해보도록 할거에요!
잠깐, 그전에!! 먼저 유용한 zsh plugins 부터 설치하고 갈게요!
Install zsh plugins
Vim에 대한 유명한 일화를 아시나요..? (대충 수십년간 빔을 사용한 개발자에게 왜 빔만 쓰냐고 물어봤더니, ‘나가는 법을 몰라서’라고 대답하는 짤) Vim을 메인으로 사용하는 개발자들은 대부분 굉장한 자부심은 물론, Customizing에 대한 엄청난 실력을 가지고 있는데요! 그래서 그분들이 shell 기반에서 편리하게 사용할 수 있는 플러그인들을 엄청나게 많이 만들어놓았다는 사실…!!
그 중에 두 가지 유명한 플러그인을 소개해드릴까 합니다!
Auto Suggestions
zsh-autosuggestions는 이전에 한번이라도 타이핑했던 command line이 있으면, 흐릿한 글씨로 이전에 타이핑했던 command를 제안해주는 기능입니다.
설치방법은 아래와 같습니다.
1 | git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions |
설치가 완료되었다면, ~/.oh-my-zsh/custom/plugins 라는 경로에 zsh-autosuggestions 라는 폴더가 생겨있을거에요! 이것을 zsh 에 반영을 시켜주어야 합니다.
oh-my-zsh를 설치하면 자동으로 root 디렉토리에 .zshrc 라는 파일이 생기는데요, vscode를 root 디렉토리로 여신 다음, .zshrc 파일을 클릭하여 에디터로 띄워줍니다.
쭈우우욱 내리다보면
plugins=(git) 이라고 되어있는 라인을 찾으실 수 있을텐데요! 이 부분을 위와같이 plugins=(git zsh-autosuggestions) 로 바꿔주기만 하면 끝입니다!
바로 이어서 syntax highlighting도 설치해볼까요?!
Syntax Highlight
syntax highligh 기능은 적절한 리눅스 command라던지, 이전에 설정했던 올바른 alias가 typing 되었다면 색을 바꿔주는 녀석을 말합니다! default 색상은 올바른 command면 녹색, 틀린 command면 빨간색으로 표시가 돼요!
설치방법은 아래와 같습니다.
1 | git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting |
이 친구도 크게 다를게 없습니다. auto suggestions 처럼 위와 같이 git clone을 이용하여 플러그인을 받아줍니다.
설치가 되었다면 역시나 ~/.oh-my-zsh/custom/plugins 라는 경로에 zsh-syntax-highlighting 이라는 폴더가 생겨있을거에요. 위와 똑같이 zshrc 에서 plugins=(git zsh-autosuggestions)를 찾은다음 plugins=(git zsh-autosuggestions zsh-syntax-highlighting) 으로 수정해주시면 됩니다.
이러면 이제 설치가 끝난 것이나 다름없는데요, 최종적으로 zsh에 반영하기 위해서는
1 | source ~/.zshrc |
위처럼 source command를 이용하여 수정한 zshrc의 내용을 zsh에 반영시켜주어야 합니다!
source 까지 끝났다면 ls 나 pwd 같은 명령어를 두세번씩 쳐보세요. 어때요, 조금 쓸만해졌죠?!
자 아직 끝이 아닙니다!! 거의 다왔어요. 조금만 힘내세요!
Install Powerlevel10k & Config p10k
oh-my-zsh에서 powerlevel10k를 설치하는 명령어는 아래와 같습니다.
1 | git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k |
터미널에서 위의 명령어를 친 후, 설치가 되었다면 또다시 .zshrc 파일을 수정해줘야겠죠?!
ZSH_THEME=robbyrussell 부분을 찾아서 위의 사진처럼 ZSH_THEME="powerlevel10k/powerlevel10k" 로 변경해주시면 끝이에요!
그다음에
1 | source ~/.zshrc |
source를 통해 zshrc를 zsh에 반영해주면..!!?
짜잔..!!! 설정마법사가 등장했어요. 이제 위에서 나오는 질문들에 대해서 주어진 보기와 같은 알파벳들을 타이핑하면 해당 설정들이 반영된 나만의 터미널이 완성이 된답니다~~~!!!
저 같은 경우엔 one line, compact, 12hour format .. 등등과 같은 옵션을 선택하여 위와 같은 결과를 얻게 되었답니다!! :)
Color Customizing
마지막으로 VSCode에서의 터미널 Color Customizing에 대한 것입니다! 저같은 경우는 mojave 라는 vscode 테마를 사용하고 있어서 따로 터미널 색을 지정해주진 않았지만, 기본 default theme를 사용중이신 분들께 유용한 링크를 하나 소개해드리려고 해요!
바로, vscode base16 term 이라는 곳인데요, 여기에서 하나씩 클릭해보면서 원하는 색 조합을 선택한 뒤,
Copy to clipboard 를 클릭하시면 vscode color setting에 대응하는 json 형태의 key, value가 클립보드에 복사가돼요!
이것을 vscode의 settings.json 파일의 맨 아래에다가 복사를 해주면 끝입니다!!
참고로 settings.json 의 위치는 사용자에 따라서 다를 수 있어요! Vscode에서 ctrl , 를 입력하신 뒤 설정창에서 setting 을 검색하시면
위와 같이 settings.json에서 편집 이라는 링크가 나오는데, 이것을 누르시면 자동으로 연결된 settings.json 파일이 생성되거나, 이미 있다면 기존 settings.json 파일이 열립니다!
그럼 이상으로 terminal customizing 을 마무리하겠습니다!! 긴 글 읽어주셔서 감사하고, 이쁜 터미널로 즐거운 코딩 하시길 바라겠습니다! :)
VSCode Terminal Customizing
