Meningkatkan Aliran Kerja Pembangunan Anda dengan Husky, Commitlint, Prettier dan Lint-Staged

Menyediakan aliran kerja automatik boleh meningkatkan kualiti dan ketekalan kod dalam projek anda. Dalam panduan ini, kami akan meneruskan penyediaan Husky, Commitlint, Prettier dan Lint-Staged untuk memastikan pangkalan kod anda diformat secara konsisten, mengikut konvensyen mesej commit dan mempunyai kebergantungan terkini selepas setiap gabungan.

Menyediakan Husky

Husky membantu anda mengurus cangkuk Git dengan mudah, membolehkan tugasan automatik seperti semakan kualiti kod dijalankan sebelum setiap komitmen.

Pemasangan

Pasang Husky sebagai kebergantungan dev menggunakan npm (kami akan menggunakan npm dalam artikel ini):

npm install --save-dev husky

Inisialisasi

Untuk mencipta direktori .husky di mana cangkuk Git akan disimpan, jalankan:

npx husky init

Seterusnya, tambahkan skrip berikut dalam package.json anda untuk menyediakan Husky semasa memasang dependensi:

"scripts": {
  "prepare": "husky install"
}

Mengkonfigurasi Commitlint

Commitlint memastikan semua mesej commit mengikut format yang konsisten, mengekalkan sejarah commit yang bersih.

Pemasangan

Pasang Commitlint bersama-sama dengan konfigurasi konvensional:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Persediaan

1. Buat cangkuk commit-msg dalam .husky: Sekarang buat fail baharu dalam direktori .husky bernama commit-msg dan tambah baris ini:

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"\""

1. Tambahkan fail commitlint.config.js pada akar projek anda dengan kandungan berikut:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //   TODO Add Scope Enum Here
    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'chore',
        'style',
        'refactor',
        'ci',
        'test',
        'revert',
        'perf',
        'vercel',
      ],
    ],
  },
};

Menambah Berperingkat Lint dan Lebih Cantik

Lint-Staged membolehkan anda menjalankan skrip pada fail berperingkat dan Prettier menguatkuasakan gaya yang konsisten dalam pangkalan kod anda.

Pemasangan

Pasang kedua-duanya sebagai kebergantungan dev:

npm install --save-dev lint-staged prettier

Konfigurasi yang Lebih Cantik

Buat fail .prettierrc.json dalam akar projek anda dengan konfigurasi pilihan anda. Berikut ialah contoh:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 120,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5", 
  "semi": true, 
  "singleQuote": true,
  "bracketSpacing": true, 
  "arrowParens": "always",
  "jsxSingleQuote": false, 
  "bracketSameLine": false,
  "endOfLine": "lf"
}

Konfigurasi Berperingkat Lint

Tambahkan konfigurasi berikut pada package.json anda di bawah lint-staged:

"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --max-warnings=0",
      "prettier --write"
    ],
    "**/*.{html,json,css,scss,md,mdx}": [
      "prettier -w"
    ]
  }

Tambah cangkuk prakomit untuk menjalankan Lint-Staged:

npx husky add .husky/pre-commit "npx lint-staged"

Menambah Cangkuk Pasca Gabungan untuk Ketergantungan

Cangkuk selepas cantuman memastikan kebergantungan anda dikemas kini selepas setiap cantuman dengan menjalankan pemasangan npm atau mana-mana pengurus pakej.

Buat cangkuk selepas cantuman:

npx husky add .husky/post-merge "npm install"

Kesimpulan

Dengan persediaan ini, projek anda akan mengekalkan format mesej komit piawai, memformat kod secara automatik dan memastikan kebergantungan dikemas kini selepas penggabungan. Aliran kerja yang mantap ini akan menyelaraskan kerjasama dan meningkatkan kualiti kod, membantu anda menumpukan pada membina ciri yang hebat.

Atas ialah kandungan terperinci Meningkatkan Aliran Kerja Pembangunan Anda dengan Husky, Commitlint, Prettier dan Lint-Staged. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!