Fat Arrow 클래스 메서드를 허용하도록 ESLint를 구성하는 방법

Fat Arrow 클래스 메서드를 허용하도록 ESLint를 구성하는 방법

---

Es6 Parsing error: Unexpected token =클래스를 lint하려고 할 때 ESLint에서 오류가 발생합니다. eslint에서 팻 화살표 클래스 메서드를 활성화하기 위해 어떤 구성 매개 변수가 누락 되었습니까?

샘플 클래스 :

class App extends React.Component{
    ...
    handleClick = (evt) => {
        ...
    }
}

.eslint

{
  "ecmaFeatures": {
    "jsx": true,
    "modules":true,
    "arrowFunctions":true,
    "classes":true,
    "spread":true,

  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "quotes": [
      2,
      "single"
    ],
  }
}

---

실험적 기능 (예 : 클래스 메서드와 같은 화살표)을 사용하려면 babel-eslint파서 로 사용해야 합니다. 기본 파서 (Espree)는 실험적 기능을 지원하지 않습니다.

---

첫 번째 설치 babel-eslint:

npm i -D babel-eslint

그런 다음 .eslintrc.json파일에 다음을 추가 하십시오.

"parser": "babel-eslint"

---

오류 메시지에서 읽은 내용에서 Parsing error: Unexpected token =린터 오류보다 파서 오류처럼 보입니다.

Babel 을 JavaScript 컴파일러 / 트랜스 파일러 및 babel-eslintESLint 파서로 사용한다고 가정하면 Babel이 ESLint가 아닌 구문에 대해 불평 할 가능성이 있습니다.

문제는 화살표 함수에 관한 것이 아니라 속성 이니셜 라이저 또는 클래스 인스턴스 필드 (또는 둘 다 :)) 라고 생각하는 좀 더 실험적인 것 (ES7 ??)입니다 .

이 새로운 구문 / 기능을 사용하려면 preset-stage-1Babel 에서 활성화해야합니다 . 이 사전 설정에는 syntax-class-properties해당 구문을 허용하는 플러그인 이 포함되어 있습니다.

합산:

1. 바벨 사전 설정 설치 :

   npm install babel-preset-stage-1
   

2. 사전 설정의 목록이 프리셋을 추가 (난 당신이 이미 사용하고 있다고 가정 es2015하고 react, 하나의 프리셋) 당신 .babelrc또는 당신의 babel-loader당신이 웹팩을 사용하는 경우 쿼리 필드.

   "presets": ["es2015", "stage-1", "react"]
   

---

오늘도 같은 문제가 발생했습니다

@dreyescat의 답변이 저에게 효과적입니다.

기본적으로 바벨은 3 사전 설정을 사용 : es2015, react,stage-2

'파싱 오류 : 예기치 않은 토큰 = "이있는 스크린 샷

그런 다음 stage-1사전 설정 도 선택 하면 오류가 사라집니다.

오류없는 스크린 샷

bebeljs.io 사이트에서 직접 테스트 할 수 있습니다.

---

먼저 다음 플러그인을 설치하십시오.

npm i -D babel-eslint eslint-plugin-babel

그런 다음 eslint 구성 파일에 다음 설정을 추가합니다.

.eslintrc.json

{
    "plugins": [ "babel" ],
    "parser": "babel-eslint",
    "rules": {
        "no-invalid-this": 0,
        "babel/no-invalid-this": 1,
    }
}

이렇게하면 fat arrow 클래스 메서드를 사용할 수 no-invalid-this있으며 eslint에서 오류가 발생 하지 않습니다 .

행복한 코딘

---

샘플이 유효한 ES6이 아니므로이를 허용하도록 eslint를 구성 할 방법이 없습니다.

참고 URL : https://stackoverflow.com/questions/34244888/how-do-i-configure-eslint-to-allow-fat-arrow-class-methods