Visual Studio Code 확장 및 단축키

Extension

마켓플레이스에서 확장 검색 후 설치(단축키 Ctrl+Shift+X)

• [Deprecated] Debugger for Chrome
  

  Chrome 개발자 도구를 통한 디버그를 할 때 유용

• advanced-new-file
  

  Ctrl+N을 통해 파일 생성 시 경로 설정이 편리

• Auto Clog Tag
  

  태그 생성 시 </>태그 동시 생성

• Auto Rename Tag - Jun Han
  

  HTML/XML문서의 태그 자동 수정

• Autoprefixer
  

  Vendor prefixer 생성

• Beautify - HookyQR
  

  라인 자동 정렬(Prettier보다 간편하게 사용)

• Bookmarks
  

  Ctrl+K 북마크 설정 Ctrl+J,L 북마크 이동

• Bracket Pair Colorizew 2
  

  브라켓 색상을 통한 가독성 증가

• Browser Preview
  

  분할 창으로 미리보기

• Code Spell Checker
  

  오타 체크

• CSS Peek
  

  Ctrl+Click으로 해당 CSS 이동

• DotENV
  

  node.js에서 환경변수를 외부파일에 보관하여 사용

• ESLint
  

  Lint 기능 (Formatter기능도 가능)

• Git Graph, Git History, GitLens
  

  Git 관리 시 유용

• HTML CSS Support
  

  HTML 작성시 CSS에 선언된 class를 불러옴

• HTML Preview
  

  HTML 파일 미리보기 (Browser Preview, Live Server로 대체 가능)

• HTML to CSS autocompletion
  

  HTML CSS Support와 반대로 CSS 작성 시 HTML class를 불러옴

• indent-rainbow
  

  tab(들여쓰기) 부분 색상을 통해 가독성 증가

• IntelliJ IDEA Keybindings
  

  단축키를 IntelliJ와 비슷하게 설정

• JavaScript (ES6) code snippets
  

  JavaScript 스니펫 제공

• Korean Language Pack for Visual Studio Code - Microsoft
  

  VS Code 한글화

• Live Sass Compiler
  

  Sass 컴파일을 자동으로 도와줌

• Live Server - Ritwick Dey
  

  개발을 위해 임시로 로컬 서버를 오픈

• Live Share
  

  실시간 공동 코드 작업 도구(협업용)

• Markdown All in One - Yu Zhang
  

  md파일(Markdown 문서) 작성

• Markdown Preview Enhanced
  

  분할창으로 md파일 결과 확인

• Material Icon Theme
  

  탐색기에서 icon 이미지 변경

• npm
  

  npm 설치

• Path Intellisense
  

  경로 입력 시 자동완성

• Polacode
  

  포스팅 용 코드 스크린샷

• Prettier - Code formatter
  

  Code formatter 제공

• Quokka.js
  

  js 코딩 시 프로토타입으로 프리뷰 및 피드백

• Remote - WSL
  

  Windows에서 VSCode를 Linux 환경으로 실행

• REST Client
  

  VSCode를 REST Client로 사용

• Settings Sync
  

  다른 개발 환경에서 동일한 설정 불러오기

• TabOut
  

  코딩 시 탭키를 이용하여 커서 이동

• Terminal
  

  터미널을 단축키 또는 상태바 아이콘으로 실행

• VS Color Picker
  

  색상 코드 추출

• Webstorm IntelliJ Darcula Theme
  

  IntelliJ Darcula Theme skin 사용

---

Keyboard shorcuts

• Ctrl+B : 사이드바 열기/닫기
• Ctrl+P : 빠른 열기(이름으로 파일 탐색)
• Ctrl+Shift+P : 모든 명령 표시
• Ctrl+K+S : 바로 가기 키(단축키 설정)
• Ctrl+\ : 편집기 분할
• Alt+Up/Down : 현재 줄을 위/아래로 이동
• Alt+Shift+Up/Down : 현재 줄을 위/아래에 복사 (이클립스:Ctrl+Alt+Up/Down)
• Ctrl+Alt+S : 모두 저장(따로 키 설정하였음, 이클립스:Ctrl+Shift+S)
• Ctrl+Shift+K : 줄 삭제(이클립스:Ctrl+D)

📝 사실은 내가 보려고 기록한 것 😊
피드백 댓글, 메일은 언제나 환영합니다!