HTML/CSS를 위한 VSCODE 설정

Python은 4 spaces, HTML/CSS는 2 spaces로 들여쓰기를 하기 때문에 vscode 설정이 필요하다.

Tabl 키를 눌렀을 때 .py 및 .html 확장자에 따라 각각 다른 spaces로 들여쓰기가 되도록 설정하는 것이다.

 

1. 기본적인 Visual Studio Code의 환경 설정은 settings.json 이라는 파일에 작성되어 있다.

* ctrl + shift + p 키를 누르면 차이 나오는데 그곳에 Open setting를 검색

* Preferences: Open Settings(JSON)을 찾아서 클릭

* settings.json 파일이 열린 것 확인

 

2. settings.json 파일에서 최상단 대괄호( {} ) 안에 아래와 같은 내용을 작성 후 저장하고 창을 닫는다.

* 추가적인 내용이 들어있는 것은 다른 설정들이니 크게 신경쓰지 않아도 된다.

* Default 설정이 4 spaces 이기 때문에 HTML/CSS 코드 일 경우 2 spaces로 tab을 구성한다.

 

3. 세팅을 마무리하고 test.html, test.py 파일을 만들고 Tab 키를 눌렀을 때

* .py 확장자를 가진 파일은 4 spaces

* .html 확장자를 가진 파일은 2 spaces의 들여쓰기가 되는지 확인

 

 

 

추가적으로 Visual Studio Code에 다음과 같은 설정을 하면 사용하기 편리하다.

* HTML/CSS 코드 작성을 위한 Visual Studio Code 추천 패키지

- HTML Snippets(3.9M), HTML CSS Support(4.2M)

- Open in browser(1.7M)

- Auto rename tag(4.1M), Auto close tag(3.8M)