자동 줄 바꿈

Alt + z (Toggle)

메뉴바 표시

Alt

setting창 열기

mac: cmd + ,
windows: ctrl + ,

이모지

windows: windowsKey + ; (세미콜론)

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

순서

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처럼 경로만 바꿔주면 된다.

• vscodeopenfolder.zip

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

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

링크

• VSCode 저장 시 자동 format 지정[VSCode]
• 자동정렬기능 스타일 변경

* 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
15. 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

• [VS Code] Extension 파일 위치
• VS code 사용자 snippets 만들기 - html
• Firefox Developer Edition을 VS Code 기본 브라우저로 설정하기
• [vscode] 파일 자동 저장 설정하기

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