visual studio code : plugin/extension

 VSC Extension 

[ Auto Close Tag ]

: HTML / XML 닫히는 태그 자동으로 닫아준다.

[ Auto Rename Tag ]

: 태그 수정 시, 자동으로 짝맞춰서 열리는 태그/닫히는 태그의 태그명을 수정해준다.

[ Better Comments ]

: 주석 색상을 다르게 해서 기능별로 보기 좋게 제공한다.

하이라이트/알림/경고/중요/TODO/쿼리

 

[ open in browser (TechER) ]

:  VSC에서 지금 작성중인 파일을 웹브라우저에서 바로 열어준다.

: alt +b 단축키(window)를 이용해서 바로 크롬으로 열림

 

 

[ Color Highlight ]

: 해시 코드로 작성 된 부분이 해당 색상으로 표현되어진다.

 

[ Reactjs code snippets]

 

• rcc 작성 후 tab key를 이용해서 react 기본구조 자동완성이 가능하다.

rcc + tab

• 이외에도 여러가지 스니펫 기능이 존재하다.

 

 

 

 

[ Korean Language Pack for Visual Studio Code ]

타입스크립트를 새로 배우고 있는 과정에서 error 메시지가 안 와닿길래 한글 패치된 익스텐션을 설치했다.

VSC 메뉴 및 많은 부분을 한글로 표현해준다.

 

 

[ Code Runner]

- ctrl + alt + n : 실행

간단한 자바스크립트와 같은 간단한 구문 콘솔 실행 

 

 

[Turbo Console Log]

설정 탭(ctrl +k ctrl+ s) 을 통해서 터보 콘솔 설정을 수정할 수 있다.

console.log(`✨🎉 ~ file: RequestSpan.tsx:88 ~ reqId:`, reqId);

🔗 Snippet

https://react.vlpt.us/basic/27-useful-tools.html

27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet · GitBook

 

🔗 Emmet 공식 자료

https://code.visualstudio.com/docs/editor/emmet

Emmet in Visual Studio Code