ESLint

eslintの設定例

$npx eslint --init

You can also run this command directly using 'npm init 
@eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript

→.eslintrc.jsが作成される。以下の設定が反映されているか確認

...
  parser: '@typescript-eslint/parser',
  plugins: ['react', '@typescript-eslint'],

使用するreactのバージョン設定

.eslintrc.js

  ...
  rules: {
  },
  settings: {
    react: {
      version: 'latest'
    }
  }

必要なルールを追加していく

  rules: {
    'react/react-in-jsx-scope': 'off',
  },

eslintを適用しないファイル

.eslingignore

.next
next-env.d.ts
node_modules
yarn.lock
package-lock.json
public

prettierの設定

インストール

$npm i --save-dev prettier
$npm i --save-dev eslint-config-prettier
→eslintのフォーマッターを上書きしてprettierにフォーマットを任せるために必要

.prettierrc

{
    "endOfLine": "lf",
    "printWidth": 80,
    "tabWidth": 2,
    "trailingComma": "es5",
    "singleQuote": true,
    "jsxSingleQuote": true,
    "semi": true
  }

.prettierignore

.next
next-env.d.ts
node_modules
yarn.lock
package-lock.json
public

vscodeの設定

Default Formatter
→ Prettier - Code formatter

Format on sage
→ true

huskyの設定

$ npx husky-init

.husky/pre-commit例

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

# bash echo color
RED='\033[1;31m'
GREEN='\033[1;32m'
BLUE='\033[1;36m'
BOLD='\033[1;37m'
NC='\033[0m'

echo "\n 🚧🏗️  ${BOLD}Checking format, lint and types in your project before committing${NC}"

# Check Prettier standards
npm run check-format ||
(
    echo "\n ❌🟨 Prettier Check ${RED}Failed${NC}. 🟨❌\n Run ${BLUE}npm run format${NC}, add changes and try commit again.\n";
    false;
)

# Check ESLint Standards
npm run check-lint ||
(
    echo "\n ❌🟪 ESLint Check ${RED}Failed${NC}. 🟪❌\n Make the required changes listed above, add changes and try to commit again.\n"
    false;
)

# Check tsconfig standards
npm run check-types ||
(
    echo "\n ❌🟦 Type check ${RED}Failed${NC}. 🟦❌\n Make the changes required above.\n"
    false;
)

# If everything passes... Now we can build
echo "🔥🚀 ${BOLD}All passed... Now we can build.${NC} 🚀🔥"

npm run build ||
(
    echo "\n ❌🟩 Next build ${RED}Failed${NC}. 🟩❌\n View the errors above to see why.\n"
    false;
)

# If everything passes... Now we can commit
echo "✅✅ ${GREEN}Build is completed... I am committing this now.${NC} ✅✅\n"

package.json追記

"scripts":{
...
    "check-types": "tsc --pretty --noEmit",
    "check-format": "prettier --check .",
    "check-lint": "eslint . --ext ts --ext tsx --ext js",
    "format": "prettier --write .",
    "test-all": "npm run check-format && npm run check-lint && npm run check-types"
}