[REACT] indent(들여쓰기) Prettier, ESLint 설정

React 프로젝트에서 들여쓰기 설정을 변경하는 방법은 프로젝트의 설정에 따라 다를 수 있습니다. 일반적으로 React 프로젝트는 Prettier와 ESLint를 함께 사용하여 코드 스타일을 유지하도록 구성됩니다.

들여쓰기를 2칸에서 4칸으로 변경하려면 다음과 같은 방법을 시도할 수 있습니다.

 

Prettier 설정 변경

• 프로젝트 루트 폴더에 .prettierrc 또는 prettier.config.js 파일을 만들어 설정을 변경합니다.
• 다음과 같이 설정 파일을 열고 tabWidth를 4로 변경합니다.

{
  "tabWidth": 4,
  "singleQuote": true
}

이것만 설정하면 들여쓰기가 변경된 모든 코드에서 컴파일 에러를 발생시킬 수 있습니다.

이땐 ESLint의 indent 설정도 해줘야 합니다.

 

ESLint 설정 변경

• 프로젝트 루트 폴더에 .eslintrc 또는 eslintrc.js 파일을 만들어 설정을 변경합니다.
• 다음과 같이 설정 파일을 열고 indent를 4로 변경합니다.

module.exports = {
  // ...
  rules: {
    // ...
    indent: ['error', 4],
    // ...
  },
};