Parcel은 간단하고 빠른 웹 애플리케이션 번들러입니다. 하지만, 개발자는 코드 품질을 유지하기 위해 정적 분석, 코드 스타일 검사 등과 같은 QA 도구를 사용하는 것이 중요합니다. 이번 블로그 포스트에서는 Parcel 프로젝트에서 코드 품질 QA 도구를 사용하는 방법에 대해 설명하겠습니다.

1. ESLint 설정

ESLint는 JavaScript 코드에서 잠재적인 오류를 찾기 위해 사용되는 정적 분석 도구입니다. Parcel 프로젝트에서 ESLint를 사용하기 위해 다음 단계를 따르세요.

1. 프로젝트의 root 디렉토리에 .eslintrc 파일을 생성합니다.
2. .eslintrc 파일에 ESLint 구성을 추가합니다. 예를 들어, 다음은 기본적인 ESLint 설정 예시입니다.

{
  "extends": "eslint:recommended",
  "rules": {
    // 추가적인 규칙 설정
  }
}

1. Parcel의 package.json 파일에서 scripts 섹션에 다음 명령을 추가합니다.

"scripts": {
  "lint": "eslint src"
}

1. 터미널에서 npm run lint 명령을 실행하여 ESLint 검사를 수행할 수 있습니다.

2. Prettier 설정

Prettier는 코드 포맷팅 도구로, 코드 스타일을 일관되게 유지할 수 있습니다. Prettier를 Parcel 프로젝트에서 사용하기 위해 다음 단계를 따르세요.

1. 프로젝트의 root 디렉토리에 .prettierrc 파일을 생성합니다.
2. .prettierrc 파일에 Prettier 구성을 추가합니다. 예를 들어, 다음은 기본적인 Prettier 설정 예시입니다.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

1. Parcel의 package.json 파일에서 scripts 섹션에 다음 명령을 추가합니다.

"scripts": {
  "format": "prettier --write \"src/**/*.js\""
}

1. 터미널에서 npm run format 명령을 실행하여 Prettier 코드 포맷팅을 수행할 수 있습니다.

3. Husky와 lint-staged 설정

Husky와 lint-staged를 사용하면 코드 커밋 전에 ESLint와 Prettier를 자동으로 실행할 수 있습니다. Parcel 프로젝트에서 Husky와 lint-staged를 사용하기 위해 다음 단계를 따르세요.

1. Parcel의 package.json 파일에서 scripts 섹션에 다음 명령을 추가합니다.

"scripts": {
  "precommit": "lint-staged"
}

1. 터미널에서 npx husky install 명령을 실행하여 Husky를 설치합니다.
2. Parcel의 package.json 파일에서 husky 섹션에 다음 코드를 추가합니다.

"husky": {
  "hooks": {
    "pre-commit": "npm run precommit"
  }
}

1. Parcel의 package.json 파일에서 lint-staged 섹션에 다음 코드를 추가합니다.

"lint-staged": {
  "src/**/*.js": [
    "eslint",
    "prettier --write"
  ]
}

이제 코드를 커밋하기 전에 자동으로 ESLint와 Prettier가 실행됩니다.

마무리

Parcel 프로젝트에서 코드 품질 QA 도구를 사용하는 방법에 대해 알아보았습니다. ESLint와 Prettier의 조합은 코드 오류를 줄이고 일관된 코드 스타일을 유지하는데 큰 도움이 됩니다. Husky와 lint-staged를 추가하여 코드 커밋 전에 자동으로 QA 도구가 실행되도록 하여 개발자 팀의 효율성을 높일 수 있습니다.