当前位置：文江博客话题详情

ESLINT在终端运行，但没有接收错误

发布于 2025-01-29 21:34:25 字数 2142 浏览 2 评论 0原文

我正在使用create-react-app并配置ESLINT的教程。

我已经在全球安装了ESLINT，在根文件夹和.vscode/settings.json

当前问题：

配置后，ESLINT输出后正常运行，但没有从我的代码中收集任何错误。
ex：当我徘徊在.textContent上时，它应该有一个建议使用.tohavetextContent：
我尝试重新启动VSCODE，卸载Eslint扩展名并再次安装它，但仍然不起作用 - 输出中没有错误。

屏幕截图＆amp;代码：

文件树：

.eslintrc.json

{
  "plugins": [
    "testing-library",
    "jest-dom"
  ],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react"
  ]
}

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
}

package.json

{
  "name": "color-button",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-testing-library": "^5.5.0"
  }
}

原文

I'm following a tutorial using create-react-app and configuring ESLint.

I already installed ESLint globally, I have a .eslintrc.json file in the root folder and .vscode/settings.json

Current problem:

After configuring, ESLint Output runs normally but didn't pick up any error from my code.
Ex: When I hover over .textContent, it supposed to have a suggestion to use .toHaveTextContent instead:
I tried restarting VSCode, uninstalling ESLint extension and installing it again but still - doesn't work and no error in the Output.

Screenshots & Code:

File tree:

ESLint Output:

.eslintrc.json

{
  "plugins": [
    "testing-library",
    "jest-dom"
  ],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react"
  ]
}

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
}

package.json

{
  "name": "color-button",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-testing-library": "^5.5.0"
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

用心笑 2025-02-05 21:34:25

事实证明，我还没有在我的.eslintrc.json file中添加“插件：jest-dom/puseed”规则。

这就是为什么它没有使用jest-dom的语法

解决此问题的原因：

{
  "plugins": [
    "testing-library",
    "jest-dom"
  ],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

It turns out I haven't added "plugin:jest-dom/recommended" rule in my .eslintrc.json file.

That's why it didn't pick up error with jest-dom's syntax :)

Fixed this:

{
  "plugins": [
    "testing-library",
    "jest-dom"
  ],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}