VSCode는 무료로 사용할 수 있는 IDE중 가장 많이 사용되고 있는 툴이다. 필자는 Android개발에는 Android Studio를 사용하고 이 외에는 전부 VSCode를 사용하고 있다.
VSCode의 장점은 많은 개발언어들을 하나의 IDE에서 확장팩을 설치하여 사용할 수 있다는 점인데, Tensorflow를 공부 할 때 Anaconda와의 가상환경과도 궁합이 잘 맞아 많이 사용했었다. 이 외에도 Flutter개발에 있어서도 개인적으로는 Android Studio보다 더 편했다.
해당 글 에서는 VSCode를 설치하는 방법을 먼저 올리고, Git과 연동하는 방법은 연이어서 올리려고 한다. 매번 개발환경 구축을 위해서 여기저기 블로그를 찾아다니는 것 보단 내 블로그 하나 만들어서 찾아보는 시간을 단축하려한다.
1. VSCode Installer Download
먼저 VSCode를 설치하는 Installer를 다운받아야 한다. 구글에 VSCode라고 쳐도 나오지만, 찾아다니기 귀찮으니 아래 주소를 남긴다.
딱 봐도 누르면 설치파일을 다운받을 거같은 저 파란버튼을 눌러준다. 현재 PC는 Windows기반이라 Windows 버전으로 다운받지만, M1Pro 맥북을 하나 구매 했기 때문에 설치 과정이 좀 다르다면, 맥 OS버전도 올리려고 한다.
2. VSCode Install
다운받아진 'VSCodeUserSetup'을 실행시키고 그대로 설치를 진행하면 된다.
여기서 좀 나뉘는데, 나는 바탕화면에 바로가기 아이콘이 있어야 더 편했다. 탐색기에는 떠 봐야 어짜피 잘 안쓰고 지저분해 보이기만해서 선택하지 않았고, 어짜피 해당 폴더에서 실행시키려면, 폴더주소에서 cmd로 프롬프트 실행시키고 프롬프트에서 VSCode를 실행시키는 방법이 훨신 편했다.
그 외에 편집기 등록이나 PATH등록 2개는 꼭 체크해준 상태로 넘어가야 나중에 귀찮은 일이 안생긴다.
이렇게 하면 VSCode의 설치는 완료가 된다.
PATH가 잘 되었는지 확인하려면, 명령 프롬프트를 키고
> code .를 입력하면 VSCode가 실행된다.
3. VSCode Extension Install
여기서 부터는 취향차이로 나뉜다. 나는 영어를 정말 싫어하기 때문에 VSCode에 한국어를 설치해 줬다.(이 글도 영어 안쓰고 한글로만 하려고 했더니 안이뻐서...)
1. Korean Language Pack
먼저, 왼쪽 메뉴를 보면 조각모음아이콘 처럼 생긴 아이콘이 있다. 여기서 확장팩을 검색해서 설치 할 수있다. 클릭하고 나서 Korean을 검색해서 맨 위에 나오는 Korean(사용법) Language Pack 을 설치해 준다.
2. Prettier
Prettier는 코드를 보기 좋게 정렬해주는 확장팩이다. Flutter에 적용이 안됬었던게 좀 아쉬웠지만, JavaScript, TypeScript, HTML, CSS 등 많은 곳에 적용되니 설치해준다.
3. Bracket Pari Colorizer2
Bracket은 괄호((),{})들이 겹쳐 있을 때, 괄호 커플링을 보다 쉽게 식별하기 위해 같은 색으로 보여주는 확장팩이다. 있고 없고의 가독성 차이가 매우 크기 때문에 설치해준다. 해당 확장팩은 v2과 v1이 있는데, v2이 더 최신버전이니 v2로 설치해준다. 해당 개발자 말로는 v2버전이 더 높은 정확도와 속도를 보여주는데, v1에서와의 호환성이 손상되기 때문에 새로 출시했다고 한다.
4. indent-rainbow
해당 확장팩은 Tab을 입력했을 때 생기는 들여쓰기 상태를 쉽게 확인할 수 있게 색으로 구분지어서 보여준다. 역시 가독성차이가 많이 나므로 설치해준다.
5. Auto Close Tag
VSCode는 열고 닫는 태그를 일일이 입력해줘야 하는데, 너무 귀찮다. 특히 HTML할 때 이를 느낄텐데, 위의 확장팩을 설치하면 닫는 태그는 자동으로 입력해준다.
6. Auto Rename Tag
위의 Auto Close Tag랑 단짝친구이다. 열고 닫는 태그 중 하나만 이름을 바꿔도 동시에 다른 한 쪽 태그의 이름도 변경해준다.
7. Material Icon Theme
폴더를 열었을 때, 파일들의 아이콘을 구분하기 쉽게 해주는 확장팩이다. 좀 더 색이 강조되어서 구분하기가 편해서 설치하면 좋다. 이와 단짝친구인 Material Theme 도 설치해봤지만, 나한테는 그냥 VSCode 기본 테마가 제일 좋은거 같다.
이렇게 하면 VSCode 설치는 모두 끝난다. 확장팩의 경우는 사용하다보면 계속 늘어나는데, 이는 사용자의 취향에 따라서 늘려나가면 된다.
글쓰는데 생각보다 시간을 너무 많이 써서 빠르게 개발환경 구축마저 올리고 공부해야겠다.
