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

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

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

# eslint 

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

```json
...
"lint":"next lint"
...
```

```bash
yarn lint
```

```bash

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

```

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

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

## eslint最終設定

```json

{
    "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

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

```bash
 yarn add -D prettier eslint-config-prettier
```

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

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


```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も出力してくれるのでおすすめ。

https://prettier.io/playground/

以下のコマンドで実行

```bash
npx prettier . --write
```

# 実行前と実行後

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

### 実行前

```tsx
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() {
```

### 実行後

```tsx
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';

```
### 比較
```diff_tsx
- 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](https://qiita.com/sakelog)さんの記事を参考にさせていただきました。ありがとうございました。

https://qiita.com/sakelog/items/0ca90ead7a6df0cfebf0

パッケージのサイト

https://prettier.io/

https://eslint.org/