====== 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''처럼 경로만 바꿔주면 된다.
* {{ :wiki:util:vscode:vscodeopenfolder.zip |}}
\\
Alt단축키로 표시한 메뉴바 고정시키기\\
메뉴바 View - Appearance - Show Menu Bar 토글 체크
{{:wiki:util:vscode:vscodeshowmenu.png?700 |}}
\\
링크
* [[https://mintyu.github.io/Format/|VSCode 저장 시 자동 format 지정[VSCode]]]
* [[https://charoon.tistory.com/8|자동정렬기능 스타일 변경]]
\\
===== Plugin =====
* Visual Studio Code : Text Editor
==== Plugin ====
- Material Theme : 테마
- Material Theme Icons : 파일 아이콘을 시각화해주는 플러그인
- 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로 변경 설정
- Bracket Pair Colorizer : 괄호를 컬러로 구분할 수 있어 코드 가독성 향상
- Indent Rainbow : 들여쓰기를 4가지 컬러로 구분하여 보여줌
- Auto Rename Tag : HTML/XML 태그에서 쌍으로 된 태그를 자동으로 변경해줌.
- CSS Peek : HTML에서 CSS를 쉽게 찾아주는 플러그인 ( style 확인 시 Ctrl + 마우스 좌클릭 --> CSS 파일로 이동)
- HTML CSS SUPPORT : HTML의 id, class 속성 자동 완성 기능 제공
- Live Server : HTML파일을 브라우저에 자동으로 리로딩 기능 제공, HTML파일 내에서 마우스 우클릭 > Open with Live Server or Alt+L Alt+O
- Markdown Preview : VS Code 내장 기능, 프로젝트를 깃허브에 올릴 때 작성해야 하는 마크다운 파일 readme.md를 작성하면서 보여지는 것을 확인하는 플로그인, Ctrl+Shift+p > Markdown: Oepn Preview--> Preview readme.md창이 생성되며 확인할 수 있다.
- HTML to CSS autocompletion : HTML에서 정의한 클래스를 CSS에서 자동으로 완성해 주는 기능
- [[https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=dreamcoder&utm_content=description-only|kite-드림코딩 by 엘리 - AI기반 코드 자동 완성 툴]]\\
- StandardJS - JavaScript Standard Style
-
- htmltagwrap - 하나 이상의 텍스트 블록 설정 - ''Alt + W'' - 원하는 태그 입력
==== remote ssh 자동 로그인 설정 ====
* [[https://blog.naver.com/nan17a/222250464861|자동 로그인 설정]]
==== Ref ====
* HTML, CSS 확인
- [[https://jsbin.com/?html,output|jsbin.com]]
- [[https://jsfiddle.net/|jsfiddle.net]]
- [[https://codesandbox.io/s|codesandbox.io]]
[[https://www.youtube.com/watch?v=bS9yTI2fC0w&t=32s|비쥬얼 스튜디오 코드 설치 및 웹 개발을 위한 필수 익스텐션 10개 추천 by 엘리]]
[[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 by 엘리]]
[[https://emmet.io/|Emmet - the essential toolkit for web-developers]]
[[https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=dreamcoder&utm_content=description-only|kite-드림코딩 by 엘리 - AI기반 코드 자동 완성 툴]]\\
===== Terminal 사용하기 =====
> Terminal 실행
* ''상단 View > terminal'' 클릭 아래화면에 보여집니다.
> cmd 설정
* cmd창에서와 같이 명령어 실행이 안됩니다.\\
{{:wiki:util:vscode:cscodepowershell.png?direct&800|}} \\
* 이유는 위와 같이 powershell로 되어 있기 때문입니다.
* Ctrl + Shift + P 키를 눌러 Command Paletter를 엽니다.
* 그 후 ''Terminal: Select Default Shell를 > Command Prompt'' 선택
* vsCode를 껏다 키면 위 이미지 select box에 cmd가 나옵니다.
* cmd 선택 후 명령어를 치면 window cmd와 같이 동작됩니다.
\\
===== VS Code 완전 삭제 =====
- **.vscode 폴더** 삭제 -> C:\Users\사용자명\.vscode 폴더 삭제
- **Code 폴더** 삭제 -> C:\Users\사용자명\AppData\Roaming\Code 폴더 삭제
- **제어판**에서 삭제 -> 제어판\모든 제어판 항목\프로그램 및 기능\Microsoft Visual Studio Code 삭제
* [[https://medium.com/@indexx/vs-code-%EC%99%84%EC%A0%84-%EC%82%AD%EC%A0%9C-9cdc15aeba08|VS Code 완전 삭제]]
\\
=====Showing path in file-tabs in Visual Studio Code=====
파일 명 탭에서 경로 표시하기\\
File >> Preferences >> Settings >> "workbench label format" 검색 >> Workbench>Editor:Label Format >> //short// 선택\\
//
[[https://stackoverflow.com/questions/39598007/showing-path-in-file-tabs-in-visual-studio-code|Showing path in file-tabs in Visual Studio Code]]//
===== Tip =====
* [[https://zoosso.tistory.com/1161|[VS Code] Extension 파일 위치]]
* [[wiki:util:vscode:VS code 사용자 snippets 만들기 - html]]
* [[wiki:util:vscode:Firefox Developer Edition을 VS Code 기본 브라우저로 설정하기]]
* [[https://seong6496.tistory.com/315|[vscode] 파일 자동 저장 설정하기]]
===== Ref =====
* [[https://thisdavej.com/right-click-on-windows-folder-and-open-with-visual-studio-code/|Right click on Windows folder and open with Visual Studio Code]]
* [[https://www.sysnet.pe.kr/Default.aspx?mode=2&sub=0&detail=1&pageno=0&wid=11980&rssMode=1&wtype=0|Visual Studio Code의 Java 확장을 이용한 간단한 프로젝트 구축]]
* {{ :wiki:util:vscode:keyboard-shortcuts-windows.pdf |VS Code Windows용 단축키}}
* [[https://standardjs.com/readme-kokr.html|JavaScript Standard Style]]
{{tag>주레피 eleven 도봉산핵주먹 오션 vscode}}