윈도우용 Visual Studio Code로 WSL(Windows Subsystem for Linux)환경에서 개발하기


리눅스에서 WSL로 개발 환경을 옮겨오기로 마음을 먹고 꽤 순조롭게 옮겨왔다고 생각했다.



그러나, 아쉽게도 VS Code 사용에 문제가 있었다.
그래서 얼마 전 WSL 환경에 비주얼 스튜디오 코드를 설치하고 한글 설정까지 마치고는 뿌듯해했으나, 실제 사용해보니 영 마음에 차지 않는다.
가장 큰 이유는 윈도우즈용 X server가 자꾸 멈추는 것이다.
비주얼 스튜디오를 켜고 뭘 좀 해볼까 하면 '응답이 없습니다. 어쩔까요? 끌까요? 기다릴까요?' 메시지가 자꾸 뜬다. VcXsrv문제인가 싶어 MobaXterm을 띄워봐도 마찬가지다.
또 컴퓨터를 켤 때마다 윈도우즈용 X server를 띄워야 하는 작업이 추가되는 것도 여간 귀찮은 일이 아니다.
뭔가 다른 방법이 없을까?
고맙게도 VS Code에서 해결책을 줬다.


Visual Studio Code Insider 1.34버전에서 Remote Development extensions을 설치하면 윈도우용 VS Code에서도 WSL 개발 환경이 손쉽게 접근된다!
(다만 아직 VS Code 정식 릴리즈 버전이 1.33.1이라 정식 버전에서 지원은 좀 더 기다려야 한다.)


Visual Studio Code Insider에 Remote Development extensions (Remote WSL)설치 및 설정


  1. 윈도우용 VS Code Insider(https://code.visualstudio.com/insiders/)를 받아 설치한다. 리눅스용이 아니라 윈도우용!
  2. VS Code Insider를 설치하고 Remote Development extensions(https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)를 설치한다.
  3. 윈도우 cmd에서 git config --global core.autocrlf false 커맨드를 입력한다. (true로 해 두면 WSL과 line ending이 달라 수정하지 않은 파일도 '수정됨'상태로 보인다.)
  4. WSL 터미널을 연다.
  5. VS Code에서 열고 싶은 폴더로 이동한다.
  6. $ code-insider .를 입력한다.(최초 한 번만 입력하면 된다.)
  7. 필요한 extension은 'Install on WSL'를 이용해 WSL 쪽에 설치해서 사용한다.

설치한 지 얼마 안되었지만 지금까지는 만족스럽다.
watcher도 잘 동작하고, Xserver를 이용했을 때보다 반응속도도 빠르고 안정적이다.
아직 preview 버전이라 자잘한 오류등이 나타날지도 모르지만, 이 정도면 감지덕지다.


참고 문서




by


Tags : , , ,

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

윈도우 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 : , , , , , ,

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

윈도우 WSL(Windows Subsystem for Linux)로 개발 환경 만들기


하나의 컴퓨터에 OS 두 개를 놓고 쓰는 건 번거로운 일이다.
한국 정부 사이트를 문제없이 사용하려면 윈도우가 필요하고, 개발 편의성은 리눅스가 더 높다.
정부 사이트를 이용할 때마다 재부팅을 해서 윈도우를 사용하는건 귀찮은 일이다.
WSL(Windows Subsystem for Linux)이 발표되고 한참을 눈여겨보다가 새해를 맞아 사용해보기로 했다.
리눅스 파티션을 갈아엎고, 윈도우에서 WSL을 이용해 개발환경을 구축해봤다.
리눅스에서 Wine으로 돌리는 윈도우 애플리케이션보다 안정적인 느낌이다.
watcher가 제대로 동작하지 않는다는 것(https://github.com/Microsoft/WSL/issues/216)은 아쉽지만, OS 두 개를 관리하는 수고스러움에 비할 바는 아니다.
리눅스를 수년간 사용하면서 패키지를 업데이트할 때마다 컴퓨터가 이상해지지는 않을까 노심초사했고, 다음엔 맥으로 바꿔야 하나 고민했다.
그런데 이번에 WSL을 써보니, 윈도우도 좋은 대안이라는 생각이다.
대한민국 정부 사이트 접속도 원활하고, WSL 개발 환경도 만족스럽다.
십 년 넘게 멀리했던 윈도우와 좀 친해져 봐야겠다.


WSL 설치 및 설정

Turn Windows features on or off에서 Windows Subsystem for Linux 선택 설치

Microsoft Store에서 Linux로 검색해서 마음에 드는 리눅스 찾아 설치 (debian)

wsl 베터리 설정

Settings > Update & Security > Windows Defender > Open Windows Defender Secutiry Central > Protection Against Viruses & Threats > Advanced Config… > Exclusions > Add or Remove > Add > Folder에 리눅스 시스템 루트 추가

Group Policy Management Editor > Computer configuration > Windows components > Windows Defender Antivirus > Real-time protection >

Turn off real-time protection Enabled로 변경

참고 - https://medium.com/@leandrw/speeding-up-wsl-i-o-up-than-5x-fast-saving-a-lot-of-battery-life-cpu-usage-c3537dd03c74


debian 설정

WSL 루트 - C:\Users\dorajistyle\AppData\Local\Packages\TheDebianProject.DebianGNULinux_버전\LocalState\rootfs

유저이름과 비밀번호 설정

데비안 버전 알아보기 - cat /etc/issue

데비안 버전 알아보기 - cat /etc/os-release os version

필요 패키지 설치

sudo apt install build-essential patch git-core curl unzip pkg-config libvips-dev apt-transport-https ca-certificates psmisc ack ncdu python python-pip

yarn 설치

sudo apt purge cmdtest (yarn 설치 위해)

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo “deb https://dl.yarnpkg.com/debian/ stable main” | sudo nano /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn


참고 - https://yarnpkg.com/lang/en/docs/install/#debian-stable

installation Problem: Unexpected token { in cli.js 문제 발생 시 - https://github.com/yarnpkg/yarn/issues/6914

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

apt-get install -y nodejs

postgres 설치 (https://www.postgresql.org/download/linux/debian/)

  • sudo nano /etc/apt/sources.list.d/pgdg.list 에 deb http://apt.postgresql.org/pub/repos/apt/ stretch-pgdg main 추가
  • wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
  • sudo apt-get update

    sudo passwd postgres

    sudo service postgresql start

    sudo -u postgres psql

    ALTER USER postgres PASSWORD ‘my_postgres_password’;


    Peer authentication failed for user “postgres” 오류시
    /etc/postgresql/10/main/pg_hba.conf 파일에서 local all postgres peer 을 local all postgres md5로 바꿔 저장하고 sudo service postgresql restart로 재시작

nvm 설치

https://yoember.com/nodejs/the-best-way-to-install-node-js

zsh 설치

  • sudo apt-get install zsh
    sudo chsh -s `which zsh`
zsh-nvm 설치

https://github.com/lukechilds/zsh-nvm

watchman 설치

sudo apt-get install -y autoconf automake build-essential python-dev libtool m4 pkg-config libssl-dev libcrypto+±dev

git clone https://github.com/facebook/watchman.git

cd watchman

git checkout v4.9.0 # the latest stable release

./autogen.sh

./configure

make

sudo make install

$ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances && watchman shutdown-server


참고 - https://facebook.github.io/watchman/docs/install.html

pip 패키지 설치

sudo pip install awscli awsebcli


윈도우 유틸리티 설치

hyper 터미널 설정

shell: ‘C:\Windows\System32\wsl.exe’, //shell을 wsl로

shellArgs: [], //비운다.

plugins: [

“hyper-dracula”,

“hyper-search” // CTRL + SHIFT + F로 찾는다.

],


vscode 설정

  • Terminal > External: Windows Exec와 Terminal > integrated > Shell:Windows에 C:\WINDOWS\System32\wsl.exe 를 넣는다.
  • Terminal > integrated: Cwd에 wsl 홈 디렉토리 경로를 넣는다.
  • Ctrl + `를 누르면 터미널이 wsl로 잘 뜬다.

vscode extension

  • setting sync
  • annotator
  • auto rename tag
  • babel es6/es7
  • debugger for chrome
  • dracula Official
  • embrace
  • EsLint
  • File Utils
  • Go
  • MDTools
  • Partial Diff
  • Pomodoro Timer
  • Preview
  • Project Manager
  • Trailing Spaces
  • Vetur
  • vscode-icons

기타 윈도우 설정

  • 필요한 프로그램은 단축키 등록하고, 시작 메뉴나 데스크탑에 넣어둬야 단축키가 작동한다.
  • snap 설정을 통해 창을 관리한다.

기타 WSL 참고자료

https://github.com/sirredbeard/Awesome-WSL/blob/master/README.md



by


Tags : , , , , , , ,

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