서론
프로젝트에서 일관된 코드 스타일과 가독성, 유지보수성을 높이기 위해 팀만의 코드 컨벤션을 따르는 것이 필수적이다.
이를 위해 많은 개발자들은 ESLint 와 Prettier 를 활용해 코드 품질을 관리하고 자동으로 포멧팅 되도록 설정한다.
React + TypeScript 프로젝트에서 ESLint와 Prettier 를 적용하는 방법에 대해 알아보자 ❗️
🔍 ESLint 와 Prettier 란?
1. ESLint
JavaScript & TypeScript 코드에서 문법 오류, 잠재적인 버그, 코드 스타일 위반 등을 찾아주는 정적 코드분석 도구이다.
필요에 따라 커스터마이징이 가능해, 조직 스타일에 따라 룰을 설정할 수 있다.
2. Prettier
들여쓰기, 줄 바꿈, 세미콜론 등 코드 스타일을 자동으로 정리해주는 코드 포맷터이다.
코드의 일관된 포멧을 유지하는데 도움을 주며 정해진 옵션 내에서 설정이 가능하다.
🤔 왜 사용해야 할까?
- 코드 품질 향상: 잘못된 코드 사전 예방
- 협업 효율성 증가: 일관된 코드 포멧팅
- 손쉬운 사용: 파일 저장 시 자동 검사 (IDE 설정 필요)
⚙️ ESLint & Prettier 설정 방법
1. React + TypeScript 프로젝트 생성 ( with CRA )
npx create-react-app eslint-prettier --template typescript2. ESLint & Prettier 설치
cd eslint-prettier
npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser✅ 패키지 종류
ESLint 와 Prettier를 함께 사용하고, 여기에 TypeScript 까지 포함되면 설정에 있어 충돌이 발생 할 수 있다. 이를 해결하고 각 도구들이 잘 작동하기 위해 추가로 패키지를 설정해 준다.
1️⃣ eslint-config-prettier
ESLint의 포맷 관련 규칙을 비활성화하여, Prettier와 충돌을 방지한다.
＞ 포맷팅은 Prettier가 알아서 할꺼니까 ESLint는 검사하지마~*
2️⃣ eslint-plugin-prettier
Prettier를 ESLint의 규칙처럼 실행할 수 있게 해준다.
즉, ESLint가 코드 검사를 할 때 Prettier 포멧팅도 함께 검사한다.
＞ eslint --fix 명령으로 Prettier 포맷까지 자동 수행
3️⃣ @typescript-eslint/parser
ESLint가 TypeScript 문법을 이해할 수 있도록 도와주는 파서 이다.
4️⃣ @typescript-eslint/eslint-plugin
TypeScript에 특화된 ESLint 규칙을 제공한다.
🚨 Conflict Peer Dependency
@typescript-eslint/eslint-plugin@5.62.0 버전을 설치함에 있어 @typescript-eslint/parser@8.35.0 버전과 의존성 충돌이 발생했다.npm install @typescript-eslint/eslint-plugin@5.62 @typescript-eslint/parser@^5동일 버전으로 설치해 충돌 해결!
3. 설정파일 생성 및 구성
✅ eslintrc.cjs 파일 생성
root 경로에 파일을 생성한다.
module.exports = {
// TypeScript 코드를 분석할 수 있도록 파서를 설정
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020, // 최신 ECMAScript 문법 사용 허용
sourceType: 'module', // import/export 문법 사용 허용
ecmaFeatures: {
jsx: true, // JSX 문법 사용 허용 (React)
},
},
// React 버전 자동 감지
settings: {
react: {
version: 'detect',
},
},
// 코드가 실행될 환경 설정
env: {
browser: true, // 브라우저 환경 (window, document 등 사용 가능)
es2021: true, // ES2021 문법 사용 가능
},
// 사용할 기본 규칙 세트 확장
extends: [
'eslint:recommended', // ESLint 기본 추천 규칙
'plugin:react/recommended', // React 관련 규칙
'plugin:@typescript-eslint/recommended', // TypeScript 관련 추천 규칙
'plugin:prettier/recommended', // Prettier와 충돌되는 ESLint 규칙 제거 + Prettier 플러그인 활성화
],
// 사용할 플러그인 (추가 규칙 제공)
plugins: ['react', '@typescript-eslint'],
// 개별 규칙을 커스터마이징
rules: {
// React 17+ 부터는 import React 생략 가능하므로 해당 규칙 끔
'react/react-in-jsx-scope': 'off',
// 필요에 따라 추가 규칙 설정 가능 예:
// '@typescript-eslint/explicit-function-return-type': 'warn',
},
}✅ .prettierrc 파일 생성
root 경로에 파일을 생성한다.
{
// 작은따옴표(single quote) 사용 여부 (true: ' ', false: " ")
"singleQuote": true,
// 문장의 끝에 세미콜론(;)을 붙일지 여부 (true: 붙임, false: 생략)
"semi": false,
// 객체나 배열 마지막 요소 뒤에 쉼표(trailing comma)를 붙일지 여부
// "es5" = ES5에서 허용되는 곳만 추가, "all" = 가능한 모든 곳에 추가
"trailingComma": "all",
// 한 줄 최대 글자 수. 초과하면 자동 줄바꿈
"printWidth": 80,
// 들여쓰기 폭 (공백 수)
"tabWidth": 2,
// 탭 대신 공백 사용 여부 (true: 공백, false: 탭)
"useTabs": false,
// JSX 안의 속성에 따옴표 스타일 (true: ' ', false: " ")
"jsxSingleQuote": true,
// JSX 태그가 여러 줄일 경우 닫는 태그를 새 줄에 둘지 여부
"jsxBracketSameLine": false,
// 화살표 함수에서 인자가 하나일 때 괄호 사용 여부
// "avoid": 하나일 때 괄호 생략, "always": 항상 괄호 사용
"arrowParens": "always",
// 객체 속성 정렬 시 key: value 간격 유지 여부
"bracketSpacing": true,
// HTML, JSX, Vue 등에서 self-closing 태그 사용 여부
"htmlWhitespaceSensitivity": "css",
// 코드 맨 끝에 개행 문자 추가 여부
"endOfLine": "lf"
}
✅ .eslintignore 파일 생성
검사 예외처리 파일로 root에 생성한다.
node_modules
build✅ .prettierignore 파일 생성
검사 예외처리 파일로 root에 생성한다.
node_modules
build4. package.json 스크립트 추가
{
...
"scripts":{
...
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
"lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""
...
}
...
}5. IDE 와 연동하기 (WebStorm)
1️⃣ cmd + , 를 눌러 Setting 화면 열기
2️⃣ prettier 검색 후 메뉴 이동
( Language & Frameworks > JavaScript > Prettier )
3️⃣ 위와 같이 설정 후 저장
6. 확인하기
[ Before ] _ app.tsx
[ After ] _ app.tsx
저장 or npm run lint:fix 을 하게 되면 설정한 Prettier 규칙에 맞게 포멧팅이 자동으로 이루어진다.
