VScode 유용한 extensions

👀 VScode

마이크로소프트에서 만든 소스 코드 에디터(소스 코드 편집기)다.

프로그래머에 의해 컴퓨터 프로그램의 소스 코드를 편집하기 위해 설계된 프로그램

Visual Studio Code를 사용하는 가장 큰 이유는 맥 os, 리눅스, 윈도우 등의 메이저 운영체제를 모두 지원하고

누구나 무료로 사용할 수 있기 때문에 현재 실무에서 많이 사용되고 있는 소스 코드 에디터라고 할 수 있다.

 

💽 내가 쓰는 Extensions

Extension은 VScode를 다채롭게 즐길 수 있는 확장 프로그램 이다.

 

나의 코딩환경을 효율적이고 윤택하게 해주는 확장 프로그램들

 

Korean Language Pack for Visual Studio Code

한국어로 번역된 UI 환경으로 만들어준다

 

Indent-Rainbow

탭 영역을 컬러별로 다르게 표시하여 읽기 편하게 해준다

 

Auto Rename Tag

하나의 태그를 수정할 때 쌍을 이루는 태그들을 같이 수정해준다

 

CSS Peek

html문서에서 정의된 css를 빠르게 찾을 수 있도록 도와준다 ctrl+클릭하면 해당 css가 선언된 곳으로 이동시켜준다

 

HTML to CSS autocompletion

정의된 css가 어디 사용되었는지 html 어디에서 사용되었는지 쉽게 찾을수 있도록 도와준다 html 문서에 선언된 클래스명을 css에서 입력 시 자동완성 기능을 제공

 

HTML CSS Support

html 문서에서 css 자동완성 기능을 제공

 

Live Server

html 파일 수정 시 저장만 하면 페이지 새로고침 없이 바로바로 적용되어 보여주는 기능

 

Prettier - Code formatter

코드를 예쁘게 정렬해주는 코드 포맷터

*몇가지 설정이 필요하다

-format on save 체크

-prettier tab width 2칸으로 설정

-tab size도 2칸으로 수정

-prettier single quote 에 체크
-java script/type script의 quote style은 single로 설정

-default formatter를 prettier로 설정