[ Auto Complete Tag ]
: Auto Complete Tag는 Auto Close Tag, Auto Rename Tag 가 합쳐진 확장프로그램이다. Tag를 쓸때 시작과 동시에 자동으로 끝 Tag를 시작 Tag와 동일하게 바꿔주고 생성한다.
[ Auto Import ]
: import 해야되는 파일이 있을때 자동으로 인식하여 상단에 import 부분을 자동생성해준다.
[ Autoprefixer ]
: scss 같은 스타일 관련된 파일에서 브라우저마다 접두어가 다른 경우가있다
- -webkit- : 구글 , 사파리
- -moz- : 파이어폭스
- -ms- : 익스플로러 (보통생략)
- -o- : 오페라
예를 들면
#div{
background: -webkit-linear-gradient(left ,red ,blue)
background: -moz-linear-gradient(left ,red ,blue)
background: -ms-linear-gradient(left ,red ,blue)
background: -o-linear-gradient(left ,red ,blue)
}
이런 식으로 모두 써줘야지만 해당 브라우저에서 잘 표현이 되는데 이 부분을 자동으로 생성해주는 확장프로그램이다.
[ Bracket Pair Colorizer2 ]
: 코드에서 괄호를 사용할때 시작,끝의 색을 똑같이 표현해준다. 이게 별거 아닌거같아도 생각보다 가독성이 높아진다.
예를 들면 ( [ { } ] ) 이런식으로 색 표현을 해주고 커스터마이징도 가능하다.
[ Color Highlight ]
: 헥스 코드로 표현되는 색을 한눈에 알아볼수 있게 표현해준다.
[ Color Manager ]
: 색을 넣고 싶을때 쉽게 넣을 수 있기위해 만들어졌는데 매우 유용하게 사용한다.
사용방법은 코드에서 마우스를 우클릭하게되면
edit in color manager가 있는데 이걸 선택하면
우측에 색을 선택할 수 있는 창이 생긴다. 여기서 원하는 색을 고르고 insert 버튼을 눌러주면 자동으로 그 색의 헥스코드를 생성해준다.
[ Formatting Toggle ]
: 우리가 저장시 자동 정렬이 되도록 설정해두었다면 분명히 맘에 들지 않게 완성되는 경우가 있다. 이때 이 토글을 이용하여 자동정렬은 끈 상태로 저장을해서 내가 원하는 정렬대로 저장하고 싶을때 사용한다.
설치한 뒤 vscode 하단을 확인해보면
Formatting 에 체크가 되어있다면 자동정렬 모드이고 저 부분을 클릭하게되면 자동정렬이 풀리게된다.
[ Image preview ]
: 이미지 파일을 좀 작지만 코드에서 미리 볼 수 있다.
[ React Pure To Class ]
: 클래스형 컴포넌트 <-> 함수형 컴포넌트 소스코드를 바꿔주는 확장프로그램이다. 난 snippets를 써서 사실 쓸 일이 없지만 생각나는김에 적어본다
[ change-case ]
: Camel, Snake, Constant 등 정해진건 아니지만 개발자들끼리의 약속 처럼 사용되고있는 문법이있는데 이걸 단축키로 손쉽게 바꿔준다. 대문자 소문자를 바꿔주는 기능도 존재한다.
설치를 하고 상단 메뉴에서 [파일] -> [기본설정] -> [바로 가기 키] 로 들어간뒤 검색창에 change case 를 검색해서 원하는 단축키를 만들어준다.
