좋은 코드 스타일 가이드로 개발을 하면서 코드의 일관성과 가독성을 높일 수 있습니다. Prettier와 ESLint는 이러한 목적을 달성하기 위한 도구들 중 하나입니다. Prettier는 코드를 자동으로 포맷팅하여 일관된 스타일을 유지하게 해주고, ESLint는 코드 품질을 검사하고 문제점을 식별하여 개선할 수 있게 해줍니다.

Prettier와 ESLint란 무엇인가?

Prettier

Prettier는 투박한 코드 스타일 따위로 신경쓰지 않고, 코드를 개발자가 공동 작업할 때 일관된 형태로 자동으로 변경해줍니다.

ESLint

ESLint는 JavaScript 및 TypeScript 코드에서 문제점을 식별하고, 일관된 스타일 가이드를 적용하여 코드 품질을 향상시키는 도구입니다.

Prettier와 ESLint 함께 사용하기

Prettier와 ESLint는 코드 포맷팅 및 품질 검사 기능에서 서로 보완적인 역할을 수행합니다. 이 둘을 함께 사용하면 코드의 일관성과 품질을 높일 수 있습니다.

1. 먼저, Prettier와 ESLint를 프로젝트에 설치합니다.

npm install --save-dev prettier eslint

1. 이어서, Prettier와 ESLint 플러그인을 설치합니다.

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

1. 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하고, Prettier 설정을 추가합니다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 80
}

1. 이어서, ESLint 설정 파일 (일반적으로 .eslintrc.js 또는 .eslintrc.json)에서 Prettier 플러그인을 활성화하고 관련 규칙을 추가합니다.

module.exports = {
  plugins: ['prettier'],
  extends: ['plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'error'
  }
};

이제 Prettier와 ESLint가 함께 동작하여 코드의 일관성 및 품질을 유지하고, 개발자가 실수를 예방할 수 있도록 도와줄 것입니다.

결론

Prettier와 ESLint는 개발 과정에서 코드의 일관성과 품질을 유지하고 문제점을 식별하여 개선하는 데 도움을 주는 강력한 도구입니다. 두 도구를 함께 사용하면 더 나은 코드 작성 경험을 얻을 수 있습니다.

References:

• “Prettier” 공식 홈페이지
• “ESLint” 공식 홈페이지
• “Prettier와 ESLint 함께 사용하기” 블로그