차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:util:vscode [2021/01/07 10:17]
jskim
+++ wiki:util:vscode [2023/03/25 18:03] (현재)
dhan
@@ 줄 16: / 줄 16: @@
   mac: cmd + ,
   windows: ctrl + ,
+이모지
+  windows: windowsKey + ; (세미콜론)
@@ 줄 24: / 줄 25: @@
 . 아무곳에나 ''vsCodeOpenFolder.reg'' 파일을 만든다 \\
 . 아래 코드를 방금 만든''vsCodeOpenFolder.reg''파일에 복사 붙여넣는다. \\
-. ''vsCodeOpenFolder.reg''파일을 오른쪽 클릭해서 맨위에 있는 ''병합''을 클릭하면 된다. \\
+\\
-<code bat>
+<code reg>
 Windows Registry Editor Version 5.00
 ; Open files
@@ 줄 48: / 줄 49: @@
 @="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%V\""
 </code>
-> Note: 위 코드에서 ''C:\\Program Files\\Microsoft VS Code'' 이 부분을 본은 ''VS code'' 위치로 바꿔줘야한다.
+. ''vsCodeOpenFolder.reg''파일을 오른쪽 클릭해서 맨위에 있는 ''병합''을 클릭하면 된다. \\
+\\
+> Note: 위 코드에 표기된 ''C:\\Program Files\\Microsoft VS Code\\Code.exe''는 기본 설치 경로이며,\\
+이 기본 설치 경로를 내 컴퓨터에 설치된 VS Code 설치 경로로 변경해야 합니다.\\
 \\
 > Tip : 아래 파일을 다운받아 위에 ''Note''처럼 경로만 바꿔주면 된다.
@@ 줄 60: / 줄 64: @@
 {{:wiki:util:vscode:vscodeshowmenu.png?700 |}}
 <WRAP clear/>
+\\
+링크
+  * [[https://mintyu.github.io/Format/|VSCode 저장 시 자동 format 지정[VSCode]]]
+  * [[https://charoon.tistory.com/8|자동정렬기능 스타일 변경]]
 \\
 ===== Plugin =====
-  * Material Theme
+* Visual Studio Code : Text Editor
-  * Material Icon
-  * Prettier
+==== Plugin ====
-  * Bracket Pair Colorizer/
+   - Material Theme : 테마
-  * Indent Rainbow
+   - Material Theme Icons : 파일 아이콘을 시각화해주는 플러그인
-  * Auto Rename Tag
+   - Prettier - Code formatter :
-  * CSS Peek
+      * 설치 후 Ctrl + ,(콤마) -> Settings > User > Text Editor > Formatting - Format On Save에 체크 표시 활성화
-  * HTML CSS SUPPORT
+      * Settings에서 prettier 검색 - Prettier: Tab Width를 2로 입력
-  * Live Server
+      * Settings에서 prettier quote 검색 - JavaScript > Preferences:Quote Style을 single로 변경 설정
-  * Mark Down Preview
+      * Settings에서 prettier quote 검색 - TypeScript > Preferences:Quote Style을 single로 변경 설정
-  * HTML to CSS autocompletion
+   - Bracket Pair Colorizer : 괄호를 컬러로 구분할 수 있어 코드 가독성 향상
-  * StandardJS - JavaScript Standard Style
+   - 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 엘리]]
@@ 줄 97: / 줄 124: @@
   * 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}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구