첫 번째 ESLint 플러그인 작성 방법

본고는 간단한 안내서를 제공하여 ESLint 플러그인의 작업 원리, 설정, 작성과 사용 방법을 소개하였다.

ESLint 플러그인

이것은 ESLint의 확장으로 ESLint 핵심에서 이루어지지 않은 규칙을 강제로 실행합니다.예를 들어 가장 유행하는 플러그인 중 하나eslint-plugin-babel는 ESLint 핵심 이외의 실험 특성과 linter를 지원합니다.
일반적으로 플러그인은 별도의 NPM 모듈로 저장되며 이 모듈은 rule 객체를 내보냅니다. 여기서 key 은 하나의 이름이고 value 는 강제 규칙 방법이 있는 다른 객체입니다.

module.exports = {
    rules: {
        "rule-name": {
            create: function (context) {
                // rule implementation ...
            }
        }
    }
};

너는 왜 스스로 쓰는 것에 신경을 쓰니?

많은 플러그인을 발표했는데, 당신이 필요로 하는 플러그인을 찾을 기회가 매우 크다.그러나 어떤 경우, 코드 라이브러리에 특정한 규칙이 필요할 수도 있습니다.
최근 우리 개발팀은 비동기 함수 이름의 역할을 강제적으로 수행하기로 결정했다.이것은 함수가 승낙을 되돌리거나 async 로 성명되면 그 이름에 접두사가 있어야 한다는 것을 의미합니다. function someFunctionAsync() {}.이 예를 강좌의 예로 삼아 플러그인을 만들어서 잘못된 함수 이름을 경고합시다.

플러그인 만들기

이 강좌에서, 우리는 로컬 플러그인 패키지를 만들고, 간단한 노드 패키지에서 사용할 것입니다.프로젝트 구조는 다음과 같습니다.

plugin-tutorial 
│
└───my-eslint-rules
│   │   package.json
│   │   index.js
│   
└───node-app
    │   package.json
    │   index.js

먼저 기본 폴더 만들기mkdir plugin-tutorial && cd plugin-tutorial

플러그인 패키지 설치

유효한 각 플러그인은 다음 기준을 충족해야 합니다.

개별 NPM 패키지

의 이름 형식을 따릅니다.

내보내기eslint-plugin-<plugin-name> 객체

플러그인 패키지 만들기:rule

패키지의 이름:mkdir my-eslint-rules && cd my-eslint-rules && npm init --yes

만들기package.json, 사용자 정의 규칙으로 내보내기"name": "eslint-plugin-my-eslint-rules" 대상, 예를 들어 index.js:

module.exports = {
  rules: {
    "async-func-name": {
      create: function (context) {
        return { /* ...rule methods */ }
      }
    }
  }
};

규칙을 작성하다

규칙을 구성하고 테스트하기 위해 우리는 도구AST explorer를 사용할 것이다.AST는 추상적인 문법 트리나 문법 트리를 대표하며 프로그래밍 언어의 원본 코드를 나타낸다.
parser torules와transformer toasync-func-name를 선택하여 AST Explorer를 설정합니다.
지금까지 리소스 매니저에서 다음 네 개의 창을 볼 수 있습니다.

왼쪽 상단 창은 소스 코드 작성에 사용됩니다

오른쪽 상단 창은 소스 코드의 브라우저입니다.표현식에 마우스를 걸면 코드에서 강조 표시된 부분을 볼 수 있습니다

.

왼쪽 아래 모서리는 규칙

오른쪽 하단은 규칙 후의 출력으로 코드

와 상반된다

규칙은 eslint-babel 대상을 받아들이는 함수로 이 대상은 규칙 상하문과 관련된 추가 기능과 정보를 가지고 있다.
주요 방법은 경고나 오류를 발표하는 것이다ESLint v4.이것은 매개 변수object를 받아들여서 다음과 같은 속성을 가질 수 있습니다.message,message,loc,data,fix.우리는 보고서 대상의 간단한 예시를 사용할 것이다.

context.report({
    node: node,
    message: "Async function name must end in 'Async'"
});

이 규칙은 소스 코드 구문 트리를 범람할 때 ESLint가 호출하는 액세스 노드를 포함하는 객체를 반환해야 합니다.우리의 예시에서 우리는 매개 변수 context 의 대상을 받아들이는 방법 context.report() 이 있다.객체는 유형, 이름, 바디, 각 값의 위치와 같은 함수 정보를 포함합니다.
함수 이름에 FunctionDeclaration 접두사가 있는지 확인하기 위해서, 이 이름은 node 노드의 Async 대상에 있습니다. id.
따라서 규칙의 주요 논리는 함수에 FunctionDelacarion 속성이 있는지 확인하는 것이고, 명칭에 node.id.name 접두사가 포함되지 않으면 호출async규칙을 적용하면 AST 리소스 매니저의 출력에 경고가 표시되고 다음 메시지가 표시됩니다.

브라우저에서 규칙을 작성하고 규칙 조건을 캡처한 후 논리를 플러그인 패키지의 Async로 다시 이동하면 플러그인이 완성됩니다.

module.exports = {
  rules: {
    "async-func-name": {
      create: function (context) {
        return {
          FunctionDeclaration(node) {
            if (node.async && !/Async$/.test(node.id.name)) {
              context.report({
                node,
                message: "Async function name must end in 'Async'"
              });
            }
          }
        }
      }
    }
  }
};

노드 항목에 플러그인 적용

먼저 노드 항목을 설정합니다.context.report().을(를) index.js에서 실행하고 AST explorer에 사용된 동일한 함수를 plugin-tutorial에 추가합니다.

async function myFunction() {
    return "";
}

ESLint 설치mkdir node-app && cd node-app && npm init --yes && touch index.js

만든 플러그인 설치: index.js

프로파일 생성npm i eslint --save-dev을 통해 애플리케이션에 ESLint 및 플러그인 사용을 알려 줍니다.

{
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "my-eslint-rules/async-func-name": "warn"
  },
  "plugins": ["my-eslint-rules"]
}

다음 명령을 사용하여 터미널 및 노드 응용 프로그램 폴더에서 ESLint 명령을 실행합니다. npm i ../my-eslint-rules --save-dev

얼마 안 남았어요. 그렇습니다.비동기 함수에 잘못된 이름을 설정한 경우 터미널에서 ESLint를 실행하면 ESLint 경고가 표시됩니다.
프로젝트에서 플러그인을 사용하는 중요한 부분은 .eslintrc 프로필입니다.플러그인의 규칙은 이름 ./node_modules/.bin/eslint index.js 을 따라야 합니다.플러그인 이름은 배열의 .eslintrc 필드에 추가되어야 합니다.

플러그인을 작성하는 다른 방법

플러그인을 쉽게 작성할 수 있는 방법은 Yeoman 생성기를 사용하는 것입니다."<plugin-name>/<rule-name>": [warn/error] 및 plugins 패키지를 설치하고 터미널에서 yo 명령을 실행해야 합니다.테스트 설정을 포함한 더 구조화된 항목을 가진 플러그인 템플릿을 생성합니다.

네가 발버둥칠 수 있는 곳

이 강좌의 플러그인 예시는 유니버설 js를 사용하여 완성된 것입니다. 이것은 모듈이나 새로운 js 문법을 가져오지 않았다는 것을 의미합니다.
사용자 정의 플러그인에서 가져오기와 같은 es6 언어 기능을 사용하려면 다른 플러그인generator-eslint을 설치하고 다음 설정을 추가해야 합니다.

yo

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  }
}

@babel-core, @babel/node, @babel/preset-env, babel-eslint, babel-register

{
  "presets": ["@babel/preset-env"]
}

총결산

우리는 매일 ESLint를 사용하지만, 대부분의 사람들은 ESLint가 백그라운드에서 어떻게 작동하는지 모른다.사용자 정의 플러그인을 작성하고 추상적인 문법 트리를 사용하는 ESLint의 작업 원리를 더 잘 이해할 수 있기를 바랍니다.