chore: integrate Prettier into ESLint and optimize CI scope #346
Conversation
ESLint에 Prettier 플러그인을 통합하고 검사 범위를 최적화했습니다. 주요 변경사항: - eslint-plugin-prettier 추가로 ESLint와 Prettier 통합 - 검사 대상을 src 디렉토리로 제한 (성능 개선) - format, format:check 스크립트 제거 (ESLint에서 처리) - CI workflow 1개 step으로 간소화 설정 변경: - .eslintrc.js: plugin:prettier/recommended 적용 - .eslintignore: 제외 규칙 추가 - package.json: 불필요한 스크립트 제거 - ci.yml: 통합 검사 명령어 사용 기대 효과: - 검사 파일 수 70% 감소 - CI 실행 시간 단축 - 하나의 명령어로 코드 품질 + 포맷팅 검사 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
워크스루이 변경사항은 ESLint와 Prettier 통합을 정리하고, npm 스크립트를 단순화하며, GitHub Actions CI 워크플로우를 최적화합니다.
예상 코드 리뷰 난이도🎯 3 (중간) | ⏱️ ~20분 추천 리뷰어
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI Agents
In @.eslintrc.js:
- Around line 31-32: ESLint is configured to use "plugin:prettier/recommended"
but there is no Prettier config file, so add a project Prettier configuration to
control formatting: create a .prettierrc (or .prettierrc.json/.prettierrc.yaml)
with your desired rules or add a "prettier" field to package.json; ensure the
chosen settings align with the ESLint extends "plugin:prettier/recommended" so
ESLint+Prettier conflict resolution works as intended.
🧹 Nitpick comments (1)
.eslintrc.js (1)
23-23: plugins 배열에서 "prettier" 선언이 중복될 수 있습니다.
plugin:prettier/recommended(32번 줄)가 이미 prettier 플러그인을 내부적으로 포함하고 있어서, 23번 줄의 명시적 선언은 불필요할 수 있습니다. 동작에는 영향이 없지만 설정을 더 간결하게 유지할 수 있습니다.🔎 제안하는 변경사항
- plugins: ["@typescript-eslint", "prettier"], + plugins: ["@typescript-eslint"],
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
.eslintignore.eslintrc.js.github/workflows/ci.ymlpackage.json
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 242
File: src/components/ui/TabSelector.tsx:10-11
Timestamp: 2025-08-12T09:41:44.182Z
Learning: manNomi prefers to keep reusable UI components simple and focused on core functionality rather than adding many features. They don't want to over-engineer flexible/reusable UI components at the initial stage.
Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 245
File: src/components/mentor/MentorChatCard/index.tsx:17-21
Timestamp: 2025-08-24T11:14:34.297Z
Learning: manNomi prefers not to receive accessibility suggestions or recommendations during code reviews.
Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 245
File: src/api/auth/client/usePostLogout.ts:17-33
Timestamp: 2025-08-24T11:13:08.477Z
Learning: manNomi prefers to prioritize user experience over perfect state consistency in auth flows. Specifically, in logout scenarios, they prefer to keep tokens intact on API failure to avoid forcing users to re-login, even if it means temporary UI state inconsistency.
Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 245
File: src/api/auth/client/useDeleteUserAccount.ts:17-27
Timestamp: 2025-08-24T11:11:40.758Z
Learning: manNomi prefers optimistic navigation in auth-related flows (like account deletion) to prevent race conditions where token clearing before navigation could cause intermediate redirects to login page due to pending async requests failing.
Learnt from: manNomi
Repo: solid-connection/solid-connect-web PR: 242
File: src/types/mentor.ts:70-73
Timestamp: 2025-08-12T04:07:04.134Z
Learning: manNomi prefers using Korean labels directly in enum values (e.g., MentorTab.MY_MENTEE = "나의 멘티") over separating enum keys from UI labels for efficiency and intuitiveness, considering scalability concerns as excessive for their current project needs.
🔇 Additional comments (6)
package.json (3)
12-13: 린트 범위를 src 디렉토리로 제한했습니다.성능 개선을 위해 린트 범위를 src 디렉토리로 제한한 것은 좋은 변경입니다.
.eslintrc.js의 overrides 설정(34-46번 줄)을 통해 루트 레벨의 설정 파일들도 여전히 린트 대상에 포함되므로, 설정 파일 검사가 누락되지 않습니다.
15-15: 코드 품질 검사를 단일 명령어로 통합했습니다.
ci:check스크립트가 린트와 타입 체크를 하나의 명령어로 통합하여, CI 워크플로우를 간소화하고 로컬 개발 환경에서도 동일한 검사를 쉽게 실행할 수 있습니다.
64-64: 좋은 소식입니다!eslint-plugin-prettier버전 5.5.4는 모두 문제없습니다.
버전 존재 확인
- npm 레지스트리에서 eslint-plugin-prettier@5.5.4가 정상적으로 공개되어 있습니다.
ESLint 호환성 검증
- 해당 패키지의 peerDependencies는
eslint: ">=8.0.0"으로 설정되어 있으므로, 프로젝트의 ESLint ^8.56.0과 완벽하게 호환됩니다.추가 조치는 필요하지 않습니다. 안심하고 진행하세요!
.eslintignore (1)
1-26: 표준적인 ESLint 무시 패턴이 잘 정리되어 있습니다.다음과 같이 잘 구조화되었습니다:
- 의존성 디렉토리 (node_modules)
- 빌드 산출물 (.next, out, build, dist)
- 자동 생성 파일 (*.min.js, *.min.css, next-env.d.ts)
- 캐시 디렉토리 (.cache, .turbo)
- 테스트 커버리지 (coverage)
- Vercel 배포 디렉토리 (.vercel)
- 문서 파일 (클로드.md)
모든 패턴이 적절하며, 카테고리별 주석으로 가독성도 우수합니다.
.github/workflows/ci.yml (2)
10-27: CI 워크플로우가 효율적으로 개선되었습니다.다음과 같이 개선사항을 확인했습니다:
- 작업 이름을
quality-check로 변경하여 목적이 명확해짐- ESLint, Prettier, TypeScript 검사를 단일
ci:check명령어로 통합- 스텝 수 감소로 CI 실행 시간 단축 기대
- 로컬에서도 동일한 명령어로 CI 검사 재현 가능
이는 PR 목표인 CI 최적화와 일관성 향상에 부합합니다.
29-49: 빌드 작업이 품질 검사에 의존하도록 개선되었습니다.변경사항:
- 빌드 작업 이름을 "Build Verification"으로 명확히 변경
needs: quality-check의존성 추가로 품질 검사 실패 시 빌드를 건너뛰어 CI 시간 절약- 스텝 이름들이 더 서술적으로 개선됨
논리적인 실행 순서(품질 검사 → 빌드)가 보장되어 CI 효율성이 향상되었습니다.
| // Prettier를 ESLint 규칙으로 실행 | ||
| "plugin:prettier/recommended", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for Prettier configuration files and ESLint setup
echo "=== .eslintrc.js 파일 확인 ==="
if [ -f ".eslintrc.js" ]; then
echo "✓ .eslintrc.js 파일 존재"
wc -l .eslintrc.js
else
echo "✗ .eslintrc.js 파일 없음"
fi
echo -e "\n=== Prettier 설정 파일 검색 ==="
fd -t f '\.prettierrc.*' --max-depth 2
fd -t f 'prettier\.config\..*' --max-depth 2
echo -e "\n=== package.json의 prettier 설정 확인 ==="
if [ -f "package.json" ]; then
echo "✓ package.json 파일 존재"
jq '.prettier // "prettier 설정 없음"' package.json 2>/dev/null || echo "✗ jq 처리 실패"
else
echo "✗ package.json 파일 없음"
fi
echo -e "\n=== eslint 및 prettier 관련 의존성 확인 ==="
if [ -f "package.json" ]; then
echo "devDependencies 중 eslint/prettier 관련:"
jq '.devDependencies | with_entries(select(.key | contains("eslint") or contains("prettier")))' package.json 2>/dev/null || echo "✗ jq 처리 실패"
fiRepository: solid-connection/solid-connect-web
Length of output: 682
🏁 Script executed:
#!/bin/bash
# Read .eslintrc.js to see the extends configuration
cat -n .eslintrc.js | head -50Repository: solid-connection/solid-connect-web
Length of output: 1568
ESLint의 Prettier 통합 설정은 올바르며, 하나의 추가 구성이 필요합니다.
현재 ESLint 설정이 완벽하게 구성되어 있습니다만, 다음을 확인해주세요:
-
ESLint 설정은 정상 —
plugin:prettier/recommended가 올바르게 extends 배열의 끝에 위치하여 충돌하는 규칙을 제대로 덮어씁니다. -
필수 패키지도 갖춰짐 —
eslint-plugin-prettier,eslint-config-prettier및 각종 플러그인이 devDependencies에 모두 설정되어 있습니다. -
Prettier 설정 파일이 없음 —
.prettierrc파일이나package.json의 prettier 필드가 없어서 Prettier가 기본값으로만 동작합니다. 프로젝트의 포맷팅 규칙을 커스터마이징하려면 다음 중 하나를 추가하세요:.prettierrc파일 생성 (또는.prettierrc.json,.prettierrc.yaml등)package.json에 prettier 필드 추가
🤖 Prompt for AI Agents
In @.eslintrc.js around lines 31 - 32, ESLint is configured to use
"plugin:prettier/recommended" but there is no Prettier config file, so add a
project Prettier configuration to control formatting: create a .prettierrc (or
.prettierrc.json/.prettierrc.yaml) with your desired rules or add a "prettier"
field to package.json; ensure the chosen settings align with the ESLint extends
"plugin:prettier/recommended" so ESLint+Prettier conflict resolution works as
intended.
1 participant
ESLint에 Prettier 플러그인을 통합하고 검사 범위를 최적화했습니다.
주요 변경사항:
설정 변경:
기대 효과:
🤖 Generated with Claude Code
관련 이슈
작업 내용
특이 사항
리뷰 요구사항 (선택)