[ReactNative] 미사용 스타일을 ESLint로 감지하고 싶습니다.

배경


  • 프로젝트가 커지면 style의 관리가 번잡해져 미사용의 style가 방치되기 쉽다
  • 컴포넌트의 입도를 작게 만들 수 있다면 눈치채지도 모르지만 현실은 그렇게 가지 않는 장면이 많다
  • ESLint로 감지 할 수 있다면 쉽고 쉽다고 생각했습니다.

    방법



  • eslint-plugin-react-native 사용
  • 이하 거의 README에 쓰는 것 그대로
  • npm i -D eslint eslint-plugin-react eslint-plugin-react-native
    # or
    yarn add -D eslint eslint-plugin-react eslint-plugin-react-native
    
  • ESLint 설정에 다음 내용 추가

  • .eslintrc
    {
      "env": {
        "react-native/react-native": true
      },
      "plugins": ["react", "react-native"],
      "rules": {
        "react-native/no-unused-styles": 2,
        "react-native/split-platform-components": 2,
        "react-native/no-inline-styles": 2,
        "react-native/no-color-literals": 2,
        "react-native/no-raw-text": 2
      }
    }
    
  • 사용되지 않는 스타일을 감지하고 싶다면 no-unused-styles 그냥 OK
  • 에디터와 제휴하고 있으면 적선이 붙어 곧바로 알 수 있다!

  • 좋은 웹페이지 즐겨찾기