Bagaimana cara mengonfigurasi Prettier dan ESLint untuk memformat impor TypeScript/JavaScript menjadi beberapa baris?

Saya sedang mengerjakan proyek TypeScript dan saya ingin mengonfigurasi Prettier dan ESLint untuk secara otomatis memformat pernyataan import saya ketika lebar baris melebihi aturan printWidth yang telah ditentukan oleh prettier. Secara khusus, saya ingin memecah pernyataan import yang panjang menjadi dua baris, seperti ini:

Format Saat Ini:

import { 
 x,
 y, 
 z, 
 n, 
 h 
} from '@example/package';

Format yang Diinginkan:

import { x, y, z } from '@example/package';
import { n, h } from '@example/package';

Konfigurasi saya saat ini:

Konfigurasi Prettier (prettierrc):

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}

Konfigurasi ESLint (.eslintrc.json):

{
  "extends": ["next/core-web-vitals", "next/typescript", "eslint:recommended"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "import/no-anonymous-default-export": "off"
  }
}

Saya telah mencoba menggunakan import/order dari eslint-plugin-import dan mengonfigurasi prettier-plugin-import-sort, tetapi sepertinya mereka tidak mencapai pemisahan import yang diinginkan.

Apakah ada yang punya saran tentang bagaimana cara mengatur ini dengan benar dalam proyek TypeScript?

Informasi Tambahan:

  • Saya menggunakan Visual Studio Code dan ingin format dilakukan saat menyimpan.
  • Saya telah memastikan bahwa baik Prettier maupun ESLint sudah terpasang dan berfungsi dengan benar, tetapi mereka tidak memformat impor seperti yang diharapkan.

Terima kasih sebelumnya atas bantuan Anda!

Jawaban #1

Gunakan aturan import/order dan import/newline-after-import dari eslint. Contoh:

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript",
    "eslint:recommended"
  ],
  "plugins": ["import"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "import/no-anonymous-default-export": "off",
    "import/order": [
      "error",
      {
        "groups": [["builtin", "external", "internal"]],
        "newlines-between": "always"
      }
    ],
    "import/newline-after-import": ["error", { "count": 1 }],
    "import/max-dependencies": ["warn", { "max": 10, "ignoreTypeImports": true }]
  }
}

Artikel terkait