标签: eslint-config-airbnb

我已经安装了eslint-config-airbnb,它应该为React预先配置ESLINT:

我们的默认导出包含所有ESLint规则,包括ECMAScript 6+和React.它需要eslint,eslint-plugin-import,eslint-plugin-react和eslint-plugin-jsx-a11y.

我.eslintrc扩展了它的配置:

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", …

我在 VS Code 中使用 ESLint 时在所有 TypeScript 文件上收到以下两个错误：

Definition for rule 'import/extensions' was not found.eslint(import/extensions)
Definition for rule 'import/no-extraneous-dependencies' was not found.eslint(import/no-extraneous-dependencies)

VSC 问题窗格的屏幕截图：

关于可能重复的注释

关于不同的模块有很多类似的问题，甚至还有一些关于 的问题import/extensions，但建议的解决方案都没有帮助。我都试过了。在输入这个问题时，我还尝试了 Stack Overflow 建议的每个线程中发布的每个解决方案。

这是我的.eslintrc.json：

{
  "env": {
      "es2021": true,
      "node": true
  },
  "extends": [
      "airbnb-typescript/base",
      "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "@typescript-eslint"
  ],
  "rules": {
      "@typescript-eslint/no-use-before-define": "off"
  }
}

package.json：

{
  "name": "graph-userdata-gateway",
  "version": "1.0.0",
  "description": "Gateway for PowerApps …

我尝试在 WebStrom 中使用 ESLint，但它不起作用并显示错误：

ESLint：解析错误：此实验性语法需要启用以下解析器插件之一：“jsx、flow、typescript”(2:9)。

这是我的.eslintrc和package.json设置。我应该做什么来修复错误？

包.json

{
  "name": "raonair-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "eslint-config-react-app": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "parser": "babel-eslint",
  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "plugin:flowtype/recommended"
    ],
    "plugins": [
      "flowtype"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not …

我整个上午都在为这个问题苦苦挣扎，但在任何地方都找不到解决方案。我是打字稿的新手，我正在尝试使用 Eslint 和 Prettier 正确设置它，以确保代码格式正确。

所以，我在创建功能组件时面临的问题。根据备忘单，我正在尝试导出一个简单的组件，例如：

import React from "react";

type DivProps = {
  text: string;
};

const Div = ({ text }: DivProps): JSX.Element => (<div>{text}</div>)

export default Div;

然而，eslint 抱怨说“函数组件不是函数表达式”。

运行修复时，它会将我的函数转换为未命名函数：

const Div = function ({ text }: DivProps): JSX.Element {
  return <div>{text}</div>;
};

然后它会抱怨说“意外的未命名函数”。

即使我尝试将函数重构为：

function Div({ text }: DivProps): JSX.Element {
  return <div>{text}</div>;
};

我仍然收到同样的错误，说“函数组件不是函数表达式”。

我的 .eslintrc.js 文件是：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb", "plugin:@typescript-eslint/recommended", "prettier"],
  parser: "@typescript-eslint/parser",
  parserOptions: { …

我jest v24.7.1在我的项目中安装了：

npm install jest -D

然后我开始编写一些测试文件，但是我收到了这些 eslint 错误：

'describe' is not defined. eslint (no-undef)
'it' is not defined. eslint (no-undef)
'expect' is not defined. eslint (no-undef)

eslintrc.js：

module.exports = {


env: {
    browser: true,
    es6: true
  },
  extends: ["airbnb", "prettier", "prettier/react"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {}
};

我应该添加另一个规则或插件来解决这个问题吗？

这是我的代码:

const func = () => {
  return (
    <div >
       you're free
      </div>
  )}

以某种方式,eslint标记"你是免费的"行有错误 error HTML entities must be escaped react/no-unescaped-entities

但是从我可以看到jsx已经逃脱了撇号.我可以看到这些单词you're free没有问题.如果我将其转义为',那么我将很难搜索字符串(我希望you're free在编辑器中搜索返回命中.但显然编辑器会错过,因为文本实际上是you're free)

那么解决这种eslint异常的最佳方法是什么？

最近,我开始在我的编辑器中使用Visual Studio Code,并找到了Prettier - JavaScript格式化程序.我认为这是一个很棒的插件,因为它可以帮助我保持代码看起来不错.

我设置了Airbnb的ESLint配置,并发现它非常有用.

这是捕获.我正在运行的Airbnb ESLint配置与Prettier不太搭配.例如,对于JavaScript字符串,Prettier被格式化为包含双重刻度和Airbnb的ESLint,如单个刻度.当我使用Prettier格式化代码时,Airbnb的ESLint不同意.

我知道Kent Dodds已经完成了ESLint配置的一些工作,其中包括这里的例子.

但我似乎无法找到一种解决方案,让我使用Prettier的魔力将我的代码格式化为Airbnb的ESLint.

我已经将eslint airbnb标准应用于我的代码,所以现在这段代码:

handleSubmit = (event) => {
        event.preventDefault();
        this.props.onSearch(this.query.value);
        event.target.blur();
    }

导致错误

[eslint]必须使用解构道具赋值(反应/解构 - 赋值)

onSearch基本上是一个将值传递给父组件的触发器.

如何重构此代码以满足eslint要求？

谢谢.

我尝试以各种方式进行和重做 Airbnb eslint 安装，但我总是在 GitLab-ci 中遇到此构建错误。它适用于我当地的环境。

我使用 create-react-app 创建了项目，单独安装了依赖项，以免覆盖 eslint 版本。但我尝试使用npx install-peerdeps --dev eslint-config-airbnb并重新安装通过创建 React 应用程序创建的 eslint 版本来安装所有依赖项。

我还尝试直接在 package.json 中设置依赖项，而不是创建配置文件

我的package.json：

{
  "name": "assinatura",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/material": "^5.0.2",
    "@react-pdf-viewer/core": "^2.9.1",
    "@react-pdf-viewer/page-navigation": "^2.9.1",
    "@react-pdf-viewer/zoom": "^2.9.1",
    "axios": "^0.21.4",
    "bootstrap": "^5.0.2",
    "enzyme-to-json": "^3.6.2",
    "pdfjs-dist": "2.6.347",
    "progress-bar": "^0.1.1",
    "prop-types": "^15.7.2",
    "query-string": "^7.0.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-meta-tags": "^1.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-signature-canvas": "^1.0.3",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.0.1"
  }, …

尝试为我的新 React Vite Typescript 项目设置 ESLint 和 Airbnb 风格指南。

运行npx eslint --init和npm init @eslint/config，并选择上述所有选项后，我仍然在列表中找不到 Airbnb 风格指南选项。该列表仅显示标准和 XO。

这是屏幕截图：