비기너 트랙 4 - VSCode

내용 요약

 

- IDE : 통합 개발 환경

프로그래밍에 필요한 다양한 도구를 통합한 SW로, 코드 작성/디버깅/테스트/빌드 등이 전부 가능하다.

Visual Studio, IntelliJ IDEA, PyCharm, Eclipse 등이 있다.

 

- Code Editor : 코드 편집 도구

텍스트 파일을 작성하고 편집하는 도구로, 코딩 시 주로 소스 코드를 작성하는데 사용한다.

플러그인으로 기능을 확장할 수 있는 제품이 있으며 시스템 자원을 거의 사용하지 않아 실행속도가 빠르다.

Visual Studio Code, Notepad++, Vim 등이 있다.

 

- Visual Studio Code 

가볍고 빠른 Code Editor지만, 여러 확장 기능을 설치하면 IDE처럼 사용할 수 있다.

모든 프로그래밍 언어에 맞춰 환경을 설정할 수 있어 웹 개발, 백엔드 개발, 모바일 및 클라우드 개발에도 적합하다.

 

 

익스텐션

 

1) Material Icon Theme

 

코드 작성과는 거리가 멀지만, 아이콘을 확실히 눈에 들어오게 바꿔주는 익스텐션으로, 개인적으로는 보기 좋아져서 잘 쓰고 있다.

 

2) Auto Rename Tag

 

태그 이름을 수정할 때, 열고 닫는 태그를 모두 수정해주는 익스텐션이다.

 

3) Auto Close Tag

 

여는 태그를 작성했다면 닫히는 태그는 자동으로 작성해주는 익스텐션이다. (즉 여는 태그만 작성해주면 된다.)

 

4) HTML to CSS autocompletion

 

html 파일에서 사용한 속성 이름을 css 파일에도 자동으로 불러와주는 익스텐션이다. 이를 알기 전에는 오타 방지를 위해 불편하게 복사 붙여넣기를 했었다...

반대의 익스텐션도 있나 해서 찾아봤는데 html css support 라는 익스텐션이라고 한다.

 

5) open in browser

 

작업중인 html 파일의 현재 상태를 보고 싶을 때, 파일 코드 부분(아무데나)에 우클릭을 해서 Open in Default Browser나 Open in Other Browsers를 누르면 된다.

 

6) Live Server

 

6번의 open in browser는 현재 상태를 보고싶을 때 마다 클릭하거나 새로고침을 해야 하는데, live server는 수정 사항이 있을 때마다 자동으로 새로고침을 해줘서 계속 확인할 수 있게 해준다. 

 

 

그 외에 아직 안 써봤지만 / 혹은 몰랐지만 알게 되어서 사용하다보니 괜찮은 익스텐션은 이 글에 수정해서 추가할 예정이다.