[리액트 클론코딩] 2. 프로젝트 세팅하기(2) - ESLint, Prettier

 

예전에 prettier랑 eslint 설정하다가 막힌 적이 있는데 당시 그냥 하지말아야지! 하고 넘어갔었고 결국 같은 오류에 직면하고야 마는데....

역시 그때 그때 해결해두어야 한다. (이 깨달음만 54875456465번째)

 

 

 

출처는 모두 여기!!!!!!!!

감사합니다.

React ESLint + Prettier 적용하기

 

 

---

 

 

◽ prettier

npm i --save-dev --save-exact prettier

// eslint와 충돌이 일어날 수 있어 함께 설치
npm i eslint-config-prettier eslint-plugin-prettier

.prettierrc.js

module.exports = {
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

 

 

 

◽ ESLint

npm i eslint

.eslintrc.js

여기서 약간 문제가 있어서 설정을 바꾸었다.

module.exports = {
  "plugins": ['@typescript-eslint'],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
}

 

package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "prettier": "prettier --write --config ./.prettierrc \"**/*.{ts,tsx}\"", // 추가
  "lint": "eslint './src/**/*.{ts,tsx}'", // 추가
  "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'" // 추가
},
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest",
    "prettier" // 추가
  ]
},

 

 

 

그 외 발생 문제 1

내가 let을 쓰든 const를 쓰든 알아서 결정하면 안될까?!

api 완성되면 쓰려고 미리 선언해놓은건데 ㅠㅠ

 

그래서 아래와 같이 설정해주었다.

// .eslintrc.js

module.exports = {
  "plugins": ['@typescript-eslint'],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  
  // 추가해준다.
  "rules": {
    "prefer-const": 0,
  }
}

 

 

 

그 외 발생 문제 2

왜 내 규칙대로 자동으로 안바꿔주냐!!!!!!!!!!!!!!!!!!!!!!!!

이럴 땐 on save를 체크해주자~,, 잘된다.

 

 

---

 

오늘의 작은 성취,,

두구두구두구...

 

 

props를...! type으로 받았다....!!!!

야호,,,,~~

 

 

 

 

퍼블리싱 너무 재밌다..............!