ESLint에 대한 로컬 규칙 작성

ESLint는 깨끗한 코드와 구문에 대해 이미 정의된 원칙에 따라 더 나은 코드를 작성할 수 있게 해주는 훌륭한 도구입니다. 그러나 이미 게시된 ESLint 패키지 및 규칙이 작동하지 않는 상황이 발생할 수 있습니다(예: 일부 비즈니스 요구 사항으로 인해 교체해야 하는 코드가 있음). 이것은 정확히 몇 주 전에 나에게 일어난 경우입니다.

기본적으로 하나의 문자열(패키지 가져오기)을 다른 문자열(내가 정의한 사용자 지정)로 대체하는 ESLint 규칙을 만들어야 했습니다. 비교적 간단한 작업처럼 보입니다. 그래서 나는 아마 모든 개발자들이 이 시점에서 할 일을 정확히 했습니다. "ESLint는 가져오기를 다른 것으로 대체"를 입력했는데 도움이 될 리소스를 찾을 수 없다는 사실에 충격을 받았습니다. 어쩌면 내가 제대로 구글링을 할 수 없거나 적절한 문서나 문서가 이미 만들어졌을 수도 있지만 추측하여 다음 코드를 모두 직접 만들어야 했습니다(JavaScript가 도움이 되지 않음).

따라서 아래에서 하나의 가져오기 문을 다른(귀하가 정의한) 문으로 바꿀 수 있는 로컬 ESLint 규칙인 코드 샘플을 볼 수 있습니다.

암호

먼저 로컬 규칙을 작성할 수 있는 패키지를 설치해 보겠습니다.

yarn add --dev eslint-plugin-local-rules # npm install --save-dev eslint-plugin-local-rules

npm 패키지로 게시할 필요 없이 로컬 규칙을 작성할 수 있습니다.

다음으로 플러그인 배열에 추가하겠습니다.

// .eslintrc.js

module.exports = {
  plugins: ['eslint-plugin-local-rules'],
};

이제 로컬 규칙 자체로 들어갑니다. 이것은 튜토리얼 코드의 가장 큰 부분이므로 각 섹션을 단계별로 설명하여 내가 추측하여 스스로 확인해야 했던 내용을 배우게 할 것입니다 :D. 마지막에는 로컬 규칙이 작동하는 데 필요한 모든 선언이 포함된 전체 파일이 표시됩니다.

먼저 파일 상단에 module.exports 가 표시되고 그 안에 replace-bad-import 라는 문자열 키가 있습니다. 이것은 나중에 eslintrc 파일에 필요할 로컬 규칙의 이름입니다.

// eslint-local-rules.js

module.exports = {
  'replace-bad-import': {},
};

메타 구성에서 설명, 범주 등과 같은 로컬 모듈에 대한 정보를 정의합시다. 이것은 더 유익한 방법이므로 지금은 그다지 중요하지 않습니다.

// eslint-local-rules.js

module.exports = {
  'replace-bad-import': {
    meta: {
      fixable: "code",
      docs: {
        description: 'My awesome ESLint local rule that will replace an import declaration with something else',
        category: 'Possible Errors',
        recommended: false,
      },
      schema: [],
    },
  },
};

이제 create 메서드인 로컬 규칙의 마지막 부분으로 이동합니다.

// eslint-local-rules.js

module.exports = {
  'replace-bad-import': {
    create(context) {
      return {
        ImportDeclaration(node) {
          if(node.source.value.includes('bad-import-declaration')) {
            context.report({
              node,
              message: 'Use proper import',
              fix: fixer => fixer.replaceText(node, node.specifiers.map(specifier =>`import ${specifier.local.name} from 'good-import-declaration';`,).join('\n'))
            });
          }
        },
      };
    },
  },
};

여기에서 모든 것을 단계별로 살펴보겠습니다.

create 메서드는 나중에 발견된 문제에 대한 보고서를 만드는 데 사용할 context 매개 변수를 허용합니다.

이 메소드는 새ImportDeclaration 규칙을 반환합니다. 다른 규칙에 관심이 있으시면 공식docs을 확인하세요.

특정 노드 가져오기에 쿼리가 포함되어 있는지 확인하고 있습니다(이 경우 bad-import-declaration )

이 if 문 내에서 다음 매개 변수를 사용하여 컨텍스트 개체에서 메서드를 호출하여 새 보고서를 생성합니다.

node : 규칙을 트리거한 실제 노드(스택 추적과 같은 것) 위치

message : 규칙을 실행하고 문제를 찾은 후 표시되어야 하는 메시지

fix : 가져오기 문을 수정하는 데 사용할 해결 방법입니다. 이 경우 fixer를 매개변수로 사용하는 메서드이고, 현재 노드와 노드 대신 추가해야 하는 새 값으로 이 fixer라는 메서드를 호출합니다.

아래에서 규칙의 전체 코드를 볼 수 있습니다.

// eslint-local-rules.js

module.exports = {
  'replace-bad-import': {
    meta: {
      fixable: "code",
      docs: {
        description: 'My awesome ESLint local rule that will replace an import declaration with something else',
        category: 'Possible Errors',
        recommended: false,
      },
      schema: [],
    },
    create(context) {
      return {
        ImportDeclaration(node) {
          if(node.source.value.includes('bad-import-declaration')) {
            context.report({
              node,
              message: 'Use proper import',
              fix: fixer => fixer.replaceText(node, node.specifiers.map(specifier =>`import ${specifier.local.name} from 'good-import-declaration';`,).join('\n'))
            });
          }
        },
      };
    },
  },
};

여기서 마지막 단계는 규칙을 replaceText 파일에 추가하는 것입니다.

// .eslintrc.js

module.exports = {
  rules: {
    'local-rules/replace-bad-import': 'warn',
  },
};

다음 줄을 모두 올바르게 구현한 경우:



다음과 같이 교체되어야 합니다.

요약

잘했어요! 한 텍스트를 다른 텍스트로 대체할 로컬 ESLint 규칙을 방금 만들었습니다. 이것은 ESLint의 힘의 시작일 뿐이지만 로컬 규칙을 구축하는 측면에서 견고한 시작을 제공해야 한다는 점을 명심하십시오.