vscode 설정 및 extension

VSCode 설정

1. 탭↔ 스페이스 전환 설정

  1. 세팅메뉴 >> Text Editor insert Spaces 체크 -> Tab키를 누르면 띄어쓰기로 적용된다.

  1. Coeditor: Tab Size >> Commonly Used editor: Tab Size 값 바꾸기 → Tab키를 누를시 띄어쓰는 칸 조절

폰트 사이즈

  1. settings >> Text Editor >> Font → 폰트 사이즈 조절

폰트 변경 (가동성 좋은 폰트)

  1. 구글에 D2coding 검색해서 다운로드

  2. 클릭하면 아래 사진과 같이나오고 '서체 설치' 버튼을 클릭

  1. Text Editor >> Font >> Editor:Font Family에 아래 사진과 같이 D2Coding을 앞에 입력해주고 VScode 껏다 키면 적용된다

컬러로 구부하기

코드의 Depth를 색으로 구분한다.

settings.json에 다음 내용을 추가하면 중괄괄호 컬러를 커스텀 할 수 있다.

  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#d1c81d",
    "editorBracketHighlight.foreground2": "#c172d9",
    "editorBracketHighlight.foreground3": "#5caeef",
    "editorBracketHighlight.foreground5": "#D08770",
    "editorBracketHighlight.foreground6": "#A3BE8C",
    "editorBracketHighlight.unexpectedBracket.foreground": "#dd1b22"
  },


VSCode Extension

1. Auto Rename Tag - 태그 자동 수정

2. Prettier - 자동 코드 포멧

  1. command + shift + P
  2. Format Document 검색 클릭 >> 자동 코드 포멧

format on save >> 체크 editor: default Formatter에서 prettier 설정

3. Indent Rainbow - 들여쓰기 하이라이트

들여 쓰기로 컬러가 하이라이트 된다.

4. Material Theme - 테마

VSCode 테마를 변경할 수 있다.

5. Material Theme Icons - 아이콘 테마

각 파일에 아이콘을 가독성있게 보여준다.

6. CSS Peek - CSS 파일로 이동

html에서 작성한 CSS파일을 보여주고 이동할 수 있다.