[espree] espree를 사용해서 jsx를 파싱 해보기

목표 : jsx를 espree를 활용해 AST로 파싱된 코드를 직접 눈으로 확인해보자

 

ESLint 소개를 읽는 중이었다.

정적 분석 도구인 ESLint는 espree라는 파서를 사용하는데,

이것은 자바스크립트를 AST로 구조화하여 트리를 기준으로 각종 규칙과 대조하게 된다. 

 

들게 된 의문점들 

- AST구조는 어떻게 생긴 것일까?

- npm install해서 espree를 쓰면 내가 직접 console로도 찍어볼 수 있을까? 

 

 

실험 과정

- vite를 활용해 typescript  프로젝트 하나를 생성한다 

$ npm create vite@latest use-espree

 

 

- 자동 생성된 초기 코드를 Sample.tsx파일로 옮긴다. 

- espree를 설치 후 import하여 parse메서드를 사용하여 console을 찍어본다. 

 

console.log(espree.parse(<Sample />));

 

찾아보니 espree.parse의 첫번째 인수 타입은 string이었다. 

즉, jsx엘리먼트 자체를 넣을 수는 없고 그렇다면 <Sample/>하나만이라도 파싱해보았다

 

 

  const code = "<Sample />";
  const ast = espree.parse(code, {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true, // enable JSX parsing
    },
  });

  console.log(JSON.stringify(ast, null, 2)); //보기 힘드므로 JSON.stringify로 하여

 

parsing된 결과 

 

{
  "type": "Program", // 최상위 노드 타입
  "start": 0, // 코드 시작 위치
  "end": 10,   // 코드 끝 위치
  "body": [   // 프로그램 본문 내용
    {
      "type": "ExpressionStatement",  // JSX는 표현식으로 처리됨
      "start": 0,
      "end": 10,
      "expression": {  // 실제 JSX 요소
        "type": "JSXElement", // JSX 요소
        "start": 0,
        "end": 10,
        "openingElement": { // 여는 태그 정보
          "type": "JSXOpeningElement",  // 닫는 태그 (self-closing이라 null)
          "start": 0,
          "end": 10,
          "attributes": [], // 프롭스 (없음)
          "name": {  // 컴포넌트 이름
            "type": "JSXIdentifier",
            "start": 1,
            "end": 7,
            "name": "Sample"
          },
          "selfClosing": true
        },
        "closingElement": null,
        "children": []   // 자식 요소 (비어있음)
      }
    }
  ],
  "sourceType": "module"
}

 

 

추가 : eslint 커스텀 기능을 개발한다면 조금더 개별적인 룰을 적용해볼 수도 있을 것 같다.

커스텀 기능을 추가하기 위해서는 위의 AST 구조를 대략적으로나마 익혀놓는 것이 도움이 될 것으로 예상된다.

추후 개발시 커스텀 기능을 적용해서 eslint를 개발 생산성 향상에 사용해 보도록 하자.