목차

Visual Studio Code

  • description :
  • author : 주레피
  • email : dhan@repia.com
  • lastupdate : 2020-03-12

단축키

자동 줄 바꿈 

Alt + z (Toggle)

메뉴바 표시 

Alt

setting창 열기 

mac: cmd + ,
windows: ctrl + ,

이모지 

windows: windowsKey + ; (세미콜론)

Tip

파일이나 디렉토리에서 마우스 오른쪽키를 클릭했을 경우 연결

순서

1. 아무곳에나 vsCodeOpenFolder.reg 파일을 만든다
2. 아래 코드를 방금 만든vsCodeOpenFolder.reg파일에 복사 붙여넣는다. 

Windows Registry Editor Version 5.00
; Open files
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
@="Edit with VS Code"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%V\""

3. vsCodeOpenFolder.reg파일을 오른쪽 클릭해서 맨위에 있는 병합을 클릭하면 된다.

Note: 위 코드에 표기된 C:\\Program Files\\Microsoft VS Code\\Code.exe는 기본 설치 경로이며,

이 기본 설치 경로를 내 컴퓨터에 설치된 VS Code 설치 경로로 변경해야 합니다.

Tip : 아래 파일을 다운받아 위에 Note처럼 경로만 바꿔주면 된다.


Alt단축키로 표시한 메뉴바 고정시키기

메뉴바 View - Appearance - Show Menu Bar 토글 체크


링크


Plugin

* Visual Studio Code : Text Editor

Plugin

  1. Material Theme : 테마
  2. Material Theme Icons : 파일 아이콘을 시각화해주는 플러그인
  3. Prettier - Code formatter :
    • 설치 후 Ctrl + ,(콤마) → Settings > User > Text Editor > Formatting - Format On Save에 체크 표시 활성화
    • Settings에서 prettier 검색 - Prettier: Tab Width를 2로 입력
    • Settings에서 prettier quote 검색 - JavaScript > Preferences:Quote Style을 single로 변경 설정
    • Settings에서 prettier quote 검색 - TypeScript > Preferences:Quote Style을 single로 변경 설정
  4. Bracket Pair Colorizer : 괄호를 컬러로 구분할 수 있어 코드 가독성 향상
  5. Indent Rainbow : 들여쓰기를 4가지 컬러로 구분하여 보여줌
  6. Auto Rename Tag : HTML/XML 태그에서 쌍으로 된 태그를 자동으로 변경해줌.
  7. CSS Peek : HTML에서 CSS를 쉽게 찾아주는 플러그인 ( style 확인 시 Ctrl + 마우스 좌클릭 –> CSS 파일로 이동)
  8. HTML CSS SUPPORT : HTML의 id, class 속성 자동 완성 기능 제공
  9. Live Server : HTML파일을 브라우저에 자동으로 리로딩 기능 제공, HTML파일 내에서 마우스 우클릭 > Open with Live Server or Alt+L Alt+O
  10. Markdown Preview : VS Code 내장 기능, 프로젝트를 깃허브에 올릴 때 작성해야 하는 마크다운 파일 readme.md를 작성하면서 보여지는 것을 확인하는 플로그인, Ctrl+Shift+p > Markdown: Oepn Preview–> Preview readme.md창이 생성되며 확인할 수 있다.
  11. HTML to CSS autocompletion : HTML에서 정의한 클래스를 CSS에서 자동으로 완성해 주는 기능
  12. kite-드림코딩 by 엘리 - AI기반 코드 자동 완성 툴
  13. StandardJS - JavaScript Standard Style
  15. htmltagwrap - 하나 이상의 텍스트 블록 설정 - Alt + W - 원하는 태그 입력

remote ssh 자동 로그인 설정

Ref

비쥬얼 스튜디오 코드 설치 및 웹 개발을 위한 필수 익스텐션 10개 추천 by 엘리

웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 by 엘리

Emmet - the essential toolkit for web-developers

kite-드림코딩 by 엘리 - AI기반 코드 자동 완성 툴

Terminal 사용하기

Terminal 실행
cmd 설정



VS Code 완전 삭제

  1. .vscode 폴더 삭제 → C:\Users\사용자명\.vscode 폴더 삭제
  2. Code 폴더 삭제 → C:\Users\사용자명\AppData\Roaming\Code 폴더 삭제
  3. 제어판에서 삭제 → 제어판\모든 제어판 항목\프로그램 및 기능\Microsoft Visual Studio Code 삭제


Showing path in file-tabs in Visual Studio Code

파일 명 탭에서 경로 표시하기
File » Preferences » Settings » “workbench label format” 검색 » Workbench>Editor:Label Format » short 선택
Showing path in file-tabs in Visual Studio Code

Tip

Ref

, , , ,