비주얼스튜디오 코드 셋팅하기

[환경설정]
File>Preferences>Settings(F1 > settings검색)

 

 

Tab Size: 2 - 탭키 누르면 두칸 들여쓰기, 에디터마다 기본 탭사이즈가 다르므로 두칸으로 통일시키기 위해
Word Wrap: on - 텍스트가 화면보다 길경우 아래로 내려줌
Bracket Pair Colorization: 허용 - js에서 중괄호 컬러링

 

---

[extension]
live server새로고침없이 저장후 바로확인
beautify: html, css formatter, beautify selection 단축키지정(alt + b), join lines 단축키지정(alt + j)
prettier 코드 formatter

- default formatter > prettier로 변경
- settings > format on save 체크

- prettier.printWidth (default: 80) -> 200 한줄에 찍히는 최대크기, jQuery작성시 200글자 이상만 prettier적용
- prettier.singleQuote (default: false) -> 체크, 문자열은 홑따옴표 통일
-- css파일에도 적용되어 한줄 작성 불가, html에 적용시 <img> -> <img />(xhtml 호환을 위해 변경됨)
-- .prettierignore파일로 무시규칙 작성
# Ignore all HTML files:
*.html

# Ignore all css files:
*.css

---

 

================= 추가사항 =================
vscode jQuery 자동완성은 html에 내부스크립트에서만 동작하므로 npm을 이용하여 패키지 따로 설치
- npm install -D @types/jquery
- npm으로 지역설치하면 프로젝트폴더에 node_modules안에 설치, -D는 --save-dev 약자이며 package.json에 개발의존성목록에 추가되어 빌드시에 포함되지않게함

 

 

---

 

[오쌤만 쓰는기능]
css 툴팁끄기(강의중화면크기 키울경우만 사용, 코드화면이 가려지므로)
F1 - settings검색 - open settings(json)
"editor.hover.enabled": false

주석 노란색변경
"editor.tokenColorCustomizations": {
        "comments": "#ffec18"
    },