# VisualCodeBasicSet ### go home! [:house\_with\_garden:](https://github.com/wnsgml972/midas_log) ## Visual Code Basic Setting ### 설치 #### Windows 다운로드 후 설치합니다. * #### Ubuntu **방법 1** 1. 에서 `Linux.deb`를 설치합니다. 2. `$ sudo dpkg -i code_1.23.1-1525968403_amd64.deb`를 입력합니다. 3. `$ code` 명령어로 VS Code를 실행합니다. **방법 2** 1. 에서 `Linux.deb`를 설치합니다. 2. 만약 방법 1에서 `Package libconf-24 is not installed.` 에러가 발생한다면\ `$ sudo apt-get install gconf-service-backend gconf-service gconf2-common libgconf-2-4`를 입력합니다. 3. `$ sudo dpkg -i code_1.23.1-1525968403_amd64.deb`를 입력합니다. 4. `$ code` 명령어로 VS Code를 실행합니다. ### VS Code Add In > 블로그에 최신 버젼 있음\~ **`ctrl + shift + X` 로 Extensions에서 검색할 수 있습니다.** #### [Setting Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync#review-details) * 다른 컴퓨터에서도 Setting을 동기화 시켜줍니다. * 현재 설정을 Github에 저장하기 **( `shift + alt + U` )** * Github에 있는 설정 내려받아 적용하기 **( `shift + alt + D` )** #### [View In Browser](https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser#review-details) * 단축기 `F1`을 통해 HTML 파일을 브라우저에서 볼 수 있게 해줍니다. #### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#review-details) * Javascript 개발 시 코드를 분석해 주는 확장기능입니다. #### [ftp-sync](https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync#review-details) * VS Code에서 바로 FTP로 업로드 또는 다운로드 할 수 있는 기능을 제공합니다. * 서버와 클라이언트 동기화를 기본기능으로 제공하고 열려져있는 파일을 수정하여 저장하면 자동으로 서버에 업로드합니다. ![ftp-sync](https://i.imgur.com/W9h4pwW.gif) #### [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons#review-details) * 좌측에 있는 트리메뉴와 에디터 상단에 있는 탭메뉴의 타이틀명 앞에 아이콘을 붙혀 주어서 해당 파일이 어떤파일인지 직관적으로 알 수 있게 표시를 해줍니다. ![icons](https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif) #### [Markdown Shortcuts](https://marketplace.visualstudio.com/items?itemName=mdickin.markdown-shortcuts#review-details) * Markdown에 대한 단축키를 제공해 주는 확장프로그램입니다. * 단축키나 마우스의 오른클릭을 하면 메뉴로 보여주기때문에 쉽게 Markdown을 작성할 수 있게 해줍니다. ![shortcuts](https://raw.githubusercontent.com/mdickin/vscode-markdown-shortcuts/master/media/demo/bullets.gif) #### [Table Formatter](https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter#review-details) * 테이블을 정렬해줍니다. ![formatter](https://raw.githubusercontent.com/shuGH/vscode-table-formatter/master/res/complex_demo.gif) ### 설정 동기화 * `Settings Sync` Add In을 사용합니다. * github에 토큰을 입력하여 `gist id`를 생성하고, `gist id`를 복사해서 다른 컴퓨터에 입력하여 사용하는 방식입니다. #### github 토큰 생성 1. Github에 로그인 한 뒤 `Settings -> Developer settings -> Personal access tockens`에 들어가 다음을 클릭합니다. ![SettingSync](/files/-LczQYkfM9L48bTnfJZo) 2. Token 설명을 입력하고 gist를 체크한 뒤 토큰을 생성합니다. ![SettingSync](/files/-LczQYkhQYCMZmAcWMnD) 3. 생성된 토큰을 복사합니다. ![SettingSync](/files/-LczQYkjivWlVqklN8TI) #### VScode Settings Sync 1. `ctrl + shift + X`를 입력하여 `Settings Sync`를 다운받습니다. 2. `shift + alt + U`를 입력합니다. 3. 이어서 나오는 창에 복사해 둔 **토큰을 입력합니다.** 4. 성공하면 다음과 같은 출력창이 출력됩니다. 5. 다음과 같은 출력창에 **제일 위에** 있는 `Github Token`과 `Github Gist`를 복사합니다. ![SettingSync](/files/-LczQYklXoPD-sr482Ol) #### 다른 pc에서 동기화하기 1. `ctrl + shift + X`를 입력하여 `Settings Sync`를 다운받습니다. 2. `shift + alt + D`를 입력합니다. 3. 이어서 나오는 창에 복사해 둔 `Github Token`과 `Github Gist`를 순서대로 입력합니다. 4. 이어서 나오는 확인창에 yes를 클릭하면 성공입니다. > 한번 설정 이후에는 Github에 올리고 내리는 단축기만 입력하면 쉽게 설정을 동기화할 수 있습니다. ### 유용한 단축기 #### Etc... * 각종 Add-In이나 전체 명령어 탐색 기능 **( `F1` )** #### Settings Sync * 현재 설정을 Github에 저장하기 **( `shift + alt + U` )** * Github에 있는 설정 내려받아 적용하기 **( `shift + alt + D` )** #### Markdown Shortcuts * 굵은 글씨 **( `ctrl + B` )** * 글씨 기울기 **( `ctrl + I` )** * 링크 **( `ctrl + L` )** * 이미지 넣기 **( `ctrl + shift + L` )** * 코드 블럭 생성/삭제 **( `ctrl + M, ctrl + C` )** * 인라인 코드 블럭 생성/삭제 **( `ctrl + M, ctrl + I` )** * 블릿 생성/삭제 **( `ctrl + M, ctrl + B` )** * 리스트 생성/삭제 **( `ctrl + M, ctrl + 1` )** * 체크박스 생성/삭제 **( `ctrl + M, ctrl + X` )** #### Basic Visual Code * 최근 파일이나 기호를 탐색 **( `ctrl + P` )** * `?` 를 입력하면 명령창에서 실행할 수 있는 명령 목록 조회 **( `ctrl + P`)** * 마지막 연 파일에 접근 **( `ctrl + shift + Tap` )** * 편집기 명령으로 바로 이동 **( `ctrl + shift + P` )** * 파일의 특정 기호로 이동 **( `ctrl + shift + O` )** * 파일의 특정 행으로 이동 **( `ctrl + G` )** * 주석 **( `ctrl + /` )** * 터미널 **( `` ctrl + ` `` )** * 코드 접기/펴기 **( `ctrl + shfit + [` )** **( `, ctrl + shfit + ]` )** * 마크다운 미리보기 **( `ctrl + K, V` )** * 현재 프로젝트 전체 파일에서 검색 **( `ctrl + shift + F` )** * Explorer 띄우기 **( `ctrl + shift + E` )** * Source Control 띄우기 **( `ctrl + shift + G` )** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wnsgml972.gitbook.io/midas_log/contents/basiceducation/visualcodebasicset.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.