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파일을 보여주고 이동할 수 있다.