Web Analytics

prettier-plugin-classnames

⭐ 175 stars Indonesian by ony3000

🌐 Bahasa

prettier-plugin-classnames

Plugin Prettier yang membungkus nama kelas yang panjang berdasarkan opsi printWidth.

Sebuah contoh penggunaan plugin ini.

Instalasi[^1]

npm install -D prettier prettier-plugin-classnames

[^1]: Jika versi prettier-plugin-classnames Anda kurang dari 0.4.0, Anda juga perlu menginstal @prettier/sync.

Konfigurasi

Contoh JSON:

{
  "plugins": ["prettier-plugin-classnames"]
}

Contoh JS (modul CommonJS):

module.exports = {
  plugins: ['prettier-plugin-classnames'],
  customAttributes: ['myClassProp'],
  customFunctions: ['clsx'],
};

Contoh JS (modul ES):

export default {
  plugins: ['prettier-plugin-classnames'],
  endingPosition: 'absolute',
};

Opsi

Atribut Kustom

Daftar atribut yang nama kelasnya disertakan.
Atribut class dan className selalu didukung, bahkan jika tidak ada opsi yang ditentukan.

Default | Override CLI  | Override API  --- | --- | --- [] | --custom-attributes | customAttributes: [""]

Fungsi Kustom

Daftar fungsi yang nama kelasnya disertakan.
Fungsi classNames selalu didukung, bahkan jika tidak ada opsi yang ditentukan.

Default | Override CLI  | Override API  --- | --- | --- [] | --custom-functions | customFunctions: [""]

Posisi Akhir

Tersedia pertama kali di v0.5.0.
absolute-with-indent ditambahkan di v0.6.0.
absolute-with-indent dihapus di v0.8.0, tetapi Anda bisa mendapatkan keluaran yang sama dengan absolute.
Nilai default berubah dari relative menjadi absolute di v0.8.0.

Ini adalah kriteria untuk mengakhiri nama kelas pada setiap baris saat mengganti nama kelas asli dengan nama kelas multi-baris.

  --------------------------------------------------| printWidth=50
  export function Callout({ children }) {
    return (
      
{children}
); } ``

  • contoh relative:
` --------------------------------------------------| printWidth=50 export function Callout({ children }) { return (
{children}
); }
`

Default | Override CLI | Override API --- | --- | --- "absolute" | --ending-position | endingPosition: ""

Transformasi Sintaksis

Pertama tersedia di v0.7.7.

Jika terjadi pembungkusan baris pada nama kelas yang ditulis dalam sintaks non-ekspresi, maka akan diubah menjadi sintaks ekspresi. Transformasi ini tidak mendukung pemformatan yang dapat dibalik.

Default | Override CLI | Override API --- | --- | --- false | --syntax-transformation | syntaxTransformation:

Korelasi versi dengan plugin saudara

Mulai dari 0.6.0, ketika ada rilis minor di satu sisi, saya berencana untuk mencerminkan perubahan tersebut di sisi lain juga jika memungkinkan.

Korelasi versi.

Kompatibilitas dengan plugin Prettier lain

Jika lebih dari satu plugin Prettier dapat menangani teks yang ingin Anda format, Prettier hanya akan menggunakan plugin terakhir dari plugin-plugin tersebut.

Dalam kasus ini, Anda dapat mengaturnya seperti berikut dengan menambahkan prettier-plugin-merge untuk menerapkan plugin-plugin tersebut secara berurutan.

Contoh JSON:

json { "plugins": [ "prettier-plugin-tailwindcss", "prettier-plugin-classnames", "prettier-plugin-merge" ] } ``

--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---