VSCode(Visual Studio Code) 쓸만한 Extensions

Live Server

웹 프로그래밍할 때 코드 수정 결과를 브라우저의 새로고침을 하지 않고도 실시간으로 확인할 수 있게 해 주는 확장프로그램입니다.

 

Prettier

<Ctrl+,> 단축키로 설정 창으로 이동 후 아래 처럼 설정합니다.

에디터에서 탭(Tab) 크기를 변경하시려면 아래 처럼 설정해 주세요.

Single Quote를 사용하고 싶으시면 아래처럼 설정해서 사용하시면 됩니다.

 

Auto Rename Tag

HTML 작업할 때 여는 태그나 닫는 태그를 수정하면 쌍을 이루는 태그를 자동으로 수정해 주는 기능을 제공합니다.

 

Material Theme

 

Material Icon Theme

 

CSS Peek

HTML 작성 시 CSS에 정의한 스타일 파일로 바로 이동하고 싶을 때 유용합니다.

 

HTML CSS Support

HTML CSS 키워드(클래스, 속성자동완성 기능을 사용하고 싶을 때 설치하세요.

 

HTML to CSS autocompletion

 

IntelliSense for CSS class names in HTML

 

Markdown Preview

이 확장프로그램은 VSCode에 이미 내장되어 있습니다.

깃허브에 등록할 때 *.md 파일을 작성할 필요가 있습니다. 마크다운 파일을 작성하고 미리 확인할 수 있는 프로그램입니다.

마크다운 파일을 작성한 경우 <Ctrl+Shift+P> 키를 누른 후 검색창에서 markdown 입력하여 "Markdown: Open Preview" 항목을 선택합니다.

 

ESLint

 

Import Cost

소스 파일에 임포트한 라이브러리/모듈의 크기가 얼마나 되는지 확인하고 싶을 때 유용합니다.

 

Multiple cursor case preserve

 

CodeSnap

블로그에 소스 코드 이미지를 추가할 때 사용할 수 있는 확장 프로그램입니다. 일종의 코드 화면을 설정할 수 있는 캡쳐프로그램 중 하나로 보이네요.

 

TODO Highlight

소스 코드 상에 "TODO: "나 "FIXME: "와 같은 항목을 하이라이트시켜 에디터에서 잘 보이게 해 주는 확장 프로그램입니다.

 

 

 

참고사이트

• VSCode에서 쓸만한 Git Extensions