[React] Prettier와 ESLint

Prettier와 ESLint : 코드 품질을 높이는 두 마법사

프론트엔드 개발에서 코드의 일관성과 품질은 매우 중요합니다.
이를 위해 Prettier와 ESLint와 같은 도구를 사용해 코드의 품질을 검사할 수 있습니다.

이번 포스트에서는 Prettier와 ESLint의 개념과 적용 방법을 각각 자세히 알아보고, 둘을 함께 사용하는 방법을 다루겠습니다.

 

# 1. Prettier

1. Prettier란?

Prettier는 JavaScript와 관련된 코드의 형식을 일관되게 유지하는 역할을 합니다. 들여쓰기, 공백, 따옴표 등을 자동으로 조정하여 일관된 스타일의 코드를 보장해줍니다.

 

2. Prettier 적용  

npm install --save-dev --save-exact prettier
# 또는
yarn add --dev --exact prettier

 

 

# 2. ESLint

1. ESLint란?

JavaScript 코드에서 문제점을 식별하고, 일관된 코드 스타일을 유지하기 위한 정적 코드 분석 도구입니다. ESLint를 사용하면 코드를 작성하는 동안 실시간으로 잠재적인 버그나 스타일 가이드 위반 사항을 확인할 수 있습니다.

 

2. ESLint 적용 

ESLint를 프로젝트에 적용하는 방법은 ESLint를 설치하고 설정 파일을 생성한 후 코드에 적용하는 것입니다. ESLint의 규칙을 설정하여 코드의 품질을 높일 수 있습니다. 

npm install --save-dev --save-exact eslint
# 또는
yarn add --dev --exact eslint

 

 

# 3. Prettier와 ESLint 함께 사용하기

1. 어떻게 해야 할까?

Prettier와 ESLint를 함께 사용하여 코드의 품질을 높이는 방법은 간단합니다. 먼저 두 도구를 각각 프로젝트에 설치합니다. 그 후 설정 파일을 생성합니다. 마지막으로 ESLint의 규칙 중 Prettier와 충돌하는 부분을 비활성화한 후, Prettier 플러그인을 ESLint에 통합합니다.

2. 적용해보기

// .eslintrc.json
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    // Prettier와 충돌하는 ESLint 규칙 비활성화
    "quotes": "off",
    "semi": "off",
    // Prettier 플러그인 활성화
    "prettier/prettier": "error"
  }
}

이제 코드를 작성하고 저장할 때마다 Prettier와 ESLint가 동작하여 코드를 검사합니다. 이를 통해 코드의 일관성과 품질을 유지하며 개발 생산성을 향상시킬 수 있습니다.