인텔리제이(intellij)에서 react 공부 시 알면 좋은 PlugIn

리액트를 처음 공부 중이긴 하지만 예제 파일을 실습해보려면 

Run 한 뒤에 개발자도구에서 console.log 로 확인해야되는게 은근히 많은 것 같고,

코드를 정리해 주는 플러그인 을 소개해 드리겠습니다.

 

1. Prettier (코드 정리)

단축키 : Ctrl + Alt + Shift + P

package.json에서 해당 옵션 설정

상세한 옵션은 https://prettier.io/docs/en/options.html 에서 확인가능합니다.

  "prettier": {
    "useTabs": false,
    "printWidth": 100,
    "tabWidth": 2,
    "trailingComma": "all",
    "semi": true,
    "singleQuote": true
  }

2. Quokka (js 파일에서 결과 확인 가능.)

단축키 : Ctrl + Alt + Shift + Insert

유료 버전을 쓰면 기능을 더 많이 사용할 수 있음.

 

* 별도로 인텔리제이에서

setting -> Live Templates 에서 특정 키워드를 설정하여 자동완성 기능도 간편하게 사용할 수 있다.

대부분 default로 등록되어있는 키워드를 사용함.