비주얼스튜디오코드를 사용하는 데 있어 유용한 확장프로그램 추천 10가지를 추천합니다
* Bracket Pair Colorizer 2 - 내장됨
Bracket Pair Colorizer 2의 경우 이제는 별도로 설치할 필요가 없습니다. 내장되어 있거든요.
Bracket Pair Colorizer 2의 경우 다음과 같이 { }의 짝을 손 쉽게 확인할 수 있어 매우 편리합니다.
1. css-compact
css-compact의 경우 Shift + alt + f 키를 통해 css를 한줄로 정렬할 수 있습니다. css가 어느정도 실력이 늘다보면 한줄로 코드를 작성하는 편이 가독성이나 관리면에서 좋습니다. 이 기능은 오직 css 파일에서만 가능합니다.
다음과 같이 코드가 한줄로 정열되어 편리합니다. (Shift + alt + f 키)
2. Material Theme
Material Theme는 비주얼스튜디오코드의 테마를 적용할 수 있습니다. 다양한 테마를 선택해보세요.
왼쪽의 익스텐션 메뉴를 선택 후, Material Theme 항목을 클릭한 후, 다음과 같이 테마를 선택하면 됩니다.
3. Material Icon Theme
Material Icon Theme은 문서의 아이콘을 적용시켜줍니다.
Material Icon Theme을 적용한 모습입니다. 파일별로 예쁘게 적용됩니다. 귀엽네요.
4. Prettier -Code formatter
한마디로 Code formatter입니다. 기본적으로 많이들 사용합니다. 설정을 통해 자신의 입맛에 맞게 수정할 수 있습니다. 기본값을 그냥 사용해도 무방합니다.
5. open in browser
브라우저에서 미리 볼 수 있는 유용한 기능으로 단축키 Alt+B를 사용합니다.
6. indent-rainbow
코드를 예쁘게 들여쓰기 할 수 있습니다.
다음과 같이 코드가 예쁘게 들여쓰기 됩니다. 좋네요.
7. Auto Rename Tag
자동으로 코드를 수정할 수 있는 매울 편리한 확장프로그램입니다.
다음과 같이 여는 태그를 수정하면 닫는 태그를 자동으로 같이 변경해줍니다. 매우 편리합니다.
8. CSS Peek
html 작업시 연결된 css 클래스나 아이디로 바로 이동할 수 있는 매울 편리한 확장프로그램입니다. 설치후, 비주얼스튜디오코드를 재실행해야 작동됩니다.
Ctrl을 누른채 클릭하면 다음과 같이 바로 이름이 떠서 css 파일로 이동하여 수정할 수 있습니다.
9. HTML CSS Support
HTML CSS Support는 css 파일에서 선언된 클래스나 아이디를 바로 선택하여 적용할 수 있어 매우 편리합니다.
다음과 같이 바로 선택자가 나타나 매우 편리합니다.
10. Live Server
Live Server는 실시간으로 서버처럼 html 문서를 확인할 수 있는 매우 편리한 확장프로그램입니다.
마우스오른쪽 클릭하여 Open with Live Server를 클릭하여 실행합니다.
이상으로 10가지 확장프로그램을 살펴보았습니다. 좀 더 손 덜 아프게, 빠르게 코딩하세요~
'자바스크립트기초' 카테고리의 다른 글
| css 초기화코드 (0) | 2023.03.22 |
|---|---|
| Emmet을 이용한 빠른 코드 작성하기 (0) | 2023.03.06 |
