Mac 개발환경 설정3(Visual-Studio-Code)

Visual-Studio-Code 설치

brew cask install visual-studio-code

 

#1. 폰트 설치

consolas 가 익숙하니 consolas 를 적용시켜보자.

맥에 기본적으로 없으니 다운로드 해야 한다.

다운로드 링크

https://www.fontpalace.com/font-details/Consolas/

받아서 압축 풀면, consolas.ttf 파일이 나오는데 더블 클릭 해주면 맥에 설치가 알아서 된다.

 

vscode 를 실행시켜서 하단 톱니바퀴에서 setting 에 들어가도 되고, 단축키 cmd , 로 바로 setting 화면으로 들어가도 된다.

 

검색에서 font 입력하고, 에디터에 consolas 를 입력한다.

 

검색에서 font family terminal 입력하고 iterm2 를 설치할 때, 같이 설치했던 폰트를 입력한다.

통일성을 위해서 터미널은 소스코드프로로 해주었다.

 

적용된 모습

 

참고로 위의 이미지는 Extension 으로 테마를 적용한 후의 모습이다.

 

#2. 유용한 Extension 설치

vscode 화면의 가장 왼쪽에 아래에 테트리스하는 것 같은 아이콘이 확장 기능을 검색, 설치, 삭제할 수 있는 부분이다.

 

1. material theme

그냥 심심해서 설치해봤고, 톱니바퀴 -> color theme 에서 여러가지 선택해보면서 마음에 드는 테마를 적용하면 된다.

 

2. material icon theme

이것도 그냥 깔아봤다. html, css, js 파일의 아이콘이 더 이쁘게 바뀐다.

 

3. Prettier

코드 포멧팅. 저장할 때 자동으로 포멧을 하게 설정해두면 알아서 이쁘게 코드가 정렬된다.

 - setting 검색에서 save 입력하고 format on save 란에 체크

 

tab 은 2 로 설정해두었다. (기본값 4로 되어있음)

 - setting 검색에서 tab 입력하고 tab size 2로 설정

 

quote 는 single 로 설정했다.

 - setting 검색에서 quote 입력해서 single 로 바꿈.

 

4. bracket pair

 - (), {} 에 색을 입혀서 알아보기 편하게 만들어 준다.

 

5. indent rainbow

 - Indent (들여쓰기) 의 각 줄에 색을 넣어서 가독성을 높여준다.

 

6. auto rename tag

- 테그의 이름이 페어로 수정된다.

<test></test> 앞에 test 테그를 수정할 때 뒤의 클로징 테그를 일일히 수정하는 불편함을 덜어준다.

 

7. css peek 

 - html 문서에서 클래스나 아이디를 cmd + 마우스 우클릭하면, 클릭한 요소의 css 파일을 열어준다.

 

8. html css support

 - html css 태그 자동완성 기능.

 

9. live server 

html, css, js 의 수정 사항을 실시간으로 반영한다.

cmd , -> live server -> open with live server

cmd shitp p > live server > open with live server 선택하면, 자동으로 localhost 잡아서 웹페이지 띄워준다.

 

여기까지 왔으면 prototype 을 만들기 위한 대략의 준비는 끝났다.

이제 단축키를 외우고 emmet 사용법을 익히면 된다.

emmet(공식명칭은 zen coding ) 은 마크다운을 조금 더 빠르고 효율적으로 작성할 수 있는 기능인데,

vscode 에 기본적으로 내장되어 있다고 한다.

사용법은 조금 손에 익어야 할 것 같으니 연습을 해야할 것 같다.

 

본 포스트의 내용은 youtube 채널 "드림코딩 by 엘리" 님의 영상에 기반해서 작성했다.