prettier、eslint、jestのためのprecommitフックの設定

導入
こんにちは開発者.今日、私はあなたのプロジェクトのためのprettier、eslintとjestのためのpre - commitフックを準備する方法を説明するつもりです.
最初に、これらが何であるか、そして、彼らの重要性を説明させてください.
jestはJavaScriptのテストフレームワークで、多くの一般的なJavaScriptフレームワークで使用できます.これは、複数のテストを実行し、スイートをテストし、結果を美しい形式で表示することができます.
ESLILTは、コードの静的コードアナライザとJavaScriptリンターです.
きれいなコードフォーマッタは、コードの書式設定に役立ちます.

なぜ必要なの
あなたのアプリケーションが大きくなるにつれて、それは難しく、高価なアプリケーション全体をテストするために取得します.これはまた、バグがあなたのアプリケーションに忍び込む可能性を増加させます.あなたが作った変更に自信があることはできません.すべてのこれらの問題を解決することができますテストを自動的に実行し、アプリケーションをテストすることができます.Jestはあなたがこれらのテストを書いて、実行するのを援助して、あなたにこれらのテストの結果を示します.
また、製品が成長するにつれて、CodeBaseで働く人々の数も増加します.各開発者のコードを書式設定の独自のスタイルがあります.誰もが自分のスタイルを使用することが許可されている場合、1つの開発者によって書かれたコードは他の人に難解され始めます.これは、再びソフトウェアのバグを増加し、開発プロセスを遅くします.しかし、同時に、開発者は標準に従わざるを得ない.ここはきれいでエスニックが入るところです.ESLILTはJavaScriptエラーに対して静的にコードを検索し、指定した標準に従ってコードベースがリンクされるようにします.また、一般的な基準に従ってコードをフォーマットする.これにより、コードが標準化されメンテナンスされます.

インストール
これらのツールのインストールから始めましょう.いつものように、NPMはインストールプロセスを非常に簡単にします

npm install prettier --save-dev
npm install eslint --save-dev
npm install jest --save-dev

save devフラグは、パッケージがdevdependとして保存されることを保証します.
これらに加えて、eslintをきれいに使うように設定するには、他のパッケージも必要です.

npm install eslint-plugin-prettier --save-dev
npm install eslint-config-prettier --save-dev

構成
このチュートリアルでは、前コミットフックを追加することに基づいていますので、Jestテストの設定については詳しく説明しません.あなたはこれらのテストを設定し、実行する方法に様々な記事を見つけることができます.
設定が完了すると、aを作成します.倉庫のルートディレクトリのprettierrcファイル.次のファイルに追加します

{
  "printWidth": 85,
  "arrowParens": "always",
  "semi": true,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

これはサンプルコードをどのようにフォーマットするかを定義するサンプルファイルです.このファイルは全ての文がセミコロンで終わることを述べます.後のコンマでなければならず、角括弧は関数と同じ行になければなりません.すべてのタブをスペースに変更し、インデント幅を2つのスペースにする必要があります.あなたは、きれいに許容される様々な構成を参照することによって、あなた自身のファイルをつくることができます.
eslintの設定には、.エスライントラック.JSONファイル.このファイルのサンプル設定です

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": ["plugin:prettier/recommended"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "plugins": ["prettier"],
  "rules": {
    "semi": [2, "always"],
    "react/no-unescaped-entities": 0,
    "react/prop-types": 0,
    "react/jsx-key": 0,
    "react/no-find-dom-node": 0,
    "no-unused-vars": 0,
    "no-array-constructor": 0,
    "new-cap": 0,
    "space-before-function-paren": 0,
    "prettier/prettier": "error"
  }
}

このファイルには多くの設定情報が含まれていますが、重要な部分はプラグインを使用しているプラグインであることを示すプラグインの部分です.この設定ファイルに加えて、追加する必要があります.Eslintignoreファイルは、ファイルとフォルダを定義するには、無視されるeslintです.以下は単純なファイルです.

**/build/*
**/dependencies/*

以上で構成工程が終了する.

実行
Jest自動化テストを実行するには、

jest

これはすべてのテストを実行し、テスト結果を端末に表示します.
eslint型を実行するには、次の手順に従います.

eslint . 

エスライン
Eslintはフォルダの名前から再帰的にすべてのフォルダをチェックしてライニングエラーを検索し、画面に表示します.を自動的に修正します.種類

eslint . --fix

これはすべて自動的に固定可能なエラーを修正する必要があります.
ちょっとだけタイプを走らせる.

prettier . --write

これは、カレントディレクトリ内のすべてのファイルに対して再帰的に実行され、矛盾がない場合は、それらを適切に更新します

precommitフックの設定
jest,eslint,prettierを使用して正常に実行し,最後のステップは,開発者がリポジトリへの変更をコミットするたびに,これらのツールを自動的に実行する前コミットフックを設定することです.これは、スクリプトを実行する前に、これらのスクリプトを実行する負担を軽減します.
このプリコミットフックを設定するには、2つ以上のツールを使用します.ハスキーとリントは、これらのツールを使用してインストールをインストールし、はい、あなたは右、それを推測
NPMをインストールしたHusky Lint
パッケージを更新します.次のフィールドを含むJSON

... // other contents of package.json
"devDependencies": {
    ... // all your dev dependencies would be here.
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "jest --findRelatedTests",
      "git add"
    ],
    "*.{html,css,less,ejs,json}": [
      "prettier --write",
      "git add"
    ]
  }
} // close package.json

ハスキーはpre - commitフックをセットアップします.それはすべてのコミットの前にステージをリント呼び出します.コミットされているファイルの種類に応じて、LINT STATEは特定のコマンドを実行します.それがそうであるならば、e ...ジェイ.JSXファイルはprettierを実行します-- writeとeslint --適切な標準にファイルをアップデートするためにファイルの上でFIXを固定して、次に、テストのサブセットをテストして、変更がテストを失敗させないようにしてください.すべてが動作する場合は、ステージング領域にファイルを追加し、コミットします.
このように、すべてのファイルが自動的にコミットされます
フォーマットは、コードの書式設定規則に従うことを保証するために、あなたはそれについて心配する必要はありません.
それです.お済みです.
あなたがプロジェクトを設定する助けが必要な場合は私に手を差し伸べる.喜んで手伝います.