[VS Code] 설치하면 좋은 확장 프로그램, Live Server 실행 방법

0. Visual Studio Code(VS Code) 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

가장 먼저, 비주얼 스튜디오 코드를 먼저 설치해주세요 !

 

일단 확장 프로그램을 설치하려면, 비주얼 스튜디오 코드 왼쪽 아이콘 중 하단에 있는 아이콘을 선택하면 된다. 

Extensions 확장 아이콘

쉽게 말해 플러그인이라고 생각하면 되고, 비주얼 스튜디오 코드를 더 쉽게 사용할 수 있게끔 도와주는 서브 프로그램, 도구라고 생각하면 된다. 

위 파란색 네모로 표시된 아이콘을 선택하면 되고, 해당 창에서 검색하여 설치하면 된다 !

반응형

1. Korean Language Pack

Korean Language Pack

제목을 보면 알 수 있듯이 VS Code 용 한국어 팩이다. 지금 캡쳐본도 보면 제거, 자동 업데이트 등 한국어로 표시되어 있는 것을 볼 수 있는데 저 확장팩을 설치한 후 캡쳐를 해서 그런 것이다. 

한글로 표시를 해주는 것이다보니, 굳이 안해도 되긴 하지만 하면 편하다는 장점이 있다 !

 

2. Material Theme

이 확장팩은 VS Code의 테마를 마음에 드는 것으로 변경 할 수 있도록 도와준다. 

 

설치를 하고 나면, 색 테마 설정을 통해 여러 가지의 테마를 확인하고 변경할 수 있다. 

여기에서 마음에 드는 테마로 선택하여 좋아하는 것을 선택하면 된다. 

 

3. Material Icon Theme

파일 별 확장자에 맞게 나오는 아이콘을 Material Icon으로 변경해주는 확장 프로그램이다. 

 

4. Auto Rename Tag

HTML 파일을 작성할 때 태그의 이름을 변경할 때, 시작하는 태그와 닫는 태그가 자동으로 같이 수정이 된다. 

즉, 원래 태그를 수정할 때에는 시작하는 태그를 수정하면, 닫는 태그도 직접 수정을 해줘야 한다. 

하지만 위 확장 프로그램을 설치하면 어느 한 쪽의 태그를 수정할 때 쌍인 태그도 같이 수정이 되어서 아주 편리한 확장 프로그램이다. 

 

5. HTML to CSS autocompletion

이것은 CSS에서 코드를 작성할 때 HTML에서 사용한 속성 이름을 자동완성해주는 기능을 지원해준다. 

 

6. HTML CSS Support

이것은 바로 위에 있는 확장프로그램과 반대의 기능을 지원해준다. 

즉, html 요소의 class에서 css 선택자 요소를 쓸때 자동 완성 기능을 지원해주는 익스텐션이다.

부트스트랩 같은 거대한 css 프레임워크를 사용할때 매우매우 유용하다고 한다. 아주 빠르게 클래스 속성 코딩이 가능한 확장 프로그램이다 !

728x90

7. CSS Peek

HTML에서 작성한 클래스를 바로 찾아가고 싶을 때 바로 CSS 파일을 찾을 수 있도록 지원해주는 확장 프로그램이다. 

사용 방법은 Ctrl 키를 누르면서 찾고싶은 클래스의 이름을 마우스 왼쪽 버튼으로 클릭해주면 된다. Ctrl 키 + 클래스 클릭

즉, 컨트롤키를 누른 상태로 html요소를 클릭시 정의된 css파일로 이동하게 된다. 

 

8. Autoprefixer

CSS3의 벤더프리픽스를 자동으로 붙여주는 확장 프로그램이다. 

animation이나 flex 등 벤더프리픽스가 필요한 class를 자동으로 찾아 한 번에 벤더프리픽스를 처리해준다. 

벤더프리픽스라는 개념은 다음과 같다.

일부 CSS3의 속성들은 구버전에서도 문제없이 돌아가도록 하기 위해서 브라우저별로 각기 다른 접두사를 붙여주는 것을 벤더프리픽스를 붙여준다 라고 표현한다. 

 

Autoprefixer의 작동 방법은 CSS 파일이 선택되어 있는 상태에서 명령(command) 팔레트창을 열어준 후 Autoprefixer:Run을 입력하여 실행시켜주면 된다. 

 

9. indent-rainbow

들여쓰기의 색상을 무지개 색상으로 표현해줌으로써 가독성을 높여주는 확장 프로그램이다. 

 

10. Live Server

웹 브라우저를 새로고침하지 않아도, 변경한 코드를 실시간으로 확인할 수 있는 아주 좋은 확장 프로그램이다. 

 

Live Server 사용 방법은 Ctrl+Shift+P를 눌러 커맨드 팔레트 창을 켜준 후, Live Server: Open with Live Server을 눌러주면 쉽게 실행된다. 

 

11. Prettier

포맷팅을 자동으로 해주는 확장 프로그램이다. 

불필요한 문법을 예쁘게 정렬을 해준다. 그래서 p 태그 안에 엔터를 쳐도 저장을 하면 다시 예쁘게 정리해주는 역할을 하는 확장 도구이다.