stack-analysis
CHAPTER 28 / 90
읽기 약 2분
FUNCTION
ESLint + Prettier + Husky: 코드 품질 자동화
핵심 개념
eslint flat config·prettier·lint-staged·pre-commit hook — 일관된 코드.
본문
ESLint Flat Config (v9+)
// eslint.config.js
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import nextPlugin from '@next/eslint-plugin-next';
export default [
js.configs.recommended,
...tseslint.configs.recommended,
...tseslint.configs.strict,
{
files: ['**/*.{ts,tsx}'],
plugins: {
react,
'react-hooks': reactHooks,
'@next/next': nextPlugin,
},
languageOptions: {
parserOptions: {
ecmaFeatures: { jsx: true },
},
},
rules: {
...react.configs.recommended.rules,
...reactHooks.configs.recommended.rules,
...nextPlugin.configs.recommended.rules,
// 프로젝트 규칙
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
'react/react-in-jsx-scope': 'off', // Next.js 자동 import
'react/prop-types': 'off', // TS로 대체
},
settings: {
react: { version: 'detect' },
},
},
];Prettier
// prettier.config.js
export default {
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
printWidth: 100,
arrowParens: 'always',
endOfLine: 'lf',
plugins: ['prettier-plugin-tailwindcss'], // Tailwind 클래스 정렬
};
// .prettierignore
node_modules
.next
dist
publicHusky + lint-staged (pre-commit)
pnpm add -D husky lint-staged
pnpm dlx husky init# .husky/pre-commit
pnpm exec lint-staged// package.json
{
"lint-staged": {
"*.{ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,md,yml}": "prettier --write"
}
}CI 검증
# .github/workflows/ci.yml
name: CI
on: [pull_request, push]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v3
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm lint
- run: pnpm typecheck
- run: pnpm test
- run: pnpm buildTypeScript strict 설정
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
"noFallthroughCasesInSwitch": true,
"exactOptionalPropertyTypes": true,
"noImplicitReturns": true,
"skipLibCheck": true
}
}commitlint (선택)
pnpm add -D @commitlint/cli @commitlint/config-conventional// commitlint.config.js
export default {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', [
'feat', 'fix', 'docs', 'style', 'refactor',
'perf', 'test', 'chore', 'revert',
]],
'subject-max-length': [2, 'always', 100],
},
};# .husky/commit-msg
pnpm exec commitlint --edit $1다음 챕터
CH.29 "모노레포: pnpm workspaces + Turborepo" — 다중 패키지.
AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
내 코드의 코드 품질 부분을 분석해서 실전 분석 + 개선 우선순위를 알려줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
코드 품질 관련 인기 라이브러리/패턴 5개를 비교 분석해서 패턴 추출를 알려줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
내 프로젝트 전체에서 코드 품질 최적화 가능 위치를 보고해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년 한국 프론트엔드 시장의 코드 품질 트렌드를 솔직히 알려줘.
⭐ 이것만 기억하세요
ESLint + Prettier + Husky: 코드 품질 자동화는 이 3가지만 확실히 잡으세요
1.ESLint v9 flat config + TypeScript strict = 코드 품질의 기반
2.Husky + lint-staged = 커밋 전 자동 검증 — 깨진 코드 방지
3.CI에서 lint/typecheck/test/build 4단계 — main 보호
공유하기
진행도 28 / 90