Puppy's paw

react에서 class를 쓰는 경우와 상태가 없는 함수를 쓰는 경우

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

ES7은 class에서 static 변수 설정이 가능하다.

하지만 eslint는 ES6 기본이라 에러가 난다.

yaml을 사용하면 아래를 추가한다.

parser: babel-lint

jsx로 처리되는 변수들은 shadowing이 되서 eslint가 못찾아 낸다고 한다.

그래서 쓰고 있는데도 

is defined but never used같은 에러를 발생시킨다.

react도 직접 쓰지 않지만 jsx가 사용해서 필요한데 같은 에러가 나온다.

./eslintrc에

extends: ['eslint:recommended',  'plugin:react/recommended']

를 추가한다.

아니면 에러나는 줄 옆에 다음과 같은 주석을 단다.

// eslint-disable-line no-unused-vars

참고로 구체적으로 입맛에 맞는 설정도 가능하다.

{

  // I want to use babel-eslint for parsing!

  "parser": "babel-eslint",

  "env": {

    // I write for browser

    "browser": true,

    // in CommonJS

    "node": true

  },

  {

    "ecmaFeatures": {

      "jsx": true

    }

  },

  {

    "plugins": [

      "react"

    ]

  },

  // To give you an idea how to override rule options:

  "rules": {

    "quotes": [2, "single"],

    "eol-last": [0],

    "no-mixed-requires": [0],

    "no-underscore-dangle": [0],

    "react/display-name": 1,

    "react/jsx-boolean-value": 1,

    "react/jsx-no-undef": 1,

    "react/jsx-quotes": 1,

    "react/jsx-sort-prop-types": 1,

    "react/jsx-sort-props": 1,

    "react/jsx-uses-react": 1,

    "react/jsx-uses-vars": 1,

    "react/no-did-mount-set-state": 1,

    "react/no-did-update-set-state": 1,

    "react/no-multi-comp": 1,

    "react/no-unknown-property": 1,

    "react/prop-types": 1,

    "react/react-in-jsx-scope": 1,

    "react/require-extension": 1,

    "react/self-closing-comp": 1,

    "react/sort-comp": 1,

    "react/wrap-multilines": 1

  }

}