WSL에 Visual Studio Code 설치하기

윈도우 WSL(Windows Subsystem for Linux)에 비주얼 스튜디오 코드(Visual Studio Code) 설치하기

윈도우용 비주얼 스튜디오 코드에서도 WSL의 파일을 열고, 변경하고, 저장하는게 된다.

다만 여러가지 불편한 점이 있는데, 가장 치명적인 문제는 아래 두 개다.

  1. 파일 저장했을 때 watcher trigger가 동작하지 않는다.(https://github.com/Microsoft/vscode/issues/53621)
  2. 에디터에서 새 폴더나 파일을 생성하면, WSL상에서 권한 문제로 접근이 어렵다.

그 중 첫번째 문제는 파일을 저장할 때 마다 쉘에서 touch를 해주는 방법으로 해결했다.

윈도우용 vscode에서 파일 편집 후 WSL watcher 동작시키기

vscode에 raiscui.save-and-run-wsl extension을 설치한다.
user_setting에 다음 추가.

“saveAndRun”: {
“commands”: [
{
“match”: “(.vue|.css|.js|.json|.html|.yaml)”, // watch할 원하는 확장자 추가
“isShellCommand”: true,
“cmd”: “touch $(echo ${file} | sed ‘s/.*(rootfs)//g’)”,
“wsl”: true,
“useShortcut”: false
}
]
}

그러나 아쉽게도 두번째 문제의 해결 방법을 찾지 못해서 귀찮지만 WSL에 리눅스용 Visual studio code를 깔아 사용하기로 했다.

  1. sudo apt-get update && time sudo apt-get dist-upgrade // 패키지 업데이트
  2. 리눅스에서 브라우저를 열고 https://code.visualstudio.com/Download 에서 Visual Studio Code를 다운받는다.
  3. sudo dpkg -i code_xxx.deb
    3-1. sudo apt install libnotify4 libnss3 libxkbfile1 libgconf-2-4 libsecret-1-0 libgtk-3-0 libxss1 // 의존성 오류가 발생하면 의존 패키지를 설치한다.
    3-2. sudo apt –fix-broken // 의존 패키지 설치 중에 문제가 발생하면 이 커맨드로 문제를 해결한다.
  4. 윈도우용 vcxsrv(https://sourceforge.net/projects/vcxsrv/) 를 설치해서 실행한다.
  5. .bashrc에 export DISPLAY=localhost:0.0를 추가한다.

한글 입력 환경 구축

  1. sudo dpkg-reconfigure locales에서 ko_KR.EUC-KR, ko_KR.UTF-8를 설치한다.
  2. sudo apt-get install fonts-nanum로 한글 글꼴을 설치한다.
  3. sudo apt install uim uim-byeoru로 벼루를 설치한다.
  4. .bashrc에 다음을 추가한다.

    export XIM=uim
    export XMODIFIERS=@im=uim
    export UIM_CANDWIN_PROG=uim-candwin-gtk
    export GTK_IM_MODULE=uim
    export QT_IM_MODULE=uim
    if [ $SHLVL -eq 1 ]; then
    uim-xim &
    fi
  5. uim-pref-gtk로 설정을 열고 Global settings > input method deployment > Default input method에서 Byeoru를 선택한다.

이제 쉘에서 code를 입력하면 WSL에서 Visual Studio Code이 구동된다.
매번 쉘을 띄워 vscode를 구동하기 귀찮다면 윈도우 단축 아이콘에 Target을 아래와 같이 만들어 주면 된다.
C:\Windows\System32\wsl.exe zsh -ic code

참고문서



by


Tags : , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.