[에디터] html, css만 쓰는 사용자의 vscode 설정

 

 

 

제가 기본으로 해두는 vscode 설정입니다

 

1. 자동 줄바꿈하기

설정 - 검색 - word wrap - editor: word wrap을 on으로 설정

 

2. 한국어 설정

플러그인 - 검색 - korea - install - 우측 하단에 뜨는 재시작 알림창 ok 클릭

 

3. 미니맵 해제

설정 - 검색 - minimap - editor > minimap:abled 체크 해제

 

4. live server 새로고침 주기 설정

설정 - auto save delay 검색 - 숫자 변경 (1000 = 1초)

 

5. 익스텐션(플러그인) 설치

1) live server

브라우저에서 미리보기

 

2) css-compact

css 코드 포맷을 단축키 한번으로 깔끔하게 한줄로 바꿔준다

/*전*/
input{
	margin:0; 
	padding:0;
}

/*후*/
input{margin:0; padding:0;}

 

3) HTML End Tag Labels

태그 끝에 이 태그가 어떤 클래스를 가진 것인지 표시해준다

 

4) px to rem & rpx & vw (cssrem)

이름이 다소 길긴하지만 ... css 작성할 때 단위를 자동 변환해서 알려주니 따로 계산할 필요가 없는 편리한 익스텐션이다

ex: font-size: 16px 이라고 입력하면 오른쪽에 1rem이라고 자동으로 변환하여 알려주는 식이다.

 

5) highlight

-

 

6) colorize

-

 

7) 테마 설치

MacOS Modern Light - Ventura Xcode Low Key 를 쓴다

처음에는 다크 테마를 선호했는데 갑자기 밝아지고싶(?)어서...