https://github.com/dev-goraebap/dev-goreabap-lab
몰랐던 내용 정리, 코드 실험실 👾
https://github.com/dev-goraebap/dev-goreabap-lab
Last synced: 4 months ago
JSON representation
몰랐던 내용 정리, 코드 실험실 👾
- Host: GitHub
- URL: https://github.com/dev-goraebap/dev-goreabap-lab
- Owner: dev-goraebap
- Created: 2025-09-01T11:20:25.000Z (9 months ago)
- Default Branch: develop
- Last Pushed: 2025-09-03T12:26:29.000Z (9 months ago)
- Last Synced: 2025-09-03T14:31:40.676Z (9 months ago)
- Language: TypeScript
- Size: 151 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Prettier & ESLint 설정 가이드
### Prettier란?
Prettier는 **코드 포맷터(code formatter)**입니다. 코드를 일관된 스타일로 자동 포맷팅해주는 도구입니다.
**주요 특징:**
- JavaScript, TypeScript, CSS, HTML, JSON, Markdown 등 다양한 언어 지원
- 세미콜론, 들여쓰기, 따옴표 스타일 등을 자동으로 통일
- **Opinionated**: 최소한의 설정으로 일관된 코드 스타일 제공
- 팀 협업 시 코드 스타일 논쟁 제거
### 줄바꿈 문자 문제 (CRLF vs LF)
**문제 상황:**
Windows에서 개발할 때 `Delete '␍'eslint(prettier/prettier)` 에러가 발생할 수 있습니다.
**원인:**
- **Windows**: CRLF (`\r\n`) 사용
- **Unix/Mac**: LF (`\n`) 사용
- 프로젝트 설정이 LF를 선호하는데 Windows에서 CRLF가 들어가서 충돌
### Git 설정으로 해결
**1. Git 줄바꿈 자동 변환 설정:**
```bash
git config --global core.autocrlf true
```
**동작 방식:**
- **체크아웃 시**: LF → CRLF 변환 (저장소에서 Windows 작업 디렉터리로)
- **커밋 시**: CRLF → LF 변환 (Windows 작업 디렉터리에서 저장소로)
**2. 기존 파일들 정규화:**
```bash
git add --renormalize .
```
### VS Code 환경에서의 도구들
#### 1. VS Code Prettier 확장
- **역할**: 파일 저장 시 자동 포맷팅
- **설정**: `.prettierrc` 파일을 읽어서 스타일 적용
- **특징**: 조용히 포맷팅만 수행, 에러 표시 안함
#### 2. VS Code ESLint 확장
- **역할**: 실시간 코드 품질 검사
- **설정**: `eslint.config.mjs` 파일 기반
- **특징**: 빨간 밑줄로 에러/경고 표시
#### 3. eslint-plugin-prettier
- **역할**: Prettier 규칙을 ESLint 에러로 변환
- **기능**: 실시간으로 포맷팅 규칙 위반 감지 및 표시
- **장점**: 팀 전체 코드 스타일 강제, 실시간 피드백
- **단점**: Git/OS 줄바꿈 설정과 충돌 가능
### 문제 해결 방법들
#### 방법 1: Git 정규화 (권장)
```bash
git reset # 스테이지 취소
git add --renormalize . # 정규화하면서 다시 스테이지
```
#### 방법 2: VS Code에서 일괄 변환
1. `Ctrl+Shift+P` → "Change All End of Line Sequence"
2. "LF" 선택하여 전체 프로젝트 파일 변환
#### 방법 3: Prettier 설정 조정
`.prettierrc`에 추가:
```json
{
"endOfLine": "auto"
}
```
### 각 도구의 역할 정리
| 도구 | 역할 | 동작 시점 | 에러 표시 |
|------|------|-----------|-----------|
| **VS Code Prettier 확장** | 코드 포맷팅 실행 | 저장 시 or 수동 실행 | ❌ |
| **ESLint VS Code 확장** | 코드 품질 검사 | 실시간 | ✅ |
| **eslint-plugin-prettier** | Prettier 규칙을 ESLint로 통합 | 실시간 | ✅ |
**요약:**
- **VS Code Prettier**: "포맷팅 실행자"
- **ESLint + eslint-plugin-prettier**: "포맷팅 감시자"
### 권장 설정
1. **Git 전역 설정**: `git config --global core.autocrlf true`
2. **프로젝트 정규화**: `git add --renormalize .`
3. **eslint-plugin-prettier 유지**: 팀 협업을 위한 코드 스타일 강제
4. **VS Code 자동 저장 포맷팅 활성화**: 개발 생산성 향상
## License
Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).