[VS Code] 초기 환경설정 (설정, 확장프로그램)

VS Code 다운로드

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

VS Code 환경설정 적용

1. word wrap - (가로로 긴 텍스트 있으면 자동으로 화면 크기에 따라 두줄로 만드는 기능)

2. tab size - tab 누르면 몇칸 space로 들어가는지 설정

 

word wrap 설정 방법

1. ctrl  ,    / 컨트롤과 ,(쉼표) 단축키 누름 ( 환경설정 )

2. 검색창에 word wrap 검색

3. Edito : Word Wrap [on] 설정,     기호에 따라 Diff Editor : Word Wrap도 설정

tab size 설정 방법

1. ctrl  ,    / 컨트롤과 ,(쉼표) 단축키 누름 ( 환경설정 )

2. tab size 검색

3. 기호에 맞게 tab size 수정

 

VS Code 플러그인 설치

플러그인	설명	비고
Korean Language Pack	에디터 한글화
Material Icon Theme	탐색기 아이콘 테마	폴더, 파일 가시성 증대
Material Theme	에디터 색 테마	글자색, 배경색 조정
Live Server	새로고침 없이 코딩 중인 웹 업데이트
indent-rainbow	들여쓰기 색으로 구분	범위 작업 편해짐
Bracket Pair Colorizer	여는 괄호와 닫는 괄호 짝 지어줌	VS Code 내장 기능으로 변경
Auto Rename Tag	여는 태그 수정 시 닫는 태그도 자동수정
Path Intellisense	코드의 Path 작성 시 현재 경로 인식하고 자동 완성 해줌
HTML CSS Support	html 요소의 class에서 css 선택자 요소를 사용 시 자동완성기능 제공	css에 class의 스타일을 지정해놓았다면 html에서 작업할 때 해당 class 작업내용이 있는 내역을 불러와서 자동완성 제공
HTML to CSS autocompletion	html의 클래스, id와 같은 사항을 연동시켜 자동완성이 가능하도록 도와줌
Auto Close Tag	시작태그를 적으면 자동으로 종료태그도 작성해줌
htmltagwrap	alt + w 의 단축키를 누르면 해당 문자열을 <p>태그로 감싸준다.
Highlight Matching Tag	태그의 범위(시작과 끝)를 색상이 있는밑줄로 그어서 범위를 알려준다.
HTML End Tag Labels	div의 종료태그에 해당 div태그의 클래스나 상속 관계를 주석으로 알려줌
px to rem	글꼴 크기 px를 rem으로 rem을 px로 바꿔주는 기능	Alt + z 하면 바꿔줌
Stylelint	css 스타일 문법 잡아줌, 코드 컨벤션 설정까지 가능한 도구	css문법 + 통일된 코드 포멧 만들어준다고함

 

Bracket Pair Colorizer 플러그인 적용 과정

1. ctrl  ,    / 컨트롤과 ,(쉼표) 단축키 누름 ( 환경설정 )

2. 검색창에 bracket pair 검색

3. 밑에 Editor > Bracket Pair Colorization:Enable 체크

4. 그 밑에 있는 Editor > Guides : Bracket Pairs [active] 설정

 

주석 색 변경하기

1. ctrl  ,    / 컨트롤과 ,(쉼표) 단축키 누름 ( 환경설정 )

2. editor.token 검색

3. Editor : Token Color Customizations    json에서 편집 클릭

4. 제일 하단 "editor.tokenColorCustomizations : { }" 안에 "comments" : "색상" 입력

 

 

참고 

얄팍한 코딩사전, 제대로 파는 HTML & CSS 강좌 - 웹 개발 퍼블리싱 끝장내기, 2022.06.02

https://www.youtube.com/watch?v=TrC2x4N0XqY