[VSCode] 자동 formatter 플러그인 소개

 

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

Prettier - Code formatter - Visual Studio Marketplace

React.js 공부를 하는 도중 VScod 플러그인 중 JSX (Javacript를 확장한 문법으로 HTML에서 사용한 문법과 흡사)를 입력하고 저장했을 시 자동 formatter 해주는 플러그인을 발견해서 소개하고자 한다.

 

1. VSCode 플러그인 : Prettier - Code formatter 검색 후 설치

2. Settings 열기(ctrl + ,) : default formatter 검색 후 -> prettier로 변경

3. Settings > format on save 검색 후 -> 사용 체크

4. Settings > prettier 검색 후 -> Prettier: Bracket Same Line -> 사용 체크

 

예시)

아래와 같이 입력

const Button = <button onClick={() => console.log("I'm clicked")} style={{backgroundColor: "tomato"}}>Click me</button>;

그 후 저장 버튼을 누르면 자동으로 JSX 문법에 맞게 정렬된다.

const Button = (
  <button
    onClick={() => console.log("I'm clicked")}
    style={{ backgroundColor: "tomato" }}>
    Click me
  </button>
);

 

가끔 가다 연 태그의 ">"가 아래처럼 줄바꿈이 될 경우도 있는데 이는 위의 Prettier: Bracket Same Line 사용 체크를 하지 않으면 나오는 현상이므로 꼭 사용 체크를 해야한다.

const Button = (
      <button
        onClick={() => console.log("I'm clicked")}
        style={{ backgroundColor: "tomato" }}
      >
        Click me
      </button>
);