プリティとeslint自動化であなたの反応コードベースをギアアップ

当初はmy blogに掲載された.
最近、私はすべての新しいプロジェクトのためにやっていた繰り返しタスクがあることに気づいた.そこで、間違いを繰り返さないように書類を提出することにしました.この記事は、プロジェクトにPrettier、ESLint、Huskyを設定することについてです.

この記事はあなたを助けることができます.

あなたのコードをきれいにしておきます.

あなたのコードの標準的な習慣の後の

.

すべてのテストがコミット前にパスすることを保証します.

に準拠してコミットの品質を改善.

conventional commit format
セットアップ手順

あなたが好きなように反応アプリを作成します.私はNPXでそれを好む.

TypeScriptプロジェクト

npx create-react-app my-app --template typescript

JavaScriptプロジェクトの場合:

npx create-react-app my-app

YarnまたはNPMも使えます.詳細は をチェックアウトできます.

プロジェクトを開きます.

依存関係のインストール:

を返します.

yarn add -D eslint eslint-plugin-react prettier eslint-plugin-jest eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser husky @commitlint/{config-conventional,cli}

書き込み時のパッケージのバージョンは以下の通りです.

{
  "devDependencies": {
    "@commitlint/cli": "^13.1.0",
    "@commitlint/config-conventional": "^13.1.0",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.1",
    "prettier": "^2.3.2"
  }
}

JavaScriptで

yarn add -D eslint eslint-plugin-react prettier eslint-plugin-jest eslint-plugin-react-hooks husky @commitlint/{config-conventional,cli}

書き込み時の依存関係のバージョンは以下の通りです.

{
  "devDependencies": {
    "@commitlint/cli": "^13.1.0",
    "@commitlint/config-conventional": "^13.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.1",
    "prettier": "^2.3.2"
  }
}

この設定により、cd my-appを作成します.また、CRA docsをvscodeにインストールします.

{
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "useTabs": false,
  "eslintIntegration": false,
  "tslintIntegration": true,
  "requireConfig": false,
  "stylelintIntegration": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "tsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Note: I prefer this config, you can use Playground and choose what works for you. You can check out the rationale and the options to understand the rules better.

この設定でESLINT CONFIG : .prettierrcを追加しました.また、Prettier pluginをvscodeにインストールします.

以下のようにします.

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-bitwise": 0,
    "react/react-in-jsx-scope": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

JavaScriptの場合:

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-bitwise": 0,
    "react/react-in-jsx-scope": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

私が使用した規則は基本的に推奨される設定をオーバーライドすることです.唯一の追加はESLint pluginです.

Note: Again, these are rules that I prefer, you can add the ones that work for you. You can check ESLint configuration docs to create your rules.

スクリプトを.eslintrc.jsonに加えます

以下のようにします.

{
  "scripts": {  
    "lint": "eslint \"**/*.{ts,tsx,js,jsx}\"",
    "prepare": "husky install",
    "test": "react-scripts test"
  }
}

JavaScriptの場合:

{
  "scripts": {  
    "lint": "eslint \"**/*.{js,jsx}\"",
    "prepare": "husky install",
    "test": "react-scripts test"
  }
}

リントエラーを解決します.次のような警告とエラーが表示されます.

warning  'temp' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

コミットlinconfigを追加します.

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

従来の設定はここで使用されます.また、異なるrules of hooksで設定を定義することもできます.

インストールgitフックpackage.json

Note: Using Husky with Yarn 2 requires different steps.

フックを追加:あなたが必要なフックの任意の数を追加することができます.この場合、リンギングとテストを実行する前コミットフックを追加します.また、コミットライフックを追加しました.

npx husky add .husky/pre-commit 'yarn lint && yarn test --watchAll=false'

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

ハスキーのより具体的なユースケースの場合は、rulesを確認できます.
ET Voila、これはあなたがするために必要なすべてです.
単にコミットすることでフックをテストできます.yarn lint .端末でこれを見るべきです.

⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

Note: If you want to skip these hooks, you can commit directly with -n/--no-verify option like git commit -m "yolo!" --no-verify

新しいプロジェクトから起動する場合は、すでに実行しているすべての手順でこれらのreposをクローン化できます.

recipes/ theankurkedia

react-starter-ts-template / theankurkedia