Windows에서도 NodeJS 개발 환경을 만들어 봅시다.

VSCode 그리고 babun, Powerlevel9K

이 글은 아래 medium의 글 iTerm2, Zsh with Powerlevel9K를 참고했습니다. 
Mac에서 iTerm과 Powerlevel9K 그리고 VSCode로 node 개발 환경을구성하는 것은 간단하고 즐거운 경험이었습니다. 
아래 글을 보고 Windows에서는 안될까? Mac에서의 개발 환경과 동일하게 Windows에서도 node 개발 환경을 구성할 수 없을까? 하는 생각이 이 글의 출발이었습니다. 설정을 마치고 보니 Mac과 거의 유사한 개발 환경을 만들 수 있었습니다. 
문제가 없는 것은 아닙니다. 하지만 Windows에서든 Mac에서든 거의 유사한 개발 경험을 할 수 있어서 좋았습니다.

Windows 환경에서 딱히 다른 대안이 없는 상황에서 그 나마 node를 개발하기에 좋은 환경이 아닌가 생각됩니다.

아래 이미지는 Mac OS, iTerm, VSCode, Powerlevel9K로 구성한 node 개발환경입니다. 앞으로 이 이미지와 비슷하게 Windows에서도 babun을 가지고 만들어 보겠습니다.

준비물

이 글에서 핵심은 babun입니다. babun은 웹사이트(http://babun.github.io/)에서도 나와있지만 Windows shell입니다. Windows shell이라고 하면 대표적인 것이 cmd라고 하는 명령 프롬프트도 있고 명령 프롬프트보다 기능이 더 추가된 PowerShell도 있습니다.

또한, babun은 putty와 비슷한 ssh 클라이언트 기능이 있습니다. babun은 cygwin(https://www.cygwin.com/)을 기반으로 만들어져서 Widows에서 Linux/Unix 감성을 느낄 수 있으며 대부분의 Linux/Unix 명령이 실행 가능합니다.

VSCode 설치

Visual Studio Code(https://code.visualstudio.com/) 웹사이트에 접속하여 운영체제에 맞은 VSCode 다운받아 설치합니다.

VSCode는 Microsoft에서 개발한 프로그램 중 가장 마음에 드는 프로그램입니다. 다들 아시겠지만 Javascript로 개발된 프로그램이기도 합니다.

babun 설치

http://babun.github.io에서 설치 파일을 받아 압축을 풀고 install.bat 실행하여 babun을 설치합니다.

babun은 %USERPROFILE%\.babun 디렉토리에 설치됩니다. 이 위치를 잘 기억하고 계시면 유용할 때가 많습니다.
%USERPROFILE%\.babun\cygwin 이 Linux의 root(/)와 동일하다고 보시면 됩니다. 그 아래의 디렉토리에 home도 있고 etc, bin 등등이 있습니다.
대부분의 작업은 home 디렉토리인 “%USERPROFILE%\.babun\cygwin\home\사용자계정” 에서 하게됩니다.

babun을 실행해 보시면 아시겠지만 Home 디렉토리가 “%USERPROFILE%\.babun\cygwin\home\사용자계정”입니다.

Powerlevel9k 설치

Powerlevel9k는 prompt를 예쁘게 꾸며 주고 필요한 많은 정보들을 표시해주는 zsh을 위한 powerline 테마입니다.

babun을 예쁘게(?) 꾸미기 위해 Powerlevel9k를 설치합니다. 아래 git 명령으로 Powerlevel9k를 다운받고 관련 설정을 .zshrc 에 추가합니다.

참고 : babun에는 기본적으로 git이 설치되어 있습니다.
git clone https://github.com/bhilburn/powerlevel9k.git ~/powerlevel9k
echo 'source ~/powerlevel9k/powerlevel9k.zsh-theme' >> ~/.zshrc

.zshrc 에 아래와 같이 추가합니다.

.zshrc 위치는 “%USERPROFILE%\.babun\cygwin\home\사용자계정\”에 있습니다.
# Load Nerd Fonts with Powerlevel9k theme for Zsh
POWERLEVEL9K_MODE='nerdfont-complete'
source ~/powerlevel9k/powerlevel9k.zsh-theme
# Customise the Powerlevel9k prompts
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(
dir
custom_javascript
vcs
newline
status
)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true

Nerd Font 설치

Powerlevel9k를 사용하려면 Nerd font 가 필요합니다. Nerd font github(https://github.com/ryanoasis/nerd-fonts)에 접속하여 해당 폰트를 다운 받습니다. 
저는 Hack Regular Nerd Font를 설치했습니다.

.minttyrc에 설치한 Nerd Font 이름을 추가합니다.

.minttyrc도 %USERPROFILE%\.babun\cygwin\home\사용자계정\에 있습니다.
Font=Hack Nerd Font
FontSize=12

아래와 같이 Javascript 프롬프트를 표시하기 위하여 아래와 같이 .zshrc에 추가합니다.

# Create a custom JavaScript prompt section
POWERLEVEL9K_CUSTOM_JAVASCRIPT="echo -n '\ue781' JavaScript"
POWERLEVEL9K_CUSTOM_JAVASCRIPT_FOREGROUND="black"
POWERLEVEL9K_CUSTOM_JAVASCRIPT_BACKGROUND="yellow"

.zshrc 에 추가된 전체 powerlevel9k theme 설정은 아래와 같습니다.

# Load Nerd Fonts with Powerlevel9k theme for Zsh
POWERLEVEL9K_MODE='nerdfont-complete'
source ~/powerlevel9k/powerlevel9k.zsh-theme
# Customise the Powerlevel9k prompts
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(
dir
custom_javascript
vcs
newline
status
)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
# Create a custom JavaScript prompt section
POWERLEVEL9K_CUSTOM_JAVASCRIPT="echo -n '\ue781' JavaScript"
POWERLEVEL9K_CUSTOM_JAVASCRIPT_FOREGROUND="black"
POWERLEVEL9K_CUSTOM_JAVASCRIPT_BACKGROUND="yellow"

아래와 같이 보이면 정상입니다. 정말 그 어떤 테마보다 예쁘네요.

VSCode의 Terminal에 babun 추가

다음으로 VSCode Terminal에 bubun을 추가해 보겠습니다. 이 부분이 이 글의 핵심입니다.

VSCode의 settings.json을 열어서 아래와 같이 추가합니다.

죄측 하단의 톱니바퀴(?) 아이콘을 클릭하여 Preferences — Settings로 들어갑니다.

우측 상단의 {} 아이콘을 클릭하여 설정 추가 페이지로 들어갑니다.

아래와 같이 설정을 추가합니다.

"terminal.integrated.shell.windows": "C:\\Users\\Administrator\\.babun\\cygwin\\bin\\env.exe",
"terminal.integrated.fontFamily": "Hack Nerd Font",
"terminal.integrated.shellArgs.windows": ["CHERE_INVOKING=1", "/bin/zsh.exe"],
설정시 env.exe 위치를 사용자 환경에 맞추어서 설정하시기 바랍니다.
\\ 두번 주의
"C:\\Users\\Administrator\\.babun\\cygwin\\bin\\env.exe"
Administrator 부분을 각자의 Windows 사용자 계정으로 변경해야 됩니다.
위의 내용 중 %USERPROFILE%와 일맥 상통하는 부분입니다.

아래와 같이 표시됩니다. 짜잔^^

node.js 설치

node.js 개발을 위해 node.js 웹사이트(https://nodejs.org/ko/ v10.15.1 LTSnode.js)에서 다운받아 설치합니다.

Windows 에서 git을 편하게 하기 위해 추가로 git을 설치합니다

VSCode에서 npm init를 실행한 화면입니다.

기타 설정

babun에는 기본적으로 oh-my-zsh가 설치되어 있어서 원하는 테마로 변경할 수 있습니다.

개인적으로 좋아하는 테마는 cobalt2 테마와 dracula 테마입니다. 가끔 기분전환으로 두 테마를 변경하면서 사용합니다.

cobalt2 테마를 설치하는 방법은 아래와 같습니다.

git clone https://github.com/wesbos/Cobalt2-iterm
cd Cobalt2-iterm
cp cobalt2.zsh-theme ~/.oh-my-zsh/themes

.zshrc 파일 수정

ZSH_THEME="cobalt2"

. minttyrc 에 아래 내용 추가

BoldAsFont=yes 
Term=xterm-256color
Locale=en_GB
Charset=utf-8
BoldAsColour=yes
Black=0,0,0
Red=255,0,0
Green=29,208,59
Yellow=237,200,9
Blue=85,85,255
Magenta=255,85,255
Cyan=106,227,250
White=255,255,255
BoldBlack=56,222,33
BoldRed=255,229,10
BoldGreen=20,96,210
BoldYellow=255,0,93
BoldBlue=0,187,187
BoldMagenta=187,187,187
BoldCyan=85,85,85
BoldWhite=244,14,23
ForegroundColour=255,255,255
BackgroundColour=18,39,56
CursorColour=240,204,9

VSCode에서도 zsh와 동일하게 cobalt2 테마를 사용할 수 있습니다.
VSCode의 Extension 검색에서 cobalt2로 검색하시면 Cobalt2 Theme가 나옵니다.

추가적으로 zsh에서 syntax-highlighting과 autosuggestions 기능을 추가하는 방법입니다.

zsh-syntax-highlighting.zsh 설치

zsh-autosuggestions.zsh 설치

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
git clone https://github.com/zsh-users/zsh-autosuggestions.git

아래 설정 파일을 .zshrc에 추가

# Load Zsh tools for syntax highlighting and autosuggestions
source ~/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
source ~/zsh-autosuggestions/zsh-autosuggestions.zsh

현재까지의 문제점

  • VSCode Terminal에서 Terminal을 2개 이상 실행하면 npm 모듈 설치(npm install)가 제대로 동작을 하지 않습니다. babun 프로세스가 2개 이상 실행되면 그런 것 같습니다. 이 부분은 더 확인이 필요할 것 같습니다.
  • VSCode 터미널이 실행될 때 % 라고 하는 표시가 생깁니다. 굉장히 눈에 거들리는데요. env 가 zsh 을 실행시키면서 prompt에 표시되는 것 같은데. cgywin의 zsh 설정을 아무리 찾아봐도 찾지를 못했습니다. 혹시 잘 아시는 분 제거할 수 있는 방법 찾아주세요^^

참고