Cara Memasang Prettier dalam Codebase dan VSCode Anda

lebih cantik

Prettier ialah pemformat kod pendapat dengan sokongan untuk berbilang bahasa.

Sejak saya mula menggunakan Prettier, saya tidak mahu menggunakan kod tanpanya lagi. Walaupun mempunyai beberapa kebimbangan pada mulanya (contohnya lebar garis paksa), saya jatuh cinta dengan tetapan lalai.

Pasang dan Konfigurasi Lebih Cantik

Memasang Prettier adalah mudah, berikut adalah langkah-langkahnya secara ringkas. Anda juga boleh mengikuti panduan pemasangan rasmi.

Mula-mula anda perlu memasang versi tepat yang lebih cantik secara tempatan. Ini memastikan bahawa semua orang akan menggunakan versi tepat yang sama untuk memformat kod dalam projek.

npm install --save-dev --save-exact prettier

Seterusnya anda perlu mencipta fail konfigurasi Prettier .prettierrc dan .prettierignore (pilihan) dalam akar projek anda.

Anda boleh menjalankan arahan ini untuk mencipta fail konfigurasi lalai dengan objek kosong:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Fail .prettierignore berfungsi dengan cara yang sama seperti fail .gitignore. Malah, Prettier sudah mengikut peraturan yang ditetapkan dalam .gitignore anda, jadi anda mungkin tidak memerlukannya:

? Secara lalai prettier mengabaikan fail dalam direktori sistem kawalan versi (".git", ".sl", ".svn" dan ".hg") dan node_modules (melainkan pilihan --with-node-modules CLI ditentukan). Prettier juga akan mengikut peraturan yang dinyatakan dalam fail ".gitignore" jika ia wujud dalam direktori yang sama dari mana ia dijalankan.

Berikut ialah contoh .prettierignore untuk melangkau semua fail HTML:

# Ignore all HTML files:
**/*.html

Formatkan semua kod sedia ada

Sebelum meneruskan pemformatan keseluruhan pangkalan kod, lakukan perubahan anda. Saya juga mengesyorkan menggabungkan semua permintaan tarik terbuka, kerana banyak fail akan terjejas.

Sekarang jalankan arahan ini dalam folder akar projek anda untuk memformat semua fail:

npx prettier . --write

ℹ️ menggunakan npx di sini memastikan versi Prettier yang dipasang secara setempat dilaksanakan. Ini penting jika anda juga mempunyai pemasangan yang lebih cantik secara global.

Kini semua fail projek anda harus diformat dengan baik. ?✨

Pasang Sambungan VSCode Prettier

Seterusnya anda boleh menyediakan pemalam Prettier untuk IDE anda. Saya menggunakan Kod Visual Studio, tetapi terdapat juga pemalam untuk banyak editor lain.

Untuk VSCode, pasang sambungan ini: esbenp.prettier-vscode

Setelah melakukannya, anda boleh menavigasi ke tetapan VSCode dan mencari "formatter". Di sini anda boleh menetapkan Pemformat Lalai kepada esbenp.prettier-vscode.

Walau bagaimanapun, jika, seperti saya, anda mengerjakan banyak projek yang berbeza dan tidak semuanya mempunyai Prettier, anda mungkin akan meninggalkannya pada tetapan lalai (Tiada).

Sebaliknya anda boleh menetapkan pemformat lalai dalam fail tetapan VSCode setempat (.vscode/settings.json) bagi projek yang anda gunakan lebih cantik.

Untuk memastikan mana-mana tetapan VSCode global khusus bahasa ditindih oleh konfigurasi setempat, anda mungkin perlu menentukan defaultFormatter untuk setiap bahasa secara individu.

Berikut ialah contoh .vscode/settings.json untuk rujukan:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Atas ialah kandungan terperinci Cara Memasang Prettier dalam Codebase dan VSCode Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!