VSCode 단축키 및 확장 플러그인

 

 

---

플러그인

 --Beautify 설치 
 --Auto Rename Tag  // <div> </div> 에서 하나를 변경하면 자동으로 매칭되는 태그명 변경됨
 --live server  

 --Material Icon Theme : 파일 아이콘 설정

 --bracket Pair Colorizer : 괄호 색 지정 (가독성)

 --Path intellisense : 경로 작업시 자동으로 경로를 잡아준다.

 --Auto Rename Tag : 쌍으로 된 태그 자동으로 수정

 --eslint : 코드 규칙

 --prettier : 코드 예쁘게

 --auto import : import 자동으로 안될 때  추가

eslint 설정 추가후 settings.json

    "editor.tabSize": 2    ,
    "emmet.variables": {
        "lang": "ko"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint" :true
    }

 

---

폰트

Dev Fonts : 

https://devfonts.gafi.dev/?fbclid=IwAR22QIGaseXOELpxviEjNIrkId9SPx6DJ0fAGJtG50wk1QWZPGWuopAu5ro

"editor.fontFamily": "'Lilex', 'Fira code'", 

"editor.fontLigatures": true,

 

---

단축키

 

• index.html 파일을 생성해서 ! 를 작성하고 엔터or탭키 -> 기본 템플릿 생성된다
• 태그 생성시 div 엔터or탭키
• beautify [ ALT + CTRL + L ]
• 커맨드창열기 [ ctrl + shift + P ]
• 창 전환 [ CTRL + PageUp/Down ]