[WSL] WSL&VScode 기본 설정

 기존 Windows에서는 Linux환경에서 개발하기 까다로웠으나 MS에서 WSL을 지원하며 개발환경 구축이 정말 편해졌습니다. 이번 포스팅에서는 WSL과 VScode를 설치하고 연동한 후 제가 사용하는 VScode 설정을 간단히 소개하겠습니다.

WSL

 WSL은 Windows Subsystem Linux의 줄임말로, 윈도우 환경에서 리눅스를 쓸 수 있도록 만들어 주는 혁신적인 기능입니다. 처음에는 불편한 점들이 많았으나 WSL2 까지 나온 지금은 많은 점들이 개선되었습니다. 윈도우를 쓰시며 리눅스 환경에서 개발을 원하시는 분들은 꼭 써 보시길 권해드립니다.

이 기능을 사용하기 위해서는 먼저 windows 기능 켜기/끄기에서 linux용 windows 하위 시스템을 켜야 합니다. 윈도우 검색 기능을 이용하면 바로 찾을 수 있습니다. 이제 Microsoft store에서 Ubuntu를 검색하여 원하는 버전을 설치해 주세요. Ubuntu가 아닌 다른 리눅스 배포판을 사용하고 싶으신 경우에는 해당 배포판을 스토어에 검색해 주세요. 한국 스토어에는 등록되지 않았을 수 있으니 구글에 검색해 보시는 것을 추천드립니다. 설치가 끝났다면 앱을 실행해 UNIX username, password를 설정해 주고 sudo apt-get update 와sudo apt-get install gcc 를 통해 gcc를 설치해 줍니다.

이제 VScode에서 Ubuntu를 통해 작업할 수 있도록 하기 위해 remote development 확장 프로그램을 설치해 줍니다. 앱을 재시작 후 작업 영역을 설정하기 위해 WSL에서 원하는 작업 폴더로 이동해서 code . 를 입력해 주면 .vscode-server 폴더가 만들어지며 모든 세팅이 끝납니다(mnt 폴더를 통해 윈도우 폴더에 접근 가능합니다). Github등에 올려 두었던 repository 등을 clone해서 작업을 이어 나가시면 됩니다.

이 포스팅은 WSL2 출시 전에 썼던 글에 기반하기 때문에 이에 대해 다루지 않습니다. 하지만 프로젝트 폴더를 윈도우에 둬야 하는 경우가 아니라면 WSL2가 더 편리하고 성능이 좋기 때문에 업그레이드 하시길 추천드립니다. 이에 관한 포스팅은 추후 업로드할 예정입니다.

VScode

 VScode는 Microsoft 에서 만든 텍스트 에디터입니다. 터미널이 내장되어 있고, 여러 가지 기능과 확장 프로그램을 지원하며 무엇보다 업데이트가 자주 이루어져 개인적으로 매우 만족하며 사용하고 있습니다. 앞으로 블로그에 연재할 대부분의 포스팅은 VScode 환경에서 다뤄질 예정입니다.

VScode를 처음 설치하면 기본 인터페이스가 영어로 되어 있습니다. 저는 한국어가 더 편하기 때문에 확장 프로그램에 있는 한국어를 설치했습니다. 기본 폰트도 마음에 들지 않기 때문에 제가 좋아하는 NAVER D2 Coding 폰트로 바꿔 주었습니다. https://github.com/naver/d2codingfont 에서 폰트를 다운받은 후 D2coding 폴더에 있는 ttf 파일을 실행해 폰트를 설치할 수 있습니다. 설정에서 font familly를 검색해 가장 첫 폰트에 D2Coding 추가해 주면 해당 폰트가 적용됩니다. 또한 기본 설정에서 smoothscrolling을 적용시켜 스크롤이 부드럽게 넘어가도록 설정하여 쓰고 있습니다.

다음은 추천드리는 확장 프로그램 목록입니다. 저도 컴퓨터마다, 목적마다 다르게 사용하므로 용도에 맞게 골라서 설치하시면 됩니다.

기본적으로 있으면 좋은 확장

material icon, bracket pair colorizer2, path intellisense, todo highlight, bookmark, gitignore, relativepath, GitLens, Githistory, Git graph, todo tree, better comments, Commit Message Editor

 

작업 환경에 따라 추천할 만한 확장

python indent, AREPL for python, pylance, Live Server, Debugger for chrome, Prettier, Eslinter, Datapreview, Highlight Matching Tag, Color the tag name, Sass, Sass formatter, Sass linter...

 

참고로 Todo highlight 세팅 값은 https://github.com/wayou/vscode-todo-highlight/issues/93 을 참고해 쓰는 중이며, 테마는 One dark pro를 특정 문법 bold, italic을 모두 적용하여 사용중입니다. 선택 블록 하이라이팅은 다음과 같이 변경하여 쓰는 중입니다.

"workbench.colorCustomizations":{ 

  "editor.selectionHighlightBorder": "#464646",

  "editor.selectionHighlightBackground": "#464646"

}

 마지막으로 유용한 단축키 몇 가지를 소개하며 포스팅을 끝내도록 하겠습니다.

F1을 누른 후 duplicate workspace in new window : 새 창에 작업 영역 복제. ctrl + j : 터미널 숨기기. ctrl + b : 탐색기 숨기기. ctrl + d: 같은 단어 다중선택. Alt+ left click : 원하는 위치 다중 커서 생성. ctrl + /: 라인 주석. shift +alt + a: 블록 주석 (ctrl + shift +/로 변경하여 쓰고 있습니다). ctrl + ] or [: 선택영역 들여쓰기 이동. ctrl + 1 or 2 : 분할 화면 포커스. Alt + 좌우 방향키: 수정했던 라인으로 이동. ctrl + shifht + H: relative path작동 키 (ctrl + m 으로 바꿔 쓰고 있습니다).