[REACT 개발 필수]CRA(create-react-app)에 ESLint, Prettier 적용, 설정하는법

React 개발 CRA(Creact-React-App) 시 기본적 아니 필수적으로 설정하면 제일 좋은 Prettire & EsLint를 배워 보겟습니다.

 

Prettier & ESLint란 ??

 

1. Preiiter 란 ??

Prettier는 Code Formatter입니다. 개발자들이 코딩을 입력하고 완성시에 좀더 코딩 스타일을 세련되게 세팅해줄수있게

도와주는 툴인데요 

 

Visual Studio Code Extentsition 으로 정해진 규칙 내에서 자동으로 코드 스타일을 정리해주는 쉽게말해 커스터마이징

할수있는 툴입니다.

 

1-1 .Preitter를 사용하는 이유

일반적으로 코드를 짜거나 개발시 코드 라인을 신경쓸시간보다 어떤 기능을 구현하는지에대한 시간을 쓰게됩니다.

코드라인만 일정하게 조절하는 시간을 쓰게되면 개발하는데 너무나 많은 시간이 소요되기 때문에 코드 정렬이 필요하겠죠??

 

2.Eslint (ES + Lint) 란??

ESLint는 ES + Lint의 합성어로  EsmaScript 문법에 에러가 있는 코드에 표시를 달아놓는 뜻을 의미합니다.

즉 ESLint는 Javascript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아서 일관된 코드 스타일로

 

재정렬 해주도록 도와줍니다. 코딩 컨벤션 및 안티 패턴을 자동 검출 해주면서 휴먼 에러를 방지할 수 있고, 코드의 일관성을

유지할 수 있습니다. 또한 코드 리뷰시에도 큰 도움이 되겠죠??

 

---

How to Preiiter & Eslint ?

 그럼 이제 Preiiter 와 EsLint를 사용해서 코드정렬을 해봅시다.

 

npx create-react-app [project-name]

먼저 프로젝트를 생성해주어야겠죠??

 

① 라이브러리 설치가 필요합니다. vsCode에 Extenstion에 가셔서 이 두개의 라이브러리를 설치해주세요.

 

npm 설치시

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

 

Yarn 사용시

yarn add prettier eslint-plugin-prettier eslint-config-prettier

eslint-plugin-prettier: ESLint에 Prettier에 Formatting 기능을 추가해줍니다.

eslint-config-prettier: ESLint에 Prettier에 중복되는 Formatting 룰 삭제 

 

② src root경로로 가셔서 .eslintrc.json파일을 생성하시고 아래 내용을 추가시켜주세요

{
    "extends": ["react-app", "plugin:prettier/recommended"]
}

③  Prettier설치

 

VsCode기준 - File - Preferences -> settings 가시고

 

첫번째 파일 모양 아이콘 보이시죠?? 눌러주시면

settings.json 이라는 파일로 이동됩니다. 현재 이세팅을 

 

"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange"

이렇게 바꿔주시면 세이브할시

바로 반응합니다. 정렬이 바로 반응하죠?? 그럼이제

settings에 Format On Save가 꺼저있다면 체크해주세요

 

이제 저장시 규칙을 직접 규정해주어야 하는대요 root 디렉토리에 .prettirrc파일을 생성해주세요

 

 

{
    "printWidth": 100, // 화면 폭
    "tabWidth": 2, // 탭 간격, 스페이스 설정 시 2칸 띄어쓰기
    "singleQuote": true, // '' 작은 따옴표 사용
    "trailingComma": "all", // , 자동으로 붙이기
    "semi": false, // ; 사용 안 함
    "useTabs": false, // tab키 사용. false 추천 == space 대체
    "arrowParens": "always", // (x) => x, x => x로 전자처럼 괄호 유지
    "endOfLine": "auto",
    "bracketSpacing": "true", // 대괄호 {} 사이 공백
    "jsxBracketSameLine": "true", // JSX 요소 > 줄바꿈
};

 

Prettier · Opinionated Code Formatter

옵션 관련해서는 이사이트 를 참조하시면 됩니다.

저장시 코드가 자동으로 깔끔하게 줄바꿈 해줍니다 ^^

 

참고

GitHub - Koras02/react-preiiter-setting: prettier세팅법 코드깔끔하게 정렬하기

[React] ESLint, Prettier 설치 및 설정

[#. React] CRA(create-react-app)에 ESLint, Prettier 적용, 설정하기