[React native expo] ESLint 적용 & issue : There should be at least one empty line between import groups

expo에서 ESLINT를 적용하는법은 아래와같이 설치를 해주고

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

https://docs.expo.dev/guides/using-eslint/

Use ESLint and Prettier

가이드 내용에 맞게 적용하면 된다.

프로젝트 루트에 .eslintrc.js 라는 ESLint 구성 파일을 만들고

module.exports = {
  root: true,
  extends: [
    'universe/native',
  ],
};

 

그리고 package.json에

{
  "scripts": {
    "lint": "eslint ."
  }
}

위 코드를 추가해준다.

 

그러고 npm run lint를 하면 오류가 잔~~~뜩 뜰것이다.

제일 많이 뜨는 오류가 import 순서 오류인데

이렇게 오류뜨는곳에 마우스를 가져다대면 뭐가 문젠지 알려줄것이다.

위 내용은 react-native가  react-redux 앞에 선언되야한다는 내용이다.

그리고 제일 많이 뜨는게 이건데

There should be at least one empty line between import groups

줄바꿈...하라고..?

그래서 내가 한짓..

응 안돼 죄다 오류나^^ 그래서 이거 뭐 어케해야하나하다가 알아낸 방법

npm install eslint-plugin-import --save-dev

이거 설치하고 오류나는 곳에 마우스 다시 가져다대면 Quick Fix...라고 뜨는 항목버튼이 있다 그걸 누르면

 

이러고 메뉴가 뜨는데 여기서 fix all auto-fixable problems을 눌러주자

그럼 아주 고맙게도 알아서 정리를 해주면서 오류가 안난다..