React 환경에서 Prettier & ESLint 환경 설정

Prettier와 ESLint의 간단한 설명

1. Prettier

Prettier는 코드 포매터로, 코드 스타일을 자동으로 일관되게 정리해 주는 도구입니다.

2. ESLint

ESLint는 코드 린터(Linter)로, 코드 품질과 규칙을 검증하고 잠재적인 오류를 찾아주는 도구입니다.

 

 

두 도구를 함께 사용하면 코드 스타일과 품질을 모두 관리할 수 있습니다.

 

---

 

 

1. Prettier 설치

Prettier와 관련된 패키지를 프로젝트에 설치합니다.

npm install --save-dev prettier

---

2. Prettier 설정 파일 생성

Prettier 설정 파일을 프로젝트 루트 디렉터리에 생성합니다. 기본 설정 파일 이름은 .prettierrc입니다.

.prettierrc

{
  "semi": true,  		// semi: 코드 끝에 세미콜론을 추가할지 여부 (true: 추가).
  "singleQuote": true, 		// singleQuote: 문자열에서 싱글 쿼트를 사용할지 여부 (true: ' 사용, false: " 사용).
  "tabWidth": 4,		// tabWidth: 탭 간격 설정 (기본값: 2).
  "trailingComma": "es5",	// trailingComma: 객체나 배열에서 마지막 요소 뒤에 쉼표 추가 옵션
  "printWidth": 80		// printWidth: 한 줄 최대 길이.
}

 

---

3. Prettier Ignore 파일 생성

코드 포맷팅에서 제외할 파일을 설정합니다. .prettierignore 파일을 생성합니다.

.prettierignore

node_modules/
build/
dist/
public/

---

4. Prettier 스크립트 추가

package.json에 Prettier 실행 스크립트를 추가합니다.

package.json

{
  "scripts": {
    "format": "prettier --write ."
  }
}

 

---

 

5. ESLint와 Prettier 통합 (선택 사항)

ESLint와 Prettier를 함께 사용하려면 다음 패키지를 설치합니다.

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

ESLint 설정 파일 수정:

ESLint 설정 파일 (.eslintrc.json 또는 eslint.config.js)에서 Prettier 플러그인 및 설정을 추가합니다.

.eslintrc.json 예제

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

• plugin:prettier/recommended: Prettier를 ESLint 규칙으로 통합.
• "prettier/prettier": "error": Prettier와 충돌하는 코드 스타일은 ESLint 오류로 표시.