Formatkan Kod Anda Menggunakan Prettier Like a Pro

Jangan jadi seperti lelaki ini—jangan jadi orang bodoh.

Mengapa Kod Berformat Diperlukan

Pemformatan membantu menyusun baris kod yang anda tulis menjadikannya lebih mudah dibaca dan difahami. Ini penting apabila bekerja pada pangkalan kod dengan berbilang pembangun, semuanya dengan gaya dan keutamaan mereka sendiri tentang cara kod mereka distrukturkan. Mempunyai pangkalan kod berformat seragam membantu mengelakkan sakit kepala apabila bergabung dan mencipta standard yang anda dan pasukan anda boleh bina.

Terdapat beberapa cara untuk menyediakan templat pemformatan untuk diri sendiri dan pasukan anda. Dalam artikel ini, kami akan meneroka salah satu pilihan yang lebih popular: Lebih cantik.

Menurut tinjauan Negeri JS 2021, 83% responden kerap menggunakan Prettier sebagai format pilihan mereka, peningkatan 13% daripada tinjauan tahun sebelumnya. Banyak pasukan terkemuka—seperti di Facebook, Webflow, Jest, Dropbox, Spotify dan PayPal—menggunakan Prettier untuk memastikan pemformatan yang konsisten dalam pangkalan kod mereka.

Lebih cantik boleh dikonfigurasikan dan dijalankan dalam pelbagai cara. Dalam contoh ini, saya akan menunjukkan cara menyediakan Prettier dengan cangkuk Git untuk automasi dalam Kod VS. Untuk lebih banyak contoh dan konfigurasi, lawati dokumentasi Prettier.

---

Sebelum Anda Mula

Walaupun tidak diperlukan, adalah berguna untuk memahami pilihan yang akan anda konfigurasikan dan perkara yang mereka lakukan. Anda perlu membuat dua fail dan meletakkannya di peringkat akar projek anda. Perlu diingat bahawa pilihan pemformatan ini adalah khusus projek, jadi anda perlu mengulangi proses ini untuk setiap projek baharu. Fail ini akan mengandungi pilihan yang boleh anda pilih dan anda boleh mengubah suai atau mengalih keluar pilihan yang tidak sesuai dengan keperluan projek anda.

---

.prettierrc

Fail ini, terletak di peringkat akar projek anda, mentakrifkan peraturan pemformatan asas untuk Prettier. Ia menggunakan struktur JSON dan boleh disesuaikan dengan piawaian pasukan anda. Berikut ialah contoh:

---

.editorconfig

Fail ini memastikan ketekalan dalam tetapan editor anda walaupun sebelum Prettier dijalankan. Ia juga meliputi pilihan yang .prettierrc tidak. Berikut ialah contoh:

---

Menyediakan Aliran Kerja

Untuk kemudahan penggunaan, kedua-dua fail boleh disalin pada penghujung artikel. Setelah anda membuat dan mengkonfigurasi fail .prettierrc dan .editorconfig, anda boleh meneruskan. Pasang tiga pakej npm ini untuk menyelaraskan proses pemformatan:

pasang npm --save-dev husky berperingkat lint yang lebih cantik

Kemudian mulakan Husky

npx husky init

Langkah ini mencapai perkara berikut:

• Pasang Prettier untuk pemformatan.
• Pasang berperingkat lint untuk memformat fail berperingkat sahaja sebelum melakukan.
• Pasang Husky untuk menyediakan cangkuk Git untuk automasi.
• Inisialisasikan Husky, yang mencipta kebergantungan yang diperlukan dan fail prakomit.

---

Mengkonfigurasi Fail Baharu

Dua fail tambahan memerlukan konfigurasi: prakomit dan .lintstagedrc

pra-komit

Fail ini, dicipta secara automatik oleh Husky, membimbing proses automasi. Ia terletak di dalam folder Husky yang dibuat semasa permulaan. Konfigurasikannya seperti yang ditunjukkan di bawah:

.lintstagedrc

Buat fail ini (tanpa sambungan yang serupa dengan .editorconfig dan .prettierrc) dalam folder projek root. Ia mengecilkan skop fail Format yang lebih cantik melalui cangkuk Git. Di bawah ialah contoh, tetapi anda boleh melaraskannya berdasarkan jenis fail projek anda:

---

Menguji Aliran Kerja

Setelah keempat-empat fail tersedia—.prettierrc, .editorconfig, .lintstagedrc dan pra-komit—anda boleh menguji aliran kerja.

1. Buat perubahan pemformatan ringkas kepada fail .js (tambah ruang atau inden yang tidak perlu, contohnya).
2. Peringkat perubahan anda: git add -A
3. Komit dengan mesej ujian git commit -m "Menguji aliran kerja pemformatan"

Jika semuanya telah disediakan dengan betul, terminal anda akan memaparkan mesej kejayaan dan perubahan pemformatan akan digunakan secara automatik.

---

Itu sahaja!

Anda kini mempunyai cara yang mudah tetapi berkesan untuk memanfaatkan cangkuk Prettier dan git untuk mengautomasikan pemformatan kod anda.

Saya suka mendengar pendapat anda! Beritahu saya dalam ulasan jika ini membantu atau jika anda menghadapi sebarang masalah—saya sedia membantu!

---

Contoh Fail Salin Tampal

.prettierrc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

Atas ialah kandungan terperinci Formatkan Kod Anda Menggunakan Prettier Like a Pro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!