compotable Extensions
- Korean Language Pack for Visual Studio Code
: vscode 한국어팩 제공
- Prettier
: 코드를 사용자의 옵션에 따라 스타일을 맞춰 변경해서 사용 가능.
- Live Server
: 작업한 소스의 서버를 띄우고 화면으로 볼 수 있는 환경을 제공함.
마우스 우클릭 + Open With Live Server 로 브라우저를 열어 확인
- Code Runner
: 컴파일 실행을 지원해줘서 결과값을 바로 확인할 수 있다. (console 처럼 사용)
- Indentation Level Movement
: 코드를 문단 단위로 빠르게 위/아래로 이동 시킬 수 있다.
- Bracket Select
: alt+a 로 bracket 단위로 문자열을 선택할 수 있다.
- Doxygen Documentation Generator
: /** + enter 입력하면 자동 주석 블락을 만들어 준다. 해당 기능은 각 메서드의 param 을 설명할 때 주로 사용된다.
HTML extensions
- Auto Close Tag
: tag 자동닫기
- Auto Rename Tag
: tag 명을 바꿀 때 자동으로 꼬리tag 까지 같이 바뀌게 해줌
- html tag wrapper
: tag 그룹을 wrapping 시켜줌.
wrapping 하고자 하는 tag 그룹을 선택하고,
명령팔레트에 'wrap with abbreviation'라고 입력. (보통 'wrap' 만 입력해도 나옴)
Emmet: wrap with abbreviation 이라고 뜨는 항목 선택 후, div 입력하면
선택된 tag 그룹이 div 태그로 감싸짐.
- Bracket Pair Colorizer
: 중첩되어 사용된 괄호들을 색으로 구분하여 확인하기 편하게 해줌.
vscode 에서 제공되는 기능이 생김.
위 확장팩을 제거하고, 설정에서 bracket pair 를 검색해서 해당 설정의 옵션값을 active로 변경하여 사용.
setting.json 설정으로 각 괄호의 색상 변경도 가능. 설정 방법은 아래 링크 참고.
[How to configure VS Code Bracket Colors]
- Font Awesome Auto-complete & Preview
: font awesome 자동완성.
<i class="fa-" 로 시작 시 자동완성 해줌.
CSS extensions
- CSS Navigation
: class 속성을 확인할 때 css 위치를 확인해준다. f12 를 누르거나 ctrl+클릭 으로 확인할 수 있음.
- Color Highlight
: 색상코드에 맞는 color 가 highlight 되어 해당 색상을 바로 확인할 수 있음.
- IntelliSense for CSS class name in HTML
: html 코드 작성 시 css class 이름을 자동완성 해줌.
.etc extensions
- Project Manager
: 여러개의 프로젝트 작업 시 다른 프로젝트로 변환 할 때 IDE를 사용하는 것 처럼 쉽게 변환해 줌.
- Thunder Client
postman 과 같은 API 데이터 확인 시 사용되는 툴. [Thunder Client]
- IntelliCode
: 코드 추천 완성 기능
- project-tree
프로젝트 트리를 텍스트 형식으로 마크다운으로 저장해줌. [project-tree]
- Better Comments
: 주석의 필요성에 따라 색상을 다르게하여 표현
더 다양한 색을 제공하는 Colorful Comments 라는 더 확장팩도 있지만 구지 ,,
- Polacode
선택된 코드를 스크린샷으로 저장시켜줌. [Polacode]
- Random Everything
테스트용의 랜덤 값을 추출. [Random Everything]
- Power Mode
입력하는 커서에 애니메이션 효과를 줌
setting에서 enabled: true, presets 등 사용자 지정 옵션을 넣어줘서 사용 가능.
