vsCode 확장프로그램

• Auto Rename Tag
  • 태그 앞에거만 바꿔도 뒤에 닫는태그 까지 같이 바꿔줌 

 

• indent-Rainbow
  • 들여쓰기 색깔 구분해줌

 

• Live Preview
  • vscode 내에서 실시간으로 현재 파일 확인 

 

• Material Icon 
  • 개떡같은 익스플로러 아이콘 바꿔줌

 

• Open in browser 
  •  Alt + B   현재 html 문서 실행

 

• CSS Pekk
  • html 파일에서 클래스명 선택 시 css 파일 바로 띄워주기

 

• Error Lens
  • 에러에 빨간불 해줌

 

• Code Runner 
  • vscode 에서 run 가능하게 해줌 

 

• TabOut
  • 세미콜론 뒤로 안가지거나 기타 등등 빡치는 상황 해결
  • 탭 누르면 뒤로가게 해줌 

 

• npm intellisense 
  • node 라이브러리 자동완성

 

 

리액트 노드 등에서 태그 자동완성 및 내 vscode 설정 기본값 

setting ~ JSON 파일

{
    "workbench.startupEditor": "newUntitledFile",
    "editor.fontFamily": "D2Coding",
    "editor.tabSize": 2,
    "workbench.iconTheme": "material-icon-theme",
    "editor.minimap.enabled": false,
    "workbench.colorTheme": "Atom One Dark",
    "emmet.syntaxProfiles": {
        "javascript": "jsx" 
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    }
}