[React] ESLint와 Prettier란? , 사용법

---

1.Prettier

코드 스타일을 자동으로 일관되게 포맷해주는 코드 포매터다.
npm으로 Prettier와 ESLint용 플러그인을 설치할수있다.

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

 

 

 

1-1. 설정파일

.prettierrc 파일을 생성하여 원하는 설정을 입력한다.

{
  "semi": true, // 세미콜론 사용
  "singleQuote": true, // 작은따옴표 사용
  "trailingComma": "es5", // 객체나 배열의 마지막 요소 뒤에 콤마 추가
  "tabWidth": 2, // 탭 너비 2로 설정
  "printWidth": 80 // 한 줄에 최대 80자
}

 

 

 

1-2. 실행

그후 다음 명령어를 입력하면 내 코드를 자동으로 포맷해주고 수정해준다.

npx prettier --write .

 

 

 

 

 

 

2.ESLint 

정적 코드 분석 도구로, 코드에서 문법 오류, 불필요한 코드 또는 버그를 일으킬 수 있는 코드를 찾아주는 도구이다.
ESLint는 코드의 구조와 품질을 검토한다.

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import --save-dev

 

 

2-1.설정파일

.eslintrc.js로 설정할수있다.

module.exports = {
  parser: '@typescript-eslint/parser', // TypeScript 파일을 파싱하기 위해 사용
  extends: [
    'eslint:recommended', // 기본 ESLint 규칙 적용
    'plugin:react/recommended', // React 관련 규칙 적용
    'plugin:@typescript-eslint/recommended', // TypeScript 관련 규칙 적용
    'plugin:prettier/recommended', // Prettier와 충돌하는 규칙 비활성화
  ],
  parserOptions: {
    ecmaVersion: 2020, // 최신 JavaScript 문법을 지원
    sourceType: 'module', // ES6 모듈 사용
  },
  settings: {
    react: {
      version: 'detect', // React 버전 자동 감지
    },
  },
  rules: {
    'react/prop-types': 'off', // TypeScript에서는 prop-types를 사용하지 않음
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 함수 반환 타입을 자동으로 추론하게 설정
    '@typescript-eslint/no-explicit-any': 'warn', // 'any' 사용 경고
  },
};

 

 

 

2-2.실행

다음명령어로 src 내부의 파일들을 검사한다.
--fix 옵션을 붙이면 들여쓰기 문제나 세미콜론 누락같은 문제는 자동으로 수정해준다.
논리적 오류나 구조적인 오류는 알려주고 수정은 직접 개발자가 해야한다.

npx eslint "src/**/*.{ts,tsx}" --fix