ESLint 不会警告我未使用的变量或未导入的组件（NextJs TypeScript）答案

【问题标题】：ESLint doesn't warn me on unused vars or components not imported (NextJs TypeScript)ESLint 不会警告我未使用的变量或未导入的组件（NextJs TypeScript）
【发布时间】：2021-04-26 23:09:36
【问题描述】：

ESLint 不会警告我未使用的变量，它也会发生在未导入的组件上。我尝试了那里的每个帖子，但我没有任何解决方案：/

免责声明：例如，我知道我没有导入导航栏....为什么 ESLint 不警告我？谢谢！

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2020": true,
        "node": true,
        "jest": true
    },
    "extends": [
        "standard",
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "prettier/@typescript-eslint",
        "plugin:react-hooks/recommended",
        "prettier/standard",
        "prettier/react"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
    "rules": {
        "no-unused-vars": "error",
        "prettier/prettier": "error",
        "space-before-function-paren": "off",
        "react/prop-types": "off",
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "@typescript-eslint/no-empty-function": "off",
        "react/react-in-jsx-scope": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-unused-vars": ["off"]
    }
}

也是我的 index.tsx

import React from 'react'
import Head from 'next/head'

const data = [
    { id: 1, name: 'artfol', url: 'http://google.com', alt: 'artfol' },
    { id: 2, name: 'FAQ', url: 'http://google.com', alt: 'FAQ' }
]

const Home: React.FC = () => {
    return (
        <div>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                <Navbar />
            </main>
        </div>
    )
}

export default Home

【问题讨论】：

ESLint 会警告你吗？它可能根本不起作用。打字稿也应该在使用未知组件时引发错误。它会这样做吗？
@apokryfos 我试图犯一些错误，但它没有警告我任何东西，我的 ESLint 输出给了我这个 [Info - 9:53:59 AM] ESLint 服务器正在启动 [Info - 9:54: 00 AM] 在节点 v12.18.3 中运行的 ESLint 服务器 [信息 - 上午 9:54:00] ESLint 服务器正在运行。 [信息 - 上午 9:54:01] ESLint 库从以下位置加载：/Users/axelvaldez/Documents/Repositorios/artfol/node_modules/eslint/lib/api.js

标签： typescript eslint

【解决方案1】：

好吧，我发现了错误。 Prettier 将每个扩展合并为“prettier”，所以我的代码如下所示

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": { "version": "detect" }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "space-before-function-paren": "off",
    "react/prop-types": "off"
  }
}

由于 React 未使用的 var，eslint 也给了我一个错误，所以我对此发表评论

// eslint-disable-next-line no-use-before-define
import React from 'react'

【讨论】：