【prettier】NextJSにprettierとeslintを導入して可読性を爆上げする

どうも、学生でWeb3アプリケーションを開発しているあまみやです。

今回はWeb3とは違うのですが、NextJSにprettier、eslintを導入してみました。昔は可読性は意識していなかったんだけど、私が通っている専門で耳にタコ🐙ができるほど言われ重要性を痛感し入れるにいたりました。

eslint

Nextjsではコマンドを入力すればyarn add しなくてもパッケージの導入とファイル作成をやってくれます。らくちん。

...
"lint":"next lint"
...

yarn lint

yarn run v1.22.19
$ next lint
? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint 
(ここはStrictを選択)

Installing devDependencies (yarn):
- eslint
- eslint-config-next

そしてインストール完了後に生成されたファイルがこちら

{
    "extends": "next/core-web-vitals",
}

eslint最終設定

{
    "extends": "next/core-web-vitals",
    "rules": {
        "react/react-in-jsx-scope": "off",
        "react/prop-types": "off",
        "react/function-component-definition": {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
        }
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecma": "latest",
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

もともとの設定をもとにtypescriptのパーサーなんかを追加してます(要別パッケージ)。

Prettier

まず以下の通りパッケージをインストール。綴りがややこしいのでコピペ推奨。

 yarn add -D prettier eslint-config-prettier

インストール完了後、.prettierrc.jsonというファイルをプロジェクトのルートに作成。

オプションがいろいろあるのですが、私はこんな感じ。

{
    "arrowParens": "always",
    "bracketSameLine": true,
    "bracketSpacing": true,
    "semi": true,
    "experimentalTernaries": false,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "all",
    "singleAttributePerLine": true,
    "htmlWhitespaceSensitivity": "css",
    "vueIndentScriptAndStyle": false,
    "proseWrap": "preserve",
    "insertPragma": false,
    "printWidth": 80,
    "requirePragma": false,
    "useTabs": false,
    "embeddedLanguageFormatting": "auto",
    "tabWidth": 4
}

Tabwidthはインデントがそろって見た目がだいぶ良くなるので設定した方がいいかなと。

以下のサイトで設定を試すこともできます。jsonも出力してくれるのでおすすめ。

以下のコマンドで実行

npx prettier . --write

実行前と実行後

フォーマット実行したコードの比較になります。行数が少ないのでわかりにくいかもしれませんが、ダブルクォーテーションがシングルクォーテーションに統一され、セミコロンがすべてのimport文に追加されています。

実行前

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { Button, Box, Text, Center } from '@chakra-ui/react'
import Layout from "../layout/main";
import { ReactNode } from "react";
import HMeta from "../components/headmeta";
export default function Home() {

実行後

import { useAccount, useConnect, useDisconnect } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';

import { Button, Box, Text, Center } from '@chakra-ui/react';
import Layout from '../layout/main';
import { ReactNode } from 'react';
import HMeta from '../components/headmeta';

比較

- import { useAccount, useConnect, useDisconnect } from 'wagmi'
+ import { useAccount, useConnect, useDisconnect } from 'wagmi';
- import { InjectedConnector } from 'wagmi/connectors/injected'
+ import { InjectedConnector } from 'wagmi/connectors/injected';

import { Button, Box, Text, Center } from '@chakra-ui/react';
import Layout from '../layout/main';
import { ReactNode } from 'react';
import HMeta from '../components/headmeta';

あとがき

コード整形ツールをいれたのは初めてですが、だいぶ読みやすくなりました。今後もいろいろ試していきます。👍👍👍

参考サイト・qiita記事

sakelogさんの記事を参考にさせていただきました。ありがとうございました。

パッケージのサイト