ESLint 플러그인 배포하기

# yo는 yeoman의 줄임으로, 스케폴딩 지원 도구다.
npm install -g yo
# ESLint 특화 스케폴딩 인터페이스 CLI를 설치한다.
npm install -g generator-eslint

# 플러그인 디렉토리 생성
mkdir eslint-plugin-NAME
cd eslint-plugin-NAME # 디렉토리로 이동
 
# 전역으로 설치한 yo에서 스케폴딩된 generator-eslint를 실행한다.
yo eslint:plugin
? What is your name? GITHUB_NAME # package.json의 author에 추가된다.
? What is the plugin ID? NAME # 해당 Plugin의 실제 이름(배포 명)이 되므로 적절하게 작성한다.
? Type a short description of this plugin: PLUGIN_DESCRIPTION # package.json의 description에 나타난다.
? Does this plugin contain custom ESLint rules? Yes # 커스텀 룰을 추가할 것이므로 Yes.
? Does this plugin contain one or more processors? No # 우리는 eslint 기본 프로세서를 사용할 것이므로 No를 설정한다.
 
# 초기 세팅이 되었으므로 dependencies를 설치한다.
npm install

var myData = getData123(); // 함수에 숫자가 있으므로 우리의 ESLint 플러그인에서 에러를 발생시킬 것이다!

# generator-eslint에 설정되어 있는 rule 옵션으로 yo를 통해 구조를 만든다.
yo eslint:rule
? What is your name? 1ilsang # rule 파일에 주석으로 author로 추가된다.
? Where will this rule be published? ESLint Plugin # core가 아닌 plugin 추가이므로 plugin으로 설정한다.
? What is the rule ID? no-function-name-number # rule 아이디에 해당한다. rule 파일명이 된다.
? Type a short description of this rule: The function name must not contain numbers. # rule 설명 추가. 주석으로 파일에 추가된다.
? Type a short example of the code that will fail: var myData = getData123(); # 에러 케이스를 설정한다. 함수에 숫자가 있으면 안되므로 에러상황이다.
   create docs/rules/no-function-name-number.md
   create lib/rules/no-function-name-number.js
   create tests/lib/rules/no-function-name-number.js
 
No change to package.json was detected. No package manager install will be executed.

// lib > rules > no-function-name-number.js
module.exports = {
  meta: {
    type: 'problem', // 이 규칙에 위반되는 값은 코드에 없어야 하므로 problem으로 설정한다.
    docs: {
      // 해당 규칙에 어긋날 경우 빨간줄 위에 뜨는 문구를 설정할 수 있다.
      description: 'The function name must not contain numbers.',
      recommended: true,
      url: 'https://1ilsang.dev/posts/deploy-eslint-plugin',
    },
    fixable: true, // 자동 수정을 추가할 예정으로 true로 한다.
    schema: [], // 규칙이 여러 옵션을 가지고 있다면 스키마로 분리해 표현할 수 있다.
  },
 
  create(context) {
    // 우리의 규칙을 위해 CallExpression > callee > name의 문자열이 숫자가 있는지 확인하면 된다.
    return {
      CallExpression(node) {
        const { callee } = node;
 
        // callee.name에 숫자가 포함되면
        if (/[0-9]/.test(callee.name)) {
          context.report({
            node,
            data: { wrongFunc: callee.name },
            // 에러 메시지를 띄운다. wrongFunc는 현재 함수의 토큰 값이다.
            message: `[{{wrongFunc}}()] 함수에 숫자..?`,
            // --fix 옵션으로 수정되게 할 수 있다. 숫자를 ''로 치환한다.
            fix: (fixer) =>
              fixer.replaceText(callee, callee.name.replaceAll(/[0-9]/g, '')),
          });
        }
      },
    };
  },
};

// tests > lib > rules > RULE_NAME.js
ruleTester.run('RULE_NAME', rule, {
  // 테스트를 통과하는 함수.
  valid: ['var data = getData();'],
 
  // 테스트를 통과하지 못하는 함수.
  invalid: [
    {
      code: 'var data = getData123();',
      errors: [
        {
          message: '[getData123()] 함수에 숫자..?',
          type: 'CallExpression',
        },
      ],
    },
  ],
});

// package.json
{
  "name": "eslint-plugin-ID",
  "version": "0.0.1"
}

npm publish

// .eslintrc
{
  "plugins": ["PLUGIN_ID"],
  "rules": {
    "PLUGIN_ID/RULE": "error"
  }
}