🕺 ESLint 커스텀 플러그인 만들고 배포하기

ESLint 설정 중에 'arrow-body-style': ['error', 'always']라는 규칙이 있다.

이 설정을 켜면 모든 화살표 함수에서 항상 중괄호({})와 return 문을 사용해야 한다.

 

아래처럼 한줄로 표현하기 어려운 경우에는 return이 있어도 보기 좋지만,

setErrors((prev) => {
  const errorMsg = validators[name] ? validators[name](value, values) : '';
  return { ...prev, [name]: errorMsg };
});

아래 케이스처럼 한 줄로 표현이 충분히 가능한 경우에도 return이 추가되어 아쉬웠다.

const handlePasswordToggle = () => {
    setShowPassword((prev) => {
      return !prev;
    });
  };

근데 또 한 줄로 표현가능하더라도 JSX를 리턴하는 경우에는 return 키워드를 꼭 넣고 싶었다.

const page = () => {
  return <>페이지~</>
}

지극히 개인 취향이지만...🙃 'arrow-body-style' 설정만으로는

내가 원하는 동작을 세밀하게 컨트롤하기 어려웠다.

 

그래서 멘토님의 조언에 힘입어 직접 커스텀 ESLint 플러그인을 만들어보기로 했다. (냅다 도전~~!)

이번 글에서는 제작 과정과 간단한 후기까지 정리해보려고 한다.

 

⚙️ 제작 과정

1️⃣ module.exports

module.exports = {
  meta: { ... },
  create(context) { ... }
};

ESLint 룰을 정의할 때는 객체를 내보내야 한다.

이 객체는 크게 두 가지 핵심 속성으로 구성된다.

1. meta → 룰의 메타정보 (문서, 메시지, 수정 가능 여부 등)
2. create → 실제 AST를 순회하며 코드를 검사하는 함수

 

2️⃣ meta 객체

meta: {
    type: "suggestion",
    docs: {
      description: "컴포넌트는 항상 중괄호 사용, 일반 함수는 간결하게 작성",
      category: "Stylistic Issues",
      recommended: false,
    },
    fixable: "code",
    schema: [],
    messages: {
      unexpectedBraces:
        "간단한 화살표 함수에는 중괄호와 return을 사용하지 마세요",
      expectedBraces: "컴포넌트 함수에는 중괄호와 return을 사용하세요",
    },
  },

type: "suggestion" → 코드 스타일과 관련된 권장사항을 제시하는 룰이다.

• "problem": 코드 오류/버그를 찾는 룰
• "suggestion": 코드 스타일이나 권장 사항
• "layout": 들여쓰기, 공백 등 포맷 관련

docs → ESLint 문서에 표시될 설명과 카테고리 정보이다.

fixable: "code" → ESLint --fix 명령으로 자동 수정 가능함을 의미한다.

• "code": 코드 수정 가능
• "whitespace": 공백/포맷만 수정 가능

messages → ESLint가 경고/에러를 표시할 때 사용할 메시지 목록이다.

 

3️⃣ create(context) 함수

create 함수는 ESLint가 AST를 순회할 때 호출되는 핵심 부분이다.

context 객체를 통해 코드 위치 정보, 경고 보고, 자동 수정 등을 수행할 수 있다.

반환값으로는 AST 노드 타입별 콜백 객체를 반환한다.

return {
  ArrowFunctionExpression(node) {
    ...
  }
};

이렇게 하면 코드에서 화살표 함수가 발견될 때마다 해당 콜백이 실행된다.

 

4️⃣ isComponentFunction(node)

React 컴포넌트 함수를 구분하기 위한 헬퍼 함수이다.

두 가지 기준으로 판별했다.

✅ 1. 함수 이름이 대문자로 시작하는가?

화살표 함수는 익명 함수이기 때문에,

부모 노드(VariableDeclarator)의 id.name을 통해 이름을 확인해야 한다.

→ 화살표 함수는 익명 함수여서 id값이 null

const parent = node.parent;
  if (parent.type === "VariableDeclarator" && parent.id && parent.id.name) {
    if (/^[A-Z]/.test(parent.id.name)) {
      return true;
    }
}

// 화살표 함수는 아래처럼 AST 트리가 그려짐
"declarations": [
  {
    "type": "VariableDeclarator", // 변수 선언 부분에 해당함
    "start": 6,
    "end": 53,
    "id": {
      "type": "Identifier",
      "start": 6,
      "end": 12,
      "name": "Button"
    },
...
]

✅ 2. JSX를 반환하는가?

함수 이름이 파스칼 케이스가 아니더라도 JSX를 반환하면 컴포넌트로 간주했다.

if (node.body.type === "JSXElement" || node.body.type === "JSXFragment") {
  return true;
}

// 화살표 함수 예제
const Button1 = () => <>하이</>
const Button2 = () => <button>하이</button>

// AST 예시
{
  "type": "ArrowFunctionExpression",
  "id": null,
  "body": {
      "type": "JSXFragment", // <></>일 경우 JSXFragment
     }
}

블록문 안에서 JSX를 리턴하는 경우도 처리했다.

if (node.body.type === "BlockStatement") {
  const returnStatements = node.body.body.filter(
    (stmt) => stmt.type === "ReturnStatement"
  );
  return returnStatements.some(
    (stmt) =>
      stmt.argument &&
      (stmt.argument.type === "JSXElement" ||
        stmt.argument.type === "JSXFragment")
  );
}

// 화살표 함수 예제
const List = ({loading}) => {
  if (loading) {
    return <div>로딩중...</div>
  }

  return (
    <ul>
      <li>리스트</li>
    </ul>
  )
}

// AST 예시 (축약)
"body": {
  "type": "BlockStatement",
  "start": 28,
  "end": 137,
  "body": [
    "consequent": {
      "type": "BlockStatement",
      "start": 45,
      "end": 79,
      "body": [
        {
          "type": "ReturnStatement",
          "argument": {
            "type": "JSXElement",
  },
  {
    "type": "ReturnStatement",
    ....

 

5️⃣ isSingleReturn(node)

한 줄로 표현 가능한 화살표 함수인지 판단하는 함수이다.

function isSingleReturn(node) {
  // 첫 번째 조건: body의 type이 Block문이 아니면 이미 한 줄이라서 true를 리턴
  if (node.body.type !== "BlockStatement") {
    return true;
  }

    // block문이 있을때 body의 length가 1이 아니면 한 줄로 표현하지 못하도록 false를 리턴
  const [statement] = node.body.body;
  if (!statement || node.body.body.length !== 1) {
    return false;
  }

    // block문이 있을 때 그 타입이 리턴이고 argument가 있다면 한 줄로 표현 가능
  return statement.type === "ReturnStatement" && statement.argument;
}

 

6️⃣ return {ArrowFunctionExpression}

ESLint는 방문자(Visitor) 패턴을 사용해서 규칙을 검사한다.

그래서 ArrowFunctionExpression를 사용해서 화살표 함수만 검사하도록 구현했다.

return {
  ArrowFunctionExpression(node) {
    ...
};

이 구문에 fix함수도 추가해서 --fix 옵션으로 자동 수정 가능하도록 구현했다.

 

🚀 NPM 배포

npm publish

완성한 플러그인은 npm에 배포했다.

👉 eslint-plugin-component-arrow-style

 

처음에 다 만들었다고 생각하고 무작정 배포를 해버렸다.

그런데 첫 배포하고 확인해보니 README 문서가 없어서 다시 배포했다...

배포를 하려면 매번 버전을 업데이트를 해줘야 한다는 사실을 몰라서

버전 업데이트 명령어를 실수로 입력했다가 1.0.1 버전을 날리고…🫠

어찌저찌 리드미 문서를 추가한 1.0.2 버전을 업데이트 했다.

 

🐞 버그 발견

몇 가지 테스트 케이스를 만들어서 배포 전에 테스트를 해봤지만,

실제 사용해보니 내가 고려하지 못 했던 케이스가 있었다….🙃

지금까지 발견한 버그는 두 가지이다.

1️⃣ 객체 리턴 시 괄호 누락 문제

// 원래 코드 -> 이렇게 수정되어야 하는데...
setValues((prev) => ({ ...prev, [name]: value }));

// 잘못 수정된 결과 🤯
setValues((prev) => { ...prev, [name]: value });

fix 함수에서 객체 리턴을 고려하지 못 했고,

이로 인해 --fix를 실행하면 코드가 잘못 수정되어 에러가 발생하는 문제가 생겼다. 🤯

 

2️⃣ map()에서 JSX 리턴 시 코드 깨짐

map() 내부에서 컴포넌트를 리턴할 때,

fix가 적용되면 코드가 비정상적으로 수정되는 문제가 있다.

이 부분도 1번과 동일하게 fix 로직을 수정해야 할 것 같다.

또 막상 플러그인을 직접 사용해보니,

map() 내부에서는 return을 제거하는게 좀 더 깔끔해보여서

이 부분을 추가할지 고민 중이다.

 

💭 마무리

처음에는 어떻게 시작해야 할지 몰라서 감을 잡기 어려웠지만,

차근차근 찾아보며 직접 만들어보니 생각보다 재밌었다.

 

특히 JS 코드가 AST로 변환된다는 말을 많이 들어왔는데,

이번에 AST 구조를 적용해서 코드를 작성해보니 좀 더 이해하기 수월해진 것 같다.

 

또, 이번 경험을 통해 팀 코드 스타일을 ESLint로 관리하면 훨씬 효율적이겠다는 생각이 들었다.

매번 규칙을 기억하기보다는 --fix나 저장으로 한 번에 정리된다면 편할 것 같다.

 

아무튼 이번 기회에 만들어볼 수 있어서 재밌었다. 🕺

 

📚 참고

https://eslint.org/docs/latest/extend/custom-rules

Custom Rules - ESLint - Pluggable JavaScript Linter

https://astexplorer.net/

AST explorer

https://blog.eunsukim.me/posts/about-javascript-abstract-syntax-tree-and-eslint-rules

TIL - AST(Abstract Syntax Tree)와 ESLint Rules

https://fantasmith.com/challenge/opensource/fsd_lint/

FSD를 위한 ESLint 플러그인 개발 일지 | Zen's Atelier