React'e (typescript) Husky + Lint aşamalı ekleyin

Zaten en azından temel ReactJs ve Git bilgisine sahip olduğunuzu varsayıyorum .

Not: Bu makale Ağustos 2021'de yazılmıştır. Sürüm değişikliği nedeniyle bu sözdizimi daha sonra çalışmayabilir.

İlk adım

Create-react-app komutunu kullanarak TypeScript ile React projesini ayarlayalım

npx create-react-app automate-prettier-eslint-with-husky --template typescript

Artık projemize git'i ekleyebiliriz. Burada bu proje için GitHub kullanıyorum.

Github'da boş bir depo oluşturun, ardından bu şekilde gösterileceksiniz.

Ardından, aşağıdaki komutu kullanarak git'i ekleyebilir ve ilk taahhüdü depoya gönderebilirsiniz,

git remote add origin https://github.com/cheulong/automate-prettier-eslint-with-husky.git
git branch -M main
git push -u origin main

Üçüncü adım

Bağımlılık ekle

yarn add -D husky lint-staged prettier

• lint-staged - taahhütte bulunmadan önce komutu çalıştırmak için.
• prettier — kodu biçimlendirmek için.

Yok .prettierignoresayılan klasörü eklemek için oluştur

Komut dosyasına Eslint ve Prettier komutunu ekleyin

• eslint src kod uyarısını ve hatasını kontrol etmek için.
• prettier --write kodu biçimlendirmek için
• prettier --check . Kod biçimini kontrol etmek için

Son adım

Son olarak, git kancasını etkinleştiriyoruz

npx husky install

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

Not: Ön taahhüt dosyasını da düzenleyebilirsiniz.

Şimdi test edelim

git add .
git commit -m"add husky lint-staged"

      

    
      

Tebrikler, ReactJs projenize başarıyla husky ve lint-staged'i eklediniz.

Bu makalenin deposu https://github.com/cheulong/automate-prettier-eslint-with-husky