Mengkonfigurasi Eslint dan Prettier untuk Projek Pasukan

Pasang Eslint dan Prettier bersama-sama dengan Integrasi: Eslint-Config-Prettier dan Eslint-Plugin-Prettier untuk menyelaraskan peraturan pemformatan dan linting. 2. Konfigurasi Eslint untuk memperluaskan Plugin: Prettier/Disyorkan dan sediakan fail .prettierrc dengan pilihan pemformatan bersama seperti Semi, SingleQuote, dan PrintWidth. 3. Tambahkan skrip NPM untuk linting dan pemformatan, dan menguatkuasakannya dalam CI menggunakan - -fix dan -tenggelam bendera untuk mengelakkan kod yang tidak diformat daripada menggabungkan. 4. Secara pilihan, buat pakej konfigurasi bersama untuk peraturan yang konsisten merentasi pelbagai projek dengan memperluaskan konfigurasi berpusat. 5. Pastikan semua ahli pasukan menggunakan integrasi editor seperti Eslint Vs Code dan Sambungan Prettier dengan FormatonSave dan CodeActionsSonVe enabled melalui .vscode/settings.json. 6. Gunakan .prettierignore dan .eslintignore untuk mengecualikan membina artifak dan node_modul dari pemprosesan, meningkatkan prestasi dan mengelakkan kesilapan. Persediaan ini memastikan kualiti kod yang konsisten dan automatik di seluruh pasukan, menghapuskan perdebatan gaya, dan menyelaraskan kerjasama.

Menyediakan Eslint dan Prettier dalam projek pasukan bukan hanya mengenai gaya kod -ini mengenai konsistensi, kurang gabungan konflik, dan ulasan kod yang lebih lancar. Apabila semua orang dalam pasukan menulis kod yang kelihatan sama, lebih mudah dibaca, diselenggarakan, dan bekerjasama. Inilah cara untuk mengkonfigurasi Eslint dan Prettier bersama -sama dengan cara yang berfungsi dengan pasti di seluruh pasukan anda.

✅ 1. Pasang dan konfigurasikan Eslint Prettier

Mulakan dengan memasang pakej yang diperlukan sebagai kebergantungan dev:

 Pemasangan NPM--Save-Dev Eslint Prettier Eslint-Config-Prettier Eslint-Plugin-Prettier

• eslint : The Linter.
• prettier : Formatter kod.
• eslint-config-prettier : Melumpuhkan peraturan Eslint yang bertentangan dengan Prettier.
• eslint-plugin-prettier : Menjalankan Prettier sebagai Peraturan Eslint supaya anda dapat menangkap kod yang tidak diformat.

Kemudian buat atau kemas kini config eslint anda ( .eslintrc.js , .eslintrc.json , atau .eslintrc.cjs ):

 modul.exports = {
  env: {
    Penyemak imbas: Benar,
    ES2021: Benar,
    Nod: Benar,
  },
  meluas: [
    'Eslint: disyorkan',
    'Plugin: Prettier/Disyorkan', // membolehkan lebih cantik dan mematikan peraturan yang bercanggah
  ],
  ParserOptions: {
    Ecmaversi: 'terbaru',
    Sourcetype: 'Modul',
  },
  Peraturan: {
    // Tambahkan peraturan eslint tersuai di sini
    'Tidak konsol': 'Warn',
  },
};

Persediaan ini menggunakan plugin:prettier/recommended , yang secara automatik membolehkan Prettier melalui Eslint dan memohon eslint-config-prettier .

✅ 2. Tambahkan fail konfigurasi yang lebih cantik

Buat fail .prettierrc untuk menentukan peraturan pemformatan:

 {
  "Semi": Benar,
  "TrailingComma": "Es5",
  "Singlequote": Benar,
  "Printwidth": 80,
  "Tabwidth": 2
}

Anda juga boleh menggunakan .prettierrc.json , .prettierrc.js , atau bahkan prettier.config.js . Ini memastikan semua orang menggunakan tetapan pemformatan yang sama.

? Petua Pro: Elakkan bergantung pada editor lalai. Konfigurasi eksplisit menghalang perbezaan antara persediaan ahli pasukan.

✅ 3. Tambah skrip dan kuatkuasakan dalam CI

Kemas kini package.json anda dengan skrip yang berguna:

 {
  "Skrip": {
    "Lint": "Eslint. --ext .js, .jsx, .ts, .tsx",
    "Lint: Fix": "Eslint. --ext .js, .jsx, .ts, .tsx - -fix",
    "Format": "Prettier --write."
  }
}

Jalankan npm run lint:fix kepada isu-isu linting auto-fix, dan npm run format untuk memformat semua fail.

Kemudian, menguatkuasakan pemformatan dan linting dalam saluran paip CI anda:

 NPM RUN LINT
Format Run NPM - -Serap # gagal jika fail tidak diformat

--check memberitahu Prettier untuk melaporkan kesilapan dan bukannya menulis fail-sempurna untuk CI.

✅ 4. Kongsi konfigurasi merentasi projek (pilihan tetapi membantu)

Jika pasukan anda berfungsi pada pelbagai projek, ekstrak Eslint dan Prettier configs ke dalam pakej yang dikongsi (contohnya, @yourcompany/eslint-config ).

Contoh:

 // @yourcompany/eslint-config/index.js
modul.exports = {
  meluas: [
    'Eslint: disyorkan',
    'Plugin: Prettier/Disyorkan'
  ],
  env: {node: true, penyemak imbas: true},
  ParserOptions: {Ecmaversion: 'Latury'},
  Peraturan: {'no-tidak digunakan-vars': 'ralat'}
};

Kemudian pasang dan lanjutkan dalam mana -mana projek:

 melanjutkan: '@yourcompany/eslint-config'

Ini menyimpan peraturan yang konsisten di repos tanpa pertindihan.

✅ 5. Integrasi Editor (Persediaan Pasukan)

Pastikan setiap ahli pasukan mengkonfigurasi editor mereka untuk menghormati tetapan eslint dan cantik projek.

Untuk kod vs:

1. Pasang lanjutan eslint dan cantik .
2. Tambah .vscode/settings.json (pilihan, tetapi membantu):

 {
  "Editor.DefaultFormatter": "Esbenp.Prettier-Vscode",
  "Editor.FormatonSave": Benar,
  "editor.codeActionsonSonave": {
    "source.fixall.eslint": benar
  },
  "Eslint.Validate": ["JavaScript", "TypeScript", "Vue", "Html"]
}

⚠️ Warn ahli pasukan untuk tidak menggunakan pelanjutan global atau lanjutan yang ketinggalan zaman. Biarkan konfigurasi tempatan projek itu menang.

✅ 6. Gunakan .prettierignore dan .eslintignore

Sama seperti .gitignore , tidak termasuk fail yang tidak boleh diperiksa:

.prettierignore

 node_modules
Dist
membina
*.min.js

.eslintignore

 node_modules
Dist
membina

Ini mengelakkan pemprosesan dan kesilapan yang tidak perlu.

Nota akhir

• Sentiasa lakukan fail konfigurasi anda: .eslintrc.* , .prettierrc , .prettierignore , dll.
• Langkah Persediaan Dokumen dalam CONTRIBUTING.md anda.
• Jalankan npm run lint dan npm run format secara teratur-atau hook mereka ke dalam pra-komite (misalnya, dengan Husky Lint-Staged).

Dengan persediaan ini, pasukan anda mendapat konsisten, kualiti kod automatik dan pemformatan -tiada perdebatan mengenai titik -titik besar atau lekukan dalam PRS.

Pada asasnya, ia adalah kos pendahuluan kecil untuk kewarasan jangka panjang.

Atas ialah kandungan terperinci Mengkonfigurasi Eslint dan Prettier untuk Projek Pasukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!