gitのコミット時にコードの変更部分に対して、自動でフォーマットを行う

// npmの場合
npm install --save-dev --save-exact prettier

// yarnの場合
yarn add --dev --exact prettier

// npmの場合
npm install --save-dev prettier-eslint

// yarnの場合
yarn add prettier-eslint

// .prettierrc
{
   "singleQuote": true
}

// npmの場合
npm install --save-dev eslint

// yarnの場合
yarn add eslint

// npmの場合
npm install --save-dev eslint-config-airbnb eslint-config-prettier eslint-plugin-react eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-babel-module eslint-import-resolver-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint 

// yarnの場合
yarn add --dev eslint-config-airbnb eslint-config-prettier eslint-plugin-react eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-babel-module eslint-import-resolver-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint

"eslint": "^8.17.0",

// config系
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",

// プラグイン系
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-jsx-a11y": "^6.2.3",

// モジュールのインポート解決類のプラグイン
"eslint-plugin-import": "^2.25.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-babel-module": "^5.1.2",
"eslint-import-resolver-typescript": "^2.5.0",

// @typescript-eslint関連のプラグイン
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",

// babel-eslint
"babel-eslint": "^10.0.3",

// .eslintrc.js

module.exports = {
  /** 実行環境設定 */
  env: {
    browser: true,
    es6: true,
    "jest/globals": true,
    node: true,
  },
  /** 継承したいベースのルールを記述 */
  extends: [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  /** 継承したルールの中から上書きしたいルールを記述 */
  overrides: [
　　　　　　　　　// *記述例
    {
      files: ["*.js"],
      rules: {
        /** JSファイルに限り、コメント文字の後はホワイトスペース以外の文字は禁止 */
        "spaced-comment": ["error", "always", { markers: ["/"] }],
      },
    },
    {
      files: ["*.ts", "*.tsx"],
      rules: {
        /** TSファイルに限り、動的な型担保の不使用　*/
        "react/prop-types": "off",
      },
    },
  ],
  /** 使用するパーサーの設定を記述 */
  parser: "@typescript-eslint/parser",
  /** パーサーの設定 */
  parserOptions: { ecmaFeatures: { jsx: true }, sourceType: "module" },
  /** 使用するプラグインの指定 */
  plugins: ["@typescript-eslint", "import", "jest", "react"],
  /** 実行時のカレントディレクトリを起点をするかどうか */
  root: true,
  /** 個々のルール単位で有効/無効にする設定を記述 */
  rules: {
    camelcase: "off",
    "react/jsx-filename-extension": ["error", { extensions: ["tsx"] }],
    "react/require-default-props": "error",
    "react/jsx-uses-react": "error",
    "react/react-in-jsx-scope": "error",
    "import/prefer-default-export": "error",
  },
  settings: {
    /** パス解決 */
    "import/resolver": {
      node: { extensions: [".js", ".json", ".ts", ".tsx"] },
      typescript: { alwaysTryTypes: true },
    },
  },
};

**/*.*
!**/*.js
!**/*.jsx
!**/*.ts
!**/*.tsx
.*rc
.git/*
.github/*
.vscode/*
app/.next/*
app/assets/*
!app/assets/html
!app/assets/icons
app/coverage/*
app/libs/*
app/public/*
node_modules/*
.eslintignore
.eslintrc.js
.eslintrc.pre-commit.js

// .eslintrc.pre-commit.js

const { overrides, rules, ...rest } = require("./.eslintrc");

// 緩和したいルールのみ記述
module.exports = {
  ...rest,
  overrides: [
    ...overrides,
    {
      files: ["*.js"],
      rules: {
　　　　　　　　　　　　　　　　　// *記述例
        /**
         * JSファイルに限り、コメント文字の後はホワイトスペース以外の文字は禁止。
         */
        "spaced-comment": ["warn", "always", { markers: ["/"] }],
      },
    },
  ],
  rules: {
    ...rules,
　　　　　　　　// *記述例
    /** 空インターフェイスの使用禁止。*/
    "@typescript-eslint/no-empty-interface": "warn",
    /** this のエイリアス変数の生成禁止。*/
    "@typescript-eslint/no-this-alias": "warn",
    /** クリック イベントに対応する、キーボード イベントの省略禁止 */
    "jsx-a11y/click-events-have-key-events": "warn",
    /** ラベル要素を持たないコントロール要素の実装禁止。*/
    "jsx-a11y/control-has-associated-label": "warn",
  },
};

// npmの場合
npm install --save-dev husky lint-staged

// yarnの場合
yarn add husky lint-staged

// npmの場合
npx husky install

// yarnの場合
yarn husky install

npm set-script prepare "husky install"

{
  "name": "precommit-with-prettier-eslint",
  "scripts": {
    "prepare": "husky install",
  },
  ...
}

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

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

// lint-staged.config.js
module.exports = {
  '*.{js,jsx,ts,tsx}': [
    'prettier --write',
    'eslint --cache --config .eslintrc.pre-commit.js --fix --quiet',
  ]
};