윈도우에서 VSCode 사용하기

💡 윈도우환경에서 VSCode를 사용하며 생긴 이슈들을 이 포스트에 지속적으로 업로드할 예정

첫 화면에서 튜토리얼(Get start with VS Code)을 안내하는데, 이 튜토리얼을 따라해보길 추천한다.

• Visual Studio Code Tips and Tricks 에서 모든 기능들을 안내하고 있다.
• JavaScript in VSCode 소개 페이지처럼 TOPIC를 눌러보면 각 언어별로 VSCode에서 제공하는 편의 기능(IntelliSense 등)을 볼 수 있다.

Commit & Push

왼쪽 버튼에서 간단하게 커밋과 푸시가 가능하다. 스테이지에 올라간 항목도 가시적으로 확인 가능하기에 편리하다.

⚙️Tips and Tricks

복수의 폴더 열어놓고 작업하기

EXPLORER탭에서 우클릭 → Add folder to Workspace

Emmet

Emmet in VSCode 소개 페이지

• Emmet Cheat Sheet을 참고해서 자주 사용하는 코드를 체크하자.
  • ul>li*3 이런 식으로 입력하면 편리하게 리스트를 작성할 수 있는 기능이다.
    • 오른쪽에 뜨는 emmet으로 미리보기도 가능하다.
  • ! 를 입력하면 html 기본 템플릿이 자동으로 작성된다.

💡 자주 사용하는 단축키 모음

멀티 커서

• 수동 지정은 Alt+Click 으로 가능하다. alt를 누른채로 원하는 곳을 클릭해주면 된다.
• Ctrl+Alt+Up or Ctrl+Alt+Down
  • 멀티커서를 위 아래로 넓힌다.

선택

• 단어 선택. 여러번 사용하면 멀티 선택이 가능하다.
  • Ctrl+D
• 현재 선택한 문자열 또는 커서 주변의 단어와 일치하는 문자열 모두를 선택한다.
  • Ctrl+Shift+L
• Shrink / expand selection : 단위로 묶어서 선택을 늘려갈 수 있다.
• Shift+Alt+Left or Shift+Alt+Right

행 전체 다루기

• 현재 행 전체 선택 : Ctrl+L
• 라인 전체 위아래 복제 : Shift+Alt+Up or Shift+Alt+Down
• 현재 행 전체 삭제 : Ctrl+Shift+K
• 현재 행 위아래로 이동 : Alt+Up or Alt+Down

Code folding

Ctrl+Shift+[ and Ctrl+Shift+]

이동

• Go to Symbol in FIle : symbols를 그룹으로 묶을 수도 있다.
• Ctrl+Shift+O
• Go to Referencse
• Select a symbol then type Shift+F12

ETC

• Vertical rulers를 만들 수도 있다.

---

⚙️Extension 추천

좌측 Extension 탭에서 다운받을 수 있다. 원하는 익스텐션을 찾아 install을 누르면 설치 끝.

1. VS code를 마크다운 에디터로 쓰는 방법

1. install Markdown all-in-one
2. install GitHub Markdown Preview
   • https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles
   • https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview
     • 이것까지 인스톨해야 emoji와 checklist를 제대로 보여준다.

2. Prettier - Code formatter

기능

• 자동으로 코드를 보기 좋게 정렬해준다.
  • 들여 쓰기, 중괄호 위치 등 일관성있게 보여줘 가독성이 향상된다.
• 무엇보다 코드 맨 끝에 ;를 붙여주는 편이 압도적으로 편리하다!

사용법

• setting에서 default formatter를 prettier로 설정해준다.
• Format On Save 를 체크
  • 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬.
  • 단축키가 다소 불편하다. shift+alt+f
  • 따라서 저장할 때 자동으로 실행되게 하는 옵션을 활성화해주는 편이 좋다.
• Format On Paste 를 체크
  • 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬.

설정

익스텐션탭에서 Prettier의 ⚙️ 버튼을 누르면 설정창이 나온다.

• 줄바꿈할 글자수의 기본 값은 80으로 되어있는데 160~200 정도가 편하다는 의견이 있어 160으로 해두었다.

3. Bracket Pair Colorization Toggler

괄호의 색을 짝지어 구분해서 보여준다. 어느 괄호를 사용중인지 알아보기 편하다.

4. CSS Peek

HTML 내부에서 ID나 Class 의 css를 바로 볼 수 있게 해준다.

5. Material Icon Theme

파일 이름 앞의 아이콘으로 파일 포맷을 구분하기 쉽게 보여준다.

6. Auto Rename Tag

HTML 태그를 수정할 때 닫는 태그도 함께 바꿔준다.

7. Code Spell Checker

맞춤법 검사기. 예를 들어 value를 vallue라고 입력했을 때 밑줄을 그어 경고해준다.

8. Error lens

문제가 있는 부분을 빨간 배경색으로 눈에 띄게 표시해준다.

9. Live sever

라이브 서버로 실시간으로 변경 사항을 반영하여 확인할 수 있다.

10. Workspace Sidebar

워크스페이스 관리 및 전환을 편하게 해준다. 처음 익스텐션을 설치한 후 Setting에 들어가서 Workspace Sidebar: Folder 항목에 내 워크스페이스 파일들이 들어있는 경로를 입력해주면 된다. 클릭만으로도 워크스페이스를 옮겨다닐 수 있어서 정말 편하다.

---

🔗 REF

https://365kim.tistory.com/51

https://engineer-mole.tistory.com/204

https://rudalskim.tistory.com/133

https://born-dev.tistory.com/7

https://staticclass.tistory.com/125

https://ux.stories.pe.kr/150

ESLint와 통합 https://pstudio411.tistory.com/entry/아-보기-좋은-코드다-Prettier-알아보기