[React] VS Code 단축키 자동완성 설정하기 (+TypeScript)

VS Code를 통해 React, TypeScript를 사용중이다.

단축키를 통해 자동완성하는 방법을 알아보고자 한다.

module.scss를 사용하면서 className을 매번 지정해주는 것이 번거로웠다.

아래와 같이 cxclass를 치면 className={cx('')} 가 알아서 자동완성이 되게 할 것이다.

  <li className={cx('notoSansKr')}>{item.list}</li>

 

1. VS Code> 파일> 기본설정> 사용자 코드 조각 구성을 클릭

 

2. 우측 하단에 사용중인 언어를 확인하고 검색한다.

나는 typescript jsx를 검색하여 들어갔다.

 

그럼 아래와 같이 뜨는 json 파일 내에 원하는 단축어 설정을 작성한다.

위의 styled module className은 내가 설정한것이다. (prefix와 body가 주된 설정)

prefix: 단축어키 설정

body: 단축어키를 통해 자동완성하고 싶은 코드를 작성

description: 설명

 

위와 같은 형식으로 쉽게 써주는 사이트가 있다.

왼쪽에 원하는 코드를 작성하면 우측과 같이 설정코드로 변환해준다.

 

https://snippet-generator.app/

snippet generator

 

3. 파일내에서 설정한 prefix를 통해 단축어키를 쓰고 tab을 누르면 자동완성이 된다 !

 

 

참고사이트)

https://wazacs.tistory.com/16

VS Code 사용하면서 유용한 기능들 정리!