VSCode 익스텐션 필수! 리스트

✔️ VS Code 다운로드&설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

✔️Extension에 들어가기

 

✔️Material Theme

: VS Code 테마 및 아이콘 변경하는 플러그인

 

✔️Material Icon Theme

: 파일 아이콘을 깔끔하고 보기 좋게 변경해주는 도구(HTML,CSS,JS 등 해당 아이콘으로)

 

✔️Live Server

: html, CSS와 같은 웹 페이지를 만들 때 내가 소스 코드를 수정함에 실시간으로 변경 사항을 확인할 수 있는 도구

 

✔️Prettier

: 소스 코드 스타일을 정리해주는 도구. 여러 규칙을 사용자가 커스텀 할 수 있다. 비슷한 확장 프로그램으론 Beautify가 있다. Prettier는 코드를 강제적으로 변경시키는 느낌이 있고, Beautify는 좀 더 자유롭게 유지하고 변경시키는 느낌이 있다.

 

• Prettier Setting: File → Preferences → Settings or Ctrl + comma(,) 

 

• Tab Width:2

• print Width: 80 or 100

• Quote Style: double

• Format On Save: 체크

• Format On Type: 체크

 

✔️ Bracket Pair Colorization Toggler

: 괄호에 색상 지정

 

✔️indent rainbow

: 들여쓰기 별 색상 지정

 

✔️Auto Rename Tag

: 시작 태그의 이름 변경 시 닫는 태그의 이름 자동 변경

 

✔️CSS Peek

: html에서 css 선택 시 찾기 기능

 

✔️HTML CSS Support

: html에서 css 자동완성

 

✔️TabOut

: Eclipse의 tab을 이용하여 커서 이동과 같은 기능

 

✔️(Vue.JS사용 시 추천) Vetur

: 코드의 하이라이팅, 포맷링, 스니펫 기능과 더불어 ESLint 및 Prettier와 통합되어 문법 및 오류 검출과 코드 작성 규칙 등 Vue를 사용할 때 필요한 다양한 기능을 제공한다.

 

✔️(Vue.JS 사용 시 추천) Vue 3 Snippets

: Vetur에서 지원하지 않는 자동완성까지 적용

 

✔️Error Lens

: 즉각으로 에러난 부분을 알려줌

 

✔️ESLint

: JS의 코드의 오류 혹은 안티 패턴에 대한 정보와 코드 스타일의 일관성을 높이기 위한 기능 등을 제공한다. 쉬운 커스터마이징과 높은 확장성을 제공하여 실무에서 많이 활용된다. ESLint를 설치하면 Import 된 프로젝트 폴더 최상위 경로에 [.eslintrc.js]파일이 생성된다. 

 

✔️EditorConfig for VS Code

: 다양한 IDE와 VScode를 포함한 Atom, Brackets 등의 에디터에서 일정한 코드 convention을 유지할 수 있게 여러가지 옵션과 설정을 지정할 수 있는 기능을 제공한다. EditorConfig를 설치하면 Import된 프로젝트 폴더 최상위 경로에 [.editorconfig]파일이 생성된다. 

 

 

✔️Emmet

• 문서 템플릿 : !+Enter
• css : link
• script : script
•  자식 : >
• 형제 : +
• 부모 : ^
• 여러 개 : *
• 그룹 : (
•  아이디, 클래스 : #, .(dot)
• 문자열 : {}
• 넘버링 : {$}*