如何配置 ESLint 和 Prettier 以在 TypeScript 和 Next.js 项目中正确报告错误

Question

我正在使用 TypeScript 和 Next.js。我想强制执行代码格式错误，因此我将以下规则添加到

eslintrc.json

：

"rules": {
  "prettier/prettier": "error"
}

运行

npm run build

后，我在所有文件中都遇到了以下错误：

1:1  Error: Definition for rule 'prettier/prettier' was not found.

这些错误不会出现在代码中，而只会出现在终端中。

为了解决这个问题，我向

eslintrc.json

添加了以下插件：

"plugins": ["@typescript-eslint", "prettier"]

再次运行

npm run build

后，出现了许多格式错误，包括一些不应该显示的错误（例如，将

"react"

更改为

'react'

）。在我的项目中，

'react'

是正确的。

如何确保只显示正确的错误？如果有人知道，请帮忙。谢谢。

更漂亮的配置

{
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true
}

eslintrc.json 配置

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  },
  "plugins": ["@typescript-eslint", "prettier"]
}

package.json配置

{
  "name": "****",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write --ignore-path .gitignore --ignore-path .prettierignore './**/*.{js,jsx,ts,tsx,json,css}' && next lint --fix"
  },
  "dependencies": {
    "@chakra-ui/next-js": "^2.1.4",
    "@chakra-ui/react": "^2.7.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.1.1",
    "@types/node": "20.3.1",
    "@types/papaparse": "^5.3.7",
    "@types/plotly.js": "^2.12.25",
    "@types/react": "18.2.12",
    "@types/react-dom": "18.2.5",
    "@types/react-plotly.js": "^2.6.0",
    "axios": "^1.4.0",
    "encoding": "^0.1.13",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.5",
    "firebase": "^10.0.0",
    "firebase-admin": "^11.11.1",
    "framer-motion": "^10.12.16",
    "next": "^13.4.7",
    "papaparse": "^5.4.1",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.2",
    "react-icons": "^4.9.0",
    "react-markdown": "^9.0.1",
    "remark-gfm": "^4.0.0",
    "swr": "^2.2.0",
    "typescript": "5.1.3",
    "xlsx": "^0.18.5",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "@typescript-eslint/parser": "^6.5.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "openapi-typescript-codegen": "^0.25.0",
    "prettier": "^3.0.3"
  },
  "volta": {
    "node": "18.17.0"
  }
}

请教我......

Answer 1

通过将 prettier 的规则设置为“error”，您可以告诉 ESLint 将任何代码格式问题视为错误。

更新 eslintrc.json 文件：您还可以通过添加 prettier 部分直接在 eslintrc.json 文件中指定 Prettier 选项：

例如：

{
  "rules": {
    "prettier/prettier": "error"
  },
  "prettier": {
    "singleQuote": true
  }
}

这将在运行 ESLint 时传递确保单引号选项

通过自定义 Prettier 的配置，可以确保只显示正确的错误。

如果可以的话，还尝试将每个包更新到最新版本。就是这样。