자동 줄 바꿈

Alt + z (Toggle)

메뉴바 표시

Alt

setting창 열기

mac: cmd + ,
windows: ctrl + ,

이모지

windows: windowsKey + ; (세미콜론)

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

순서

1. 아무곳에나 vsCodeOpenFolder.reg 파일을 만든다
2. 아래 코드를 방금 만든vsCodeOpenFolder.reg파일에 복사 붙여넣는다.
3. 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\""

Note: 위 코드에서 C:\\Program Files\\Microsoft VS Code 이 부분을 본은 VS code 위치로 바꿔줘야한다.

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

• vscodeopenfolder.zip

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

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

* Visual Studio Code : Text Editor

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
14. htmltagwrap - 하나 이상의 텍스트 블록 설정 - Alt + W - 원하는 태그 입력

• HTML, CSS 확인
  1. jsbin.com
  2. jsfiddle.net
  3. codesandbox.io

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

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

Emmet - the essential toolkit for web-developers

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

Terminal 실행

• 상단 View > terminal 클릭 아래화면에 보여집니다.

cmd 설정

• cmd창에서와 같이 명령어 실행이 안됩니다.
  

• 이유는 위와 같이 powershell로 되어 있기 때문입니다.
• Ctrl + Shift + P 키를 눌러 Command Paletter를 엽니다.
• 그 후 Terminal: Select Default Shell를 > Command Prompt 선택
• vsCode를 껏다 키면 위 이미지 select box에 cmd가 나옵니다.
• cmd 선택 후 명령어를 치면 window cmd와 같이 동작됩니다.

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

• VS Code 완전 삭제

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

• Right click on Windows folder and open with Visual Studio Code
• Visual Studio Code의 Java 확장을 이용한 간단한 프로젝트 구축
• VS Code Windows용 단축키
• JavaScript Standard Style

1. VS code 사용자 snippets 만들기 - html