Cara Publish ESLint Config Kamu Sebagai NPM Package

Disclaimer

Di tutorial ini, saya akan fokus untuk membuat ESLint rules untuk project berbasiskan Typescript. Teman-teman pembaca tidak perlu meniru 100% tutorial ini, silahkan menyesuaikan dengan kebutuhan masing-masing ya.

Pendahuluan

Baru-baru ini, saya merasa cukup malas kalau harus menulis ulang ESLint rules yang sama dan berulang ketika membuat personal project baru. Lihat potongan kode di bawah ini. Mungkin teman-teman sedikit notice, dan ya ini adalah potongan kode seperti dalam blog saya sebelumnya yang berjudul 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"]
  }
}
json

Saya tahu dari seorang teman lama (teman kuliah), dia membuat dan publish ESLint Config miliknya menjadi library npm package. Bisa diakses di sini. Kok bisa-bisanya dia niat membuat hal ini? Singkatnya, ini agar ketika dia membuat project baru terutama personal project, dia cukup extend ESLint rules yang dia publish saja. Tidak perlu menulis ESLint rules lagi dari nol.

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

Nah, cerita dialah yang menginspirasi saya untuk membuat ESLint config milik saya sendiri.

Persiapan

Pertama, tentu kita harus buat project directory-nya. Nah, eslint-config-test ini bisa kalian ganti dengan preferensi nama sesuka kalian. Tetapi perlu diingat prefix eslint-config harus tetap ada agar bisa dipublish ke NPM registry sebagai ESLint Config Library.

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

bash

Setelah itu, kurang lebih inilah isi dari package.json yang terbentuk.

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

json

Sekarang, install dependencies yang diperlukan untuk membuat ESLint config. Nah di sini, kalian bisa menyesuaikan dengan kebutuhan masing-masing ya. Tidak perlu meniru 100% apa yang saya install.

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

Setup ESLint Rules

Sekarang, kita mulai menuliskan ESLint rules-nya. Buat fileeslintrc.js , lalu modifikasi dengan ESLint rules yang kalian preferensikan. Sebagai referensi atau contoh, inilah milik saya.

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"],
  },
};
jsx

Setelah selesai tahap ini, jangan lupa import eslintrc.jsnya di index.js.

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

Publish Di NPM Registry

Nah secara teknis, kalian sudah bisa publish ESLint rules ala-ala kalian. Tinggal jalankan npm publish atau yarn publish. Lalu ikuti tahapan yang ada di dalam tampilan terminal kalian. Kalian juga bisa membuat akun NPM registry apabila belum memilikinya.

Cara penggunaannya, cukup mudah. Tinggal extend saja ESLint Config Library yang telah kalian publikasi tersebut ke dalam file eslintrc project kalian. Sebagai referensi, inilah ESLint Config Library saya, bisa diakses di eslint-config-yehezgun.

Penutup

Cukup singkat ya blog ini😂, tetapi jangan salah. Efeknya akan berdampak dalam jangka panjang. Kalian hanya perlu mengubah ESLint config yang telah kalian publish sebelumnya ketika dibutuhkan, dan otomatis config-nya akan terimplementasi di semua project yang menggunakannya (dengan catatan, versi dependenciesnya juga diupdate).

Terima kasih sudah menyempatkan membaca. Semoga membantu🙃.

Reference:

eslint-config-sznm
Freecodecamp blog - How To Create Your Own ESLint Config Package