ESLint로 일부 구문 제한

ESlint는 코드의 일관성을 높이고 팀의 시간을 많이 절약해 주는 환상적인 도구입니다. 대부분의 일반적인 사용 사례를 처리하는 수많은 플러그인이 있지만 때로는 특정 요구 사항이 있어서 자체 규칙을 만드는 데 너무 많은 시간이 걸릴 수 있습니다.

가장 간단한 경우, 함수(또는 실제로는 다른 모든 것)의 사용을 금지하려는 경우 no-restricted-syntax라는 기본 규칙을 활용할 수 있습니다.

추상 구문 트리(AST) 이해

첫 번째 선택기를 작성하기 전에 기본 시스템을 이해해야 합니다. AST는 단순히 "파서"에 의해 생성된 중첩된 개체(따라서 AST의 "트리") 형태로 프로그램을 표현한 것입니다. 쉽게 읽고, 쿼리하고, 조작할 수 있으므로 매우 유연합니다. 대안은 정규 표현식을 사용하는 것이지만 읽고 쓰기가 매우 어렵습니다. 따라서 이는 기본적으로 코드를 이해함으로써 IDE가 수행하는 모든 훌륭한 작업을 가능하게 하는 중간 단계입니다.

작동 방식을 이해하기 위해 약간의 코드와 해당 AST를 병렬로 표시하는 편리한 도구인 AST 탐색기를 사용해 볼 수 있습니다. 코드의 아무 부분이나 마우스로 가리키거나 클릭하여 해당 AST 부분을 강조 표시할 수 있습니다. :

⚠️ 언어 변경 시 파서 선택에 주의하세요.

예를 들어 Vue 코드를 작성할 때 우리의 경우 ESlint 선택기를 작성하려고 하므로 vue-eslint-parser를 사용해야 합니다. @vue/compiler-dom의 출력을 검사할 수도 있지만 ESlint 규칙을 사용하여 결과 트리를 쿼리할 수는 없습니다.

선택기 만들기

두 번째로 필요한 유용한 도구는 ESLint 선택기 문서입니다. 여기에는 AST를 쿼리하는 데 사용할 수 있는 표현식이 나열되어 있으며 CSS 작업에 익숙하다면 친숙하게 느껴질 수 있습니다. 이는 하위 항목, 형제, 노드 및 속성 필터링 등과 같은 일치자를 사용하는 동일한 "계단식" 동작을 기반으로 합니다. 다음은 문서의 몇 가지 예입니다.

• AST 노드 유형: ForStatement
• 속성 값: [attr="foo"]
• 중첩 속성: [attr.level2="foo"]
• 필드: FunctionDeclaration > 식별자.id

다음 코드는 다음과 같습니다.

const time = dayjs();

@typescript-eslint/parser를 사용하여 다음 AST를 생성합니다.

Program {
  body: [
    VariableDeclaration {
      declarations: [
        VariableDeclarator {
          id: Identifier
          init: CallExpression {
            callee: Identifier {
              name: "dayjs"
            }
            arguments: []
            optional: false
          }
        }
      ]
      kind: "const"
    }
  ]
  sourceType: "module"
}

우리의 경우 이름이 dayjs(이름 속성이 있는 식별자)인 함수 호출(CallExpression)을 일치시켜야 합니다. 또한 직계 후손 선택자 > dayjs 식별자가 중첩된 함수 호출과 일치하지 않는지 확인하세요. 따라서 선택기는 CallExpression > 식별자[name="dayjs"].

예

간단한 기능 선택기

UTC 없는 dayjs 사용을 방지하기 위해 ESLint Playground에서 실시간으로 시도해 볼 수 있는 선택기는 다음과 같습니다.

const time = dayjs();

Program {
  body: [
    VariableDeclaration {
      declarations: [
        VariableDeclarator {
          id: Identifier
          init: CallExpression {
            callee: Identifier {
              name: "dayjs"
            }
            arguments: []
            optional: false
          }
        }
      ]
      kind: "const"
    }
  ]
  sourceType: "module"
}

Vue 템플릿 내부

다음은 Vue 템플릿의 템플릿에 로컬 변수를 설정하는 (매우 해킹적인) 방법을 금지하는 또 다른 예입니다(eslint-plugin-vue 패키지가 필요하기 때문에 규칙 앞에 vue/가 붙는 점에 유의하세요).

'no-restricted-syntax': [
  'error',
  {
    selector: 'CallExpression > Identifier[name="dayjs"]',
    message: 'Always use dayjs.utc() instead of dayjs() to avoid timezone issues',
  },
]

const foo = dayjs();
//          ^^^^^ Invalid
const bar = dayjs.utc();

그런데 과거에 몇 가지 반응성 문제를 일으킨 이 이상한 트릭에 대한 자세한 내용은 여기에서 읽을 수 있으므로 우리는 이를 완전히 금지하기로 결정했습니다.

정규식 사용

이것은 특정 번역 세트의 사용을 금지해야 하는 경우가 있는 마지막 예입니다. 따라서 내보내기로 시작하는 첫 번째 인수가 있는 t(또는 모든 변형) 함수를 찾아야 했습니다. :

'vue/no-restricted-syntax': [
  'error',
  {
    selector: 'VAttribute > VExpressionContainer > AssignmentExpression',
    message: 'Do not assign values in templates as it will not be reactive',
  },
],

<template>
  <div :set="(foo = 'bar')">{{ foo }}</div>
  <!-- Outputs <div>bar</div> -->
  <!--       ^^^^^^^^^^ Invalid -->
</template>

결론

올바른 선택기를 찾는 데 어려움을 겪고 있다면 ChatGPT에 도움을 요청할 수 있습니다! 선택자에 대한 설명도 좋습니다:

또한 수입만 제한해야 하는 경우에는 수입 제한 없음 규칙을 사용하는 것이 더 간단합니다.

'no-restricted-syntax': [
  'error',
  {
    selector: 'CallExpression[callee.name=/^(t|tc|tf|te|d|n)$/][arguments.0.value=/^exports./]',
    message: 'Do not assign values in templates as it will not be reactive',
  },
],

이 솔루션은 가장 단순한 상황에서 훌륭하게 작동하지만 자동 수정을 제안할 수는 없습니다. 보다 완벽한 솔루션을 위해서는 대신 사용자 정의 규칙을 생성해야 합니다.

이러한 규칙 덕분에 같은 실수를 두 번 반복하지 않아 시간을 절약할 수 있습니다!

위 내용은 ESLint로 일부 구문 제한의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!