你好，我是一名学生，正在开发Web3应用程序的安室谷。

这次和Web3不同，我尝试在NextJS中引入prettier和eslint。过去，我并没有意识到可读性的重要性，但在我所学的专业中听得太多，以致耳朵都要长茧了，让我深刻感受到了它的重要性。

eslint – 语法检查工具

在Next.js中，只需输入命令即可完成包的安装和文件创建，无需运行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 解析器（需要单独的包）。

更漂亮

首先按照以下的方式安装软件包。由于拼写有些复杂，建议直接复制粘贴。

 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的文章提供的参考。

包裹的网站 de