CRA(Create React App) + Eslint + Prettier 로 환경설정하기

자주 하는 셋팅이라 음 뭐 별거없군 하다가 삽질 너무 오래해서 ...ㅠㅠ

공유합니다

먼저 제 앞전 포스팅 보시고 노드나 npm 버전 다 lts로 맞춰두시구요.

npx create-react-app 본인이 원하는 프로젝트명

위처럼 입력하시면 후라라락 프로젝트가 생깁니다

친절하게 터미널에 설명이 다 나오죠

(VScode 에서 기본 터미널을 git bash로 설정해두신 분이라면 조금 더 편할 것 같습니다)

설치가 완료되면 cd + 폴더명 입력 후 npm start 하시면 기본 화면에 진입합니다

---

이제 Vscode 익스텐션 마켓에 가셔서 Eslint랑 Prettier를 설치해주세요

설치가 완료되면 root 경로에다가 (package.json과 같은 경로) .eslintrc.json 과 .prettierrc.json 이렇게 2개의 파일을 생성!

 

.eslintrc.json 파일은 아래와 같이 설정합니다

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

---

.prettierrc.json파일은 아래와 같이 설정합니다.

{
    "printWidth": 100,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "semi": true,
    "useTabs": false,
    "arrowParens": "avoid",
    "endOfLine": "lf"
  }

---

요렇게 하면 일단 설정이 끝났네요 : )

여기다가 이제 emotion 이나 styled component 같은 css in js 라이브러리를 설치하여서 사용하시면 됩니다

아 추가로 설정할게 있네요 잠시

Vscode 설정 (settings)으로 들어가시면 우측 상단에 아이콘이 하나 있습니다

바로 저 아이콘 중 가장 좌측의 아이콘인데요. 저걸 클릭해 주시면 settings.json 파일로 진입합니다

    "editor.formatOnSave": true,

안에 살펴보시면 저렇게 되어있는 부분이 있는데 아마 건들지 않으신 분들은 false로 설정이 되어있을거에요

그걸 저렇게 true로 바꿔주시면 앞으로 편집하시는 파일들에서 저장을 누르실때마다 자동으로

prettier가 코드를 이쁘게 샤샤샥 정리해줄거에요.

https://velog.io/@velopert/eslint-and-prettier-in-react

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

 

리액트계의 아버지인 벨로퍼트 김민준님의 링크를 보고 따라했기 때문에 참고하시면 좋을 것 같습니다

감사합니다