Zenn
📖

Next.js セッティング　〜ES-Lint , prettier , husky〜　備忘録

2023/03/22に公開
Next.js
tech

create-next-appの後にやるセッティングの備忘録

ESlint

ESlintはデフォルトでインストールされているが、最新版にアップデートする必要がある。

$ yarn upgrade-interactive --latest
$ yarn upgrade typescript@latest

でtypescript等のパッケージを最新化。

eslint --init で設定ファイルを作成。

$ yarn eslint --init
? How would you like to use ESLint?
》To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
》JavaScript modules (import/export)
? Which framework does your project use?
》React
? Does your project use TypeScript?
》Yes
? Where does your code run?
》Browser
? How would you like to define a style for your project?
》Use a popular style guide
? Which style guide do you want to follow?
》Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in?
》JavaScript

The config that you've selected requires the following dependencies:

eslint-plugin-react@^x.x.x @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest
eslint@^5.x.x || ^6.x.x || ^7.x.x eslint-plugin-import@^x.x.x eslint-plugin-jsx-a11y@^x.x.x
eslint-plugin-react-hooks@^4 || ^3 || ^2.x.x || ^1.x.x @typescript-eslint/parser@latest
? Would you like to install them now with npm?
》Yes

完成する設定ファイルに以下を追記。
Reactのバージョンを指定することで、Eslintがそのルールに合わせてくれる。

module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: ['plugin:react/recommended', 'standard-with-typescript'],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
      'react/react-in-jsx-scope': 'off',
    },
+   settings: {
+     react: {
+       version: '18.2.0',
+     },
    },
  };

各プロパティの意味

  • env・・・プログラムの実行環境を ESLint に教える。個別の環境ごとにglobalsの値がプリセットされている

  • extends・・・共有設定を適用する。共有設定は ESLint に標準で含まれているものか別途インストールしたもの、またはインストール済みプラグインのパッケージに含まれているものを指定する。なおここに記述した有設定間でルール設定が重複している場合、リストの後ろに記述されたほうが優先される

  • parser・・・ESLint が使用するパーサを指定する(パーサー＝ルール)

  • parserOptions・・・パーサの各種実行オプションを設定する

  • plugins・・・任意の(インストール済みの)プラグインを組み込む

  • rules・・・適用する個々のルールと、エラーレベルや例外などその設定値を記述する

  • ignoreファイルを作成

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

厳密にするなら奥が深いが、今回はこの程度に止める。

Prettier

$ yarn add -D prettier eslint-config-prettier

以下を追記

.eslintrc.js
extends: [
　　　"plugin:react/recommended", 
  "standard-with-typescript"],
+ 'prettier',

$ touch .prettierrc

{
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "auto"
}

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

husky

yarn add --dev husky
npx husky install

yarn add --dev lint-staged
yarn husky add .husky/pre-commit "yarn lint-staged"
.pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged
.pre-push
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn check-types

以下に修正

package.json
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint src/**/*.{ts,tsx}",
    "lint:fix": "eslint src/**/*.{ts,tsx} --fix",
    "prepare": "husky install",
    "check-types": "tsc --noEmit",
    "format": "prettier --write ."
  },
  
"lint-staged": {
    "*.{ts,tsx}": [
      "yarn lint",
      "yarn format",
      "yarn lint:fix"
    ]
  },

Discussion