Written by Parkdev
on February 01, 2024

[React]ESLint Prettier 세팅방법

목적

Typescript기반 react admin page생성하면서 배운 TIL을 기록하기 위한 페이지

Typescript 기반 프로젝트 생성하기

npx create-react-app my-app --template typescript

ESLint, Prettier 세팅

우선 vscode에 익스텐션을 설치해준다.

다음으로는 생성한 프로젝트에서 라이브러리를 추가해 준다.

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

마지막으로 .eslintrc, .prettierrc을 생성해서 세팅한 뒤, vscode 설정에 가서 Formatter를 검색해서 Prettier로 변경해주자. FormatOnSave도 true로 변경해준다면 저장 시 코드를 포매팅할 수 있다.

//.prettierrc
{
  // 쌍따옴표 대신 홑따옴표 사용
  "singleQuote": true,
  // 모든 구문 끝에 세미콜론 출력
  "semi": true,
  // 탭 대신 공백으로 들여쓰기
  "useTabs": false,
  // 들여쓰기 공백 수
  "tabWidth": 2,
  // 가능하면 후행 쉼표 사용
  "trailingComma": "all",
  // 줄 바꿈할 길이
  "printWidth": 80,
  // 객체 괄호에 공백 삽입
  "bracketSpacing": true,
  // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "arrowParens": "always",
  // OS에 따른 코드라인 끝 처리 방식 사용
  "endOfLine": "auto",
  //jsx 마지막 괄호 위치
  "jsxBracketSameLine": false,
  //jsx 따옴표 위치
  "jsxSingleQuote": false,
}

npm init @eslint/config 로 설정하거나 .eslintrc파일 직접 생성

← → Top