Prettier와 ESLint는 JavaScript 코드를 더 읽기 쉽고 일관되게 유지하기 위한 도구입니다. Prettier는 코드의 형식을 정리하고, ESLint는 코드의 품질을 검사합니다. 두 도구를 함께 사용하면 코드의 형식과 품질을 함께 관리할 수 있습니다.

Prettier와 ESLint 설치

먼저 프로젝트에 Prettier와 ESLint를 설치해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다.

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

설정

ESLint 설정

.eslintrc.json 파일을 열고 다음과 같이 설정합니다.

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

Prettier 설정

.prettierrc.json 파일을 만들고 Prettier 옵션을 정의합니다.

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

이제 프로젝트에 Prettier와 ESLint를 함께 사용할 수 있습니다!

사용

Prettier와 ESLint를 함께 사용하는 방법은 간단합니다. 코드를 수정하고 저장할 때 마다 Prettier가 코드를 자동으로 포맷팅하고, ESLint는 코드를 분석하여 품질에 대한 경고를 표시합니다.

결론

Prettier와 ESLint를 함께 사용하면 코드의 형식과 품질을 효과적으로 관리할 수 있습니다. 이러한 도구들은 개발자들이 일관된 코드를 유지하고 팀의 개발 표준을 준수할 수 있도록 도와줍니다.

참고: Prettier, ESLint

위와 같이 Prettier와 ESLint를 함께 사용하여 JavaScript 코드의 품질과 형식을 관리할 수 있습니다.