Jump To VB.NET

ESLint와 Prettier가 프로젝트에서 예전 설정을 따르면서 코드 포맷팅이나 린트가 제대로 적용되지 않는 경우가 있습니다. 이 문제는 설정 파일 충돌, 캐시 문제, 설정 위치 오류 등 다양한 원인으로 발생할 수 있습니다. 이 글에서는 그 원인과 해결 방법을 단계별로 자세히 설명합니다.

목차

• 현상과 원인 파악
• 설정 캐시 재시작
• 설정 파일 위치 및 중복 확인
• ESLint와 Prettier 최신 설정 적용법
• CI/CD 및 빌드 환경 점검
• CLI 옵션 점검

현상 및 주요 원인

• 예전 설정이 캐시에 남아 변경 사항 반영 안됨
• 여러 위치에 설정 파일 존재
• plugin:prettier/recommended가 extends 마지막에 위치하지 않음
• 빌드나 CI 환경에서 별도 캐시 사용
• 명령어 옵션에 --no-config 등 부적절한 설정 삽입

해결법

1. 캐시 초기화 및 에디터 재시작

• VSCode, 에디터, ESLint/Prettier 확장 프로그램 재시작
• 프로젝트 내 .eslintcache 등 캐시 파일 삭제
• 파일을 다시 저장해 적용되는지 확인

2. 설정 파일 정리

• .eslintrc, prettier.config.js 또는.prettierrc 등 환경설정 파일 위치 확인
• 중복되거나 오래된 설정 파일 제거
• 필요한 설정 파일만 유지하고 명확히 관리

3. VS Code 설정

• VS Code의 settings.json에서 editor.defaultFormatter가 esbenp.prettier-vscode로 설정되어 있는지 확인

4. 확장 프로그램 재설치

• Prettier, ESLint 확장을 제거 후 다시 설치

3. 최신 recommended 설정 사용 및 순서 확인

• .eslintrc에서 plugin:prettier/recommended를 extends 배열 마지막에 위치시키기

{
  "extends": [
    "some-other-config",
    "plugin:prettier/recommended"
  ]
}

• eslint-plugin-prettier, eslint-config-prettier 최신 버전 설치 확인

4. 빌드 도구 및 CI 설정 점검

• 별도로 저장된 캐시 제거 및 빌드 파이프라인 업데이트
• 빌드 전에 eslint --fix와 prettier --write 명령어 실행 확인

eslint --fix
prettier --write

5. CLI 옵션 확인

• 명령어에 --config 옵션을 사용해 특정 설정 강제 적용 여부 점검
• --no-config 옵션으로 설정 무시하는 경우 제거

요약

Happy GoSu ~

WooGong ))*

\\

VSCode에 코드를 붙여넣을 때 "Delete '␍' eslint [prettier/prettier]" 오류가 나타나는 경우를 겪어본 적이 있을 것입니다. 이 문제는 주로 윈도우와 유닉스 계열 운영체제의 줄바꿈 문자 차이(CRLF vs LF) 때문에 발생합니다. 이번 글에서는 원인과 해결 방법을 알아봅니다.

목차

• CRLF와 LF 줄바꿈 차이란?
• 왜 오류가 생기나?
• VSCode에서 줄바꿈 문자 통일하기 (LF로 변경)
• Prettier 설정에서 endOfLine 옵션 지정하기
• ESLint와 Prettier 설정 조화시키기
• 기존 파일 줄바꿈 문자 변환 방법

CRLF와 LF 줄바꿈 문자 차이

윈도우에서는 줄바꿈에 CRLF(\r\n)를, 유닉스/리눅스/맥에서는 LF(\n)를 사용합니다. 서로 다르기에, 에디터나 툴이 특정 줄바꿈을 요구할 때(보통 LF) CRLF가 들어가면 ␍ 문자가 문제를 일으킵니다.

VSCode에서 줄바꿈을 LF로 통일하는 법

1. VSCode 우측 아래 상태 바에 있는 "CRLF" 표시 클릭
2. 목록에서 LF 선택
3. 파일을 저장하면 줄바꿈 문자가 전부 LF로 변환됨

또는 사용자 설정에 아래 구문을 추가:

"files.eol": "\n"

Prettier 설정에서 줄바꿈 명시 (.prettierrc)

{
  "endOfLine": "lf"
}

이 설정은 Prettier가 모든 파일을 저장할 때 LF 줄바꿈을 적용하도록 합니다.

ESLint 설정과 충돌 피하기

.eslintrc.json에서 prettier/prettier 룰을 설정:

"rules": {
  "prettier/prettier": ["error", { "endOfLine": "lf" }]
}

이렇게 하면 ESLint도 줄바꿈 문제를 잡아줍니다.

기존 파일 CRLF → LF 변환하기

• VSCode에서 위 방법으로 변경 후 파일 저장
• 터미널에서 dos2unix filename 명령어 사용
• Git에서는 .gitattributes로 줄바꿈 자동 변환 설정 가능

요약

Happy GoSu ~

WooGong ))*

\\\

효과적인 소스 코드 관리의 핵심, Git의 tag와 branch! 이 글에서는 두 개념의 차이와 실무 활용법, 선택 기준까지 명확하게 정리합니다.

목차

• Tag와 Branch란?
• 핵심 비교 표
• 실전 사용예
• 활용 전략 & 선택 기준
• 결론 및 요약

Tag와 Branch란?

Branch(브랜치)란?

브랜치는 코드 작업을 위한 독립적인 개발 공간. 새 기능 개발, 버그 수정, 실험 등 다양한 작업에 쓰이며, 최신 커밋을 계속 따라갑니다.[3]

Tag(태그)란?

태그는 릴리즈, 배포 등 특정 커밋 시점을 표시하는 스냅샷 기능입니다. 한 번 지정하면 그 커밋을 영구적으로 가리켜 이후에도 변하지 않는 '고정점'을 만들어줍니다.[2]

Tag와 Branch 핵심 비교

Tag와 Branch 실전 사용 예시

Tag 사용 예시

# 릴리즈 배포 시 커밋에 태그 추가
git tag -a v1.0.0 -m "Release version 1.0.0"

# 기존 커밋에 태그 적용
git tag -a v2.2.3 9fceb02 -m "Hotfix v2.2.3 for production issue"

# 태그 목록 확인
git tag

# 태그 정보 확인
git show v1.0.0

# 태그를 원격 저장소로 푸시
git push origin v1.0.0
# 모든 태그 푸시
git push origin --tags

주요 활용:

• 배포 버전 관리 및 롤백
• 완성된 기능, 생산환경에 올라간 커밋 기록
• 특정 릴리즈 시점 간편 추적[6][3][2]

Branch 사용 예시

# 새 브랜치 생성 및 이동
git checkout -b feature/login

# 브랜치간 병합
git merge feature/login

# 브랜치 삭제
git branch -d feature/login

# 원격 브랜치 푸시
git push origin feature/login

# 브랜치 목록 확인
git branch

주요 활용:

• 독립적 기능 개발
• 다양한 버그 수정 및 실험
• 협업 시 각자 분기 생성[5][3]

활용 전략 및 선택 기준

• 새 작업, 개발, 테스트, 협업에는 branch
• 배포, 릴리즈, 버전 및 이력 관리에는 tag

둘을 병행하면 프로젝트의 안정성과 생산성이 극대화됩니다!

결론 및 요약

branch는 작업 흐름을, tag는 히스토리와 릴리즈를 관리

Happy GoSu ~

WooGong ))*

\\\\\