vscode 설정 및 extension

2021.10.01

VSCode 설정

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

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

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

폰트 사이즈

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

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

구글에 D2coding 검색해서 다운로드
클릭하면 아래 사진과 같이나오고 '서체 설치' 버튼을 클릭

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

내가 쓰는 폰트

Menlo는 맥에 기본 폰트로 보기 편하다. 단, 한글 적용이 안되서 D2Coding를 뒤에 쓴다.

(앞에서 부터 순차적으로 적용이 되며 폰트가 없으면 뒤에 폰트가 적용된다.)

컬러로 구부하기

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

설정하기 settings에 다음 내용을 체크한다.

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 - 자동 코드 포멧

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

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

tab길이 지정

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

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

4. Material Theme - 테마

VSCode 테마를 변경할 수 있다.

5. Material Theme Icons - 아이콘 테마

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

6. CSS Peek - CSS 파일로 이동

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