Husky + Lint-stagedをReact（typescript）に追加します

少なくともReactJとGitの基本的な知識はすでにあると思います。

注：この記事は2021年8月に作成されました。この構文は、バージョンの変更により、後で機能しない可能性があります。

最初の一歩

コマンドcreate-react-appを使用してTypescriptでReactプロジェクトをセットアップしましょう

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

これで、プロジェクトにgitを追加できます。ここでは、このプロジェクトにGitHubを使用しています。

Githubに空のリポジトリを作成すると、次のように表示されます。

次に、以下のコマンドを使用して、gitを追加し、最初のコミットをリポジトリにプッシュできます。

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

3番目のステップ

依存関係を追加する

yarn add -D husky lint-staged prettier

• lint-staged —コミットする前にコマンドを実行するため。
• prettier —コードをフォーマットするため。

.prettierignore無視されたフォルダを追加するために作成します

EslintおよびPrettierコマンドをスクリプトに追加します

• eslint src コードの警告とエラーを確認します。
• prettier --write コードをフォーマットします。
• prettier --check . コード形式を確認します。

最後のステップ

最後に、gitフックを有効にします

npx husky install

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

注：プリコミットファイルを編集することもできます

今それをテストしましょう

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

      

    
      

おめでとうございます。ReactJsプロジェクトにハスキーとリントステージを正常に追加しました。

この記事のリポジトリ https://github.com/cheulong/automate-prettier-eslint-with-husky