ESLint로 놀기

Javascript를 사용하여 FP(Functional Programming)를 배우기 위해 속임수를 사용하거나 특정 구문을 강요하지 않도록 제한하고 싶었습니다.

이를 위해 ESLint를 사용했습니다.

eslint is a linting tool for EcmaScript, where you can define your own rules
of what you consider to be "good" code.

ESLint에는 고정된 규칙 집합이 없습니다. 에 대한 권장 구성이 있습니다.
다른 환경이지만 자신의 규칙을 자유롭게 추가하거나 수정할 수 있습니다.

I Also gave a presentation @ Kabisa about this subject. So you can also checkout the video below.

스타일="위치:절대;상단:0;왼쪽:0;너비:100%;높이:100%;">

강력한 규칙

정말, 정말 강력한 한 가지 규칙이 있습니다: no-restricted-syntax( https://eslint.org/docs/rules/no-restricted-syntax )

작동 방식은 다음과 같습니다. 작성하는 EcmaScript/JavaScript는 파서를 통과하는 텍스트 조각입니다. 이 파서는 차례로 입력된 코드의 데이터 모델을 생성합니다. 이것을 추상 구문 트리(AST)라고 합니다.

https://astexplorer.net/을 사용하여 작동하는 것을 볼 수 있습니다(여기에서 많은 언어의 AST를 탐색할 수 있습니다). 왼쪽 입력에 코드를 입력하면 오른쪽에 AST(추상 구문 트리)가 표시됩니다.

HTML도 노드 트리인 것처럼 이 트리를 비교할 수 있습니다.
속성). 동일한 개념에 따라 선택기를 사용하여 이 트리의 특정 요소를 대상으로 지정할 수 있습니다(CSS에서처럼!)

https://eslint.org/docs/developer-guide/selectors

이것이 얼마나 깔끔한지 몇 가지 예를 보여주기 위해:

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "CatchClause > BlockStatement[body.length=0]",
        "message": "No empty catch blocks!"
      }
    ]
  }
}

빈 catch 블록이 있으면 이 줄에 오류가 추가됩니다.

또는 이것:

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "CatchClause > :not(CallExpression[callee.name=\"logError\"])",
        "message": "Missing error reporting in catch block"
      }
    ]
  }
}

사용자 지정 메시지 옵션을 사용하면 원하는 방식에 대한 힌트를 얻을 수도 있습니다.
완료:

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "FunctionExpression",
        "message": "Please use the lambda () => notation"
      },
      {
        "selector": "VariableDeclarator[id.name=/get.*/] > ArrowFunctionExpression > AssignmentExpression",
        "message": "No assignments in getters"
      },
      {
        "selector": "VariableDeclarator[id.name=/select.*/] > ArrowFunctionExpression[params.0.name!=\"state\"]",
        "message": "First argument of selector should be called state"
      }
    ]
  }
}

제한 없는 구문

ESLint는 기본적으로 많은 훌륭한 규칙을 가지고 있지만 no-restricted-syntax Linting을 완전히 새로운 수준으로 끌어 올립니다.

그러나 할 수 없는 것이 있습니다. 규칙을 만들고 싶었습니다.
자기 참조 재귀를 제한합니다. 그러나 일치시킬 식별자가 필요했기 때문에 일치시키기 위해 자리 표시자를 사용할 수 없습니다.

이를 위해 사용자 정의 ESLint 플러그인을 만들어야 했습니다. 다행히 yeoman 및 the generator created here 을 사용하여 생성하는 것은 정말 쉽습니다.

"지시를 따르다"

주로 "지시를 따르십시오"운동입니다. 내가 실행한 2가지 함정이 있었다
안으로:

기본 파서는 최신 JS 파서가 아니라 ES3이기 때문에 하나는 내 규칙에 대한 파서를 지정하는 것이었습니다.

그래서 생성된 테스트는 다음과 같았습니다.

ruleTester.run("fp-challenge", rule, {
  invalid: [
    {
      code: "const fib = n => n <= 1 ? 1 : fib(n - 1) + fib(n - 2);",
    },
  ],
});

그리고 그 테스트에 파서 옵션을 추가해야 했습니다.

ruleTester.run("fp-challenge", rule, {
  invalid: [
    {
      code: "const fib = n => n <= 1 ? 1 : fib(n - 1) + fib(n - 2);",
      parserOptions: { ecmaVersion: 6 },
    },
  ],
});

적절한 오류 메시지를 받기 전에.

다른 함정은 사용자가 규칙에 대한 옵션 지정을 허용하도록 하려면 이러한 옵션에 대한 유효성 검사를 허용하는 JSON 스키마를 제공해야 한다는 것입니다. 그러나 문제는 제공된 JSON 스키마를 재분석하기 전에 테스트를 다시 시작해야 한다는 것입니다. 따라서 yarn test --watch를 사용하여 테스트를 실행하면 테스트가 계속 실패하거나 계속 통과하는 이유를 계속 궁금해하고 스키마에 대한 변경 사항을 선택하지 않을 것입니다.

찾았다 Understanding JSON schema
스키마 정의에 도움이 됩니다. main website 올바른 정보를 찾는 것이 혼란스럽습니다.

적절한 ESlint 구성을 사용하면 팀의 모범 사례를 적용하는 데 도움이 되며 팀에 합류한 다른 구성원에게 유용한 힌트를 남길 수도 있습니다. 프로젝트 자체 내에서 개발 정신을 포착하는 데 도움이 될 수 있습니다.

행복한 린팅!

To checkout the plugin I wrote for my FP Challenge, check: https://github.com/matthijsgroen/eslint-plugin-fp-challenge