vscode 의 장점 중 하나 는 사용 자 가 원 하 는 대로 단축키 와 플러그인 을 세팅 해서 쓸 수 있 다는 것 이 다 ! ​ 그래서 내 가 주로 다루 는 html css ( + js ) 를 편하 기 쓰 기 위한 플러그 인 들 을 찾 고 , 깔 아 보 려 한다 . 플러그인 설치 및 관리 는 왼쪽 의 초콜릿 아이콘 을 누르 면 가능 하 다 ! ​​ Live Server 이 플러그인 은 저번 포스팅 에서 도 소개 했 던 플러그인 으로 , 내 가 치 고 있 는 코드 의 변화 를 실시간 으로 보여 주 는 짱짱 플러그인 이 다 . ​ 웹 프론트엔드 ( 웹 퍼블리싱 ) 관련 공부 를 하 며 , 정말 중요 한 것 이 웹 에 내 가 구상 한 디자인 이 잘 반영 되 었 는가 ? 인데 이 플러그인 을 사용 하 면 확인 이 매우 쉬워진다 ! ​ vscode 로 웹 프론트엔드 ( 웹 퍼블리싱 ) 관련 공부 를 한다면 꼭 까 는 것 을 추천 한다 . ​​​* 자세 한 사용 방법 은 이 포스팅 의 하단 부분 을 참조 ! 실무 에서 많이 쓰 는 에디터 , [ VScode 설치 및 html 세팅 하 기 ] 웹 프론트 , 웹 퍼블리셔 관련 공부 를 하 면서 그동안 코드 펜 이 라는 사이트 를 통해 연습 을 했었 다 . ​ 이 사이트 . .. blog . naver . com ​​​​ Auto Rename Tag 짝 으로 묶인 태그 가 있 을 때 , 하나 를 수정 하 면 다른 하나 도 자동 으로 수정 해 주 는 플러그인 ! 와 ! ​​​​​ Auto close tag 위 플러그인 이 랑 약간 비슷 한 듯 다르 다 . 짝 태그 작성 시 , 여 는 태그 를 작성 하 면 닫 는 태그 는 자동 으로 만들 어 준다 . ​​​​​ Bracket Pair Colorizer 코드 를 치 다 보 면 괄호 가 너무 많 아 져서 혼란 스러울 때 가 있 다 . ​ 이 를 해결 해 주 는 플러그인 으로 , 괄호 별로 다른 색 으로 나타내 주 어 괄호 구분 을 도와 준다 . 플러그인 상세 설명 페이지 캡쳐 ​​​​​ Color Highlight 디자이너 들 에게 정말 중요 한 플러그인 이 지 않 을까 싶 은 녀석 ! 프로그램 의 코딩 화면 에서 내 가 사용 한 컬러 를 직접 보여 주 는 플러그인 이 다 . ​​ 위 사진 처럼 컬러 이름 앞 에 네모 박스 로 해당 컬러 를 직접 보여준다 . ​​​​​ Color Info 사용 된 컬러 의 디테일 한 정보 들 을 보여준다 . 종종 필요 할 듯 . ​​ 플러그인 상세 페이지 캡쳐 ​​​​​ ​ Highlight Matching Tag 내 가 선택 한 태그 의 짝 태그 를 찾 아서 하이라이트 표시 를 해 주 는 플러그인 이 다 . ​ 이런 식 으로 ! ​​​​​ hightlight - selections - vscode 내 가 선택 한 단어 들 을 모두 하이라이트 해 준다 . ​ 단어 들 을 고쳐야 할 때 쓰 면 좋 을 듯 ! ​​​​​ IntelliSense for CSS class names in HTMLcss 클래스 이름 을 추천 해 주 는 플러그인 이 다 . ​ css 를 빠르 고 쉽 게 사용 할 수 있 게 해 주 는 너무 좋 은 플러그인 . vscode 에서 css 를 사용 한다면 꼭 까 는 걸 추천 한다 . ​​​​​ Korean Language Pack for Visual Studio Codevscode 프로그램 이 온통 영어 라 어렵 다면 이 한국어 패치 플러그인 을 적용 해 보 자 ! ​​​​​ Bracket Pair ColorizerBracket Pair Colorizer 나 처럼 혼자 공부 하 는 게 아니 라 다른 사람 들 과 협업 을 하 고 있 어서 코드 를 공유 해야 한다면 위 플러그 인 들 이 꼭 필요 하 다 . ​ 왜냐하면 협업 을 하 게 되 면 코드 를 작성 할 때 제시 되 는 가이드라인 인 코딩 컨벤션 이 중요 해 지 는데 , 위 두 플러그인 이 코딩 컨벤션 세팅 을 도와 주 기 때문 이 다 . ​​ 물론 ! 지금 의 나 에게 는 필요 가 없 다 . 혼자 공부 하 고 있 으니까 . .. ㅎ 나중 에 깔 아서 사용 해 보 는 걸로 하 고 넘어가 는 걸로 . ..​​​​​ Bracket Pair Colorizer 내 가 지금 치 고 있 는 코드 의 내용 을 실시간 으로 다른 사람 들 에게 공유 할 수 있 게 해 주 는 플러그인 . 나 는 지금 필요 하 진 않 아서 깔 아만 두 었 다 . ​ ​ 이 외 에 도 다수 의 편리 한 플러그 인 들 이 존재 한다 . 그러므로 vscode 에 각자 필요 한 플러그인 을 설치 하 여 , 편하 게 코딩 을 공부 해 보 자 !