ESLint 규칙을 NPM 패키지로 게시하는 방법

부인 성명

In this tutorial, I’ll focus on the specific use case for typescript code-based. You don’t have to imitate this tutorial 100%. You can adjust the specific parts based on your needs

소개

최근에 개인 프로젝트에 대해 정확히 동일한 ESLint 규칙을 다시 작성해야 하는 경우 너무 게을렀습니다. 이거 봐요. 제 이전 블로그Standardize Your Next.js Project에서 이 사실을 눈치채셨을 것입니다.

{
  "env": {
    "node": true
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "unused-imports", "@typescript-eslint"],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "@next/next/no-img-element": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ],

    "no-eq-null": "warn",
    "import/order": [
      "warn",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          "parent",
          ["sibling", "index"],
          "object"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "complexity": "warn",
    "no-console": ["error"]
  }
}

그런 다음 npm 패키지로 자신의 ESLint 규칙을 만들었다고 말한 오랜 친구를 알게 되었습니다. 그의 here을 볼 수 있습니다. 예전처럼 왜 이런 걸 만들려고 노력했느냐고 물었다. 새 프로젝트(특히 개인 프로젝트)를 만들 때 ESLint 규칙을 확장하기만 하면 되기 때문입니다. 전체 ESLint 규칙을 처음부터 다시 작성할 필요가 없습니다.

module.exports = {
  extends: ['sznm'],
};

그래서 그의 진술은 저에게 저만의 ESLint 구성 라이브러리를 만들도록 영감을 주었습니다.

준비

먼저 빈 디렉토리를 만든 다음 npm init 또는 yarn init 를 실행하는 것을 잊지 마십시오. 원하는 폴더 이름으로 변경할 수 있습니다eslint-config-test. eslint-config 접두어가 있어야 NPM 레지스트리에서 ESLint 구성 라이브러리로 게시될 수 있습니다.

mkdir eslint-config-test
cd eslint-config-test
yarn init

이와 같은 package.json 파일이 있습니다.

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

이제 ESLint 구성을 만드는 데 사용할 종속성을 설치합니다. 이것을 100% 모방할 필요는 없습니다. 다른 선호하는 도구가 있을 수 있습니다. 괜찮습니다.

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-sonarjs eslint-plugin-unused-imports

ESLint 규칙 설정

이제 선호하는 ESLint 규칙을 작성할 수 있습니다. eslintrc.js 파일 생성부터 시작한 다음 수정합니다. 여기 내 것이 있습니다. 참조로 사용할 수 있습니다.

module.exports = {
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:sonarjs/recommended",
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "import", "unused-imports"],
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        moduleDirectory: ["node_modules", "src/"],
      },
    },
  },
  rules: {
    "no-unused-vars": "off",
    "no-var": "warn",
    "@typescript-eslint/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        vars: "all",
        varsIgnorePattern: "^_",
        args: "after-used",
        argsIgnorePattern: "^_",
      },
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "import/order": [
      "warn",
      {
        groups: [
          ["builtin", "external"],
          "internal",
          "parent",
          ["sibling", "index"],
          "object",
        ],
        "newlines-between": "always",
        alphabetize: {
          order: "asc",
          caseInsensitive: true,
        },
      },
    ],
    complexity: "warn",
    "no-console": ["error"],
  },
};

이 단계를 완료하면 이제 index.js 파일에서 가져올 수 있습니다.

const eslintrc = require("./.eslintrc.js");
module.exports = eslintrc;

NPM 레지스트리에 게시

예, 기술적으로 이제 규칙을 게시할 수 있습니다. npm publish 또는 yarn publish 를 실행할 수 있습니다. 그런 다음 터미널의 단계를 따릅니다. 이전에 계정이 없는 경우 NPM 레지스트리 계정을 만들 수도 있습니다.

이제 그것을 사용하는 방법? 사용하고 싶을 때 프로젝트 폴더의 eslintrc 파일에서 쉽게 확장할 수 있습니다. 여기 내 것이 있습니다. eslint-config-yehezgun에서 액세스할 수 있습니다.

폐쇄

이 튜토리얼은 짧아 보이지만 장기적인 영향을 미칠 것입니다. 이제 일부 변경을 원하는 경우 게시된 ESLint 구성을 조정하기만 하면 됩니다. 그러면 ESLint 규칙을 사용하는 모든 프로젝트에 구현됩니다(종속성도 업데이트해야 함).

읽어 주셔서 감사합니다. 도움이 되었기를 바랍니다.

참조:

eslint-config-sznm

Freecodecamp 블로그 - How To Create Your Own ESLint Config Package