intellij에서 react 코드 commit 시 코드 스타일 문제

React 소스 코드를 커밋을 했는데도 git에서 계속 변경된 파일이라고 표시가 되는 현상이 있다.

상황은 아래와 같다.

• 코드 작성

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';

  prettier를 적용해서 { BrowserRouter } 사이에 공백이 포함됨

• commit을 하면서 Optimize Imports를 체크하고 commit을 함

• Git log를 보면 변경된 파일이라고 표시됨.

• 계속 커밋을 해도 동일한 문제가 발생함.

원인은 prettier와 Intellij code style이 맞지 않아서 발생하는 문제임

커밋을 한 다음 위의 소스코드를 확인하면 아래와 같다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';

BrowserRouter와 brace 사이에 공백이 없어져서 commit이 된다. 그리고 코드를 다시 수정하면 공백이 생기고 commit하면 공백이 없어진다.

이 문제를 해결하기 위해서 prettier와 intellij code style을 맞춰야 한다. 그래서 intellij를 변경하기로 한다.

위와 같이 Editor > Javascript or Typescript > Spaces 하단에 ES6 import/export braces 를 체크한다.

설정을 변경한 후, 코드에 스타일을 적용하려면:

• 파일을 열고 Code > Reformat Code (또는 Ctrl+Alt+L)를 선택합니다.

이렇게 하면 설정한 코드 스타일 규칙에 따라 import 구문이 자동으로 포맷됩니다.