标签: eslint

我整个上午都在为这个问题苦苦挣扎，但在任何地方都找不到解决方案。我是打字稿的新手，我正在尝试使用 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: { …

我是ESLint的新手,我已成功将ESLint与IntelliJ集成.

开箱即用,我的ESLint集成无法识别node,但文档的基本审查清楚地表明,通过创建在.eslintrc我的项目文件夹的根目录中命名的配置文件(使用适当的IntelliJ设置来访问此文件)和设置"node":true,ESLint识别node(即以下全部.eslintrc作品).

// Contents of .eslintrc at root of project - support for Node and jQuery
{
  "env" : {
    "node" : true,
    "jquery" : true
  },
}

但是,ESLint仍然无法识别require(),如此屏幕截图所示:

这里找到了一个可能的提示,它建议添加"amd":false(我推测).eslintrc文件 - 但没有去.

这看起来很基本.我怎样才能.eslintrc认出来require()？

(如果在您的回答中,您可以提供有关如何涵盖更多一般案例的见解,那也会有所帮助.谢谢!)

启用了forbid-prop-types规则后,eslint禁止使用style: React.PropTypes.object,shape建议使用.

但是真的有必要为此目的定义所有可用的属性吗？

DEMO.propTypes = {
    style: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number,
        ...
    })
};

定义代码太多了!

我刚刚创建了一个新的模板，create-react-app与反应过来V17在内，并为我所用之前，我安装eslint的依赖，这是我的package.json文件

{
  "name": "gym-nation",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.8.6",
    "react-redux": "^7.2.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not …

我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: {}
};

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

我有一个包含多个 eslint 规则违规的大型 JavaScript 文件。我正在尝试禁用它们并一次解决一个问题。下面的代码表明我可以毫无问题地禁用它们，但不是关于驼峰命名规则的规则，也可能是其他个别规则。我使用的方法应该根据 eslint 文档工作，但我的解释肯定有缺陷。

代码很短，并没有消除有关驼峰式大小写的错误。

/* eslint-disable  /* eslint-disable//  works but gets everything.
`/* eslint (camelcase) : 0 */
    /* eslint camelcase : ["error", {ignoreDestructuring:true}] */

const Lesson_1 = {title:'The Home Row Keys.'},'lesson': 'jjj fff jjj fff'}

只是得到相同的驼峰错误而不做任何更改。eslint 文档说只是禁用整个规则，但没有指定上面列出的方法。

你能帮我吗，当我尝试构建项目时遇到此错误？

哎呀！出了些问题！:(

ESLint：8.0.0

TypeError：无法加载在“src.eslintrc”中声明的插件“@typescript-eslint”：类扩展值未定义不是构造函数或 null 引用自：src.eslintrc

包.json

    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^4.33.0",
        "@typescript-eslint/parser": "^4.33.0",
        "browserslist": "^4.17.3",
        "eslint": "^8.0.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.24.2",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "prettier": "^2.3.2",
    }

.eslintrc

    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "prettier"
    ],
    "plugins": ["@typescript-eslint"],

// bad
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);

// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

这取自Airbnb反应风格指南.有人可以解释为什么"不鼓励依赖功能名称推断"？这只是一种风格问题吗？

在我的测试中柴,我经常发现自己想要使用他们的主张是一样的东西.to.be.empty,.to.be.true等等,因为我觉得他们更清洁,而不是读.to.be.length(1)或.to.be.equal(true).然而,这打破了我的linter(我正在使用默认的Airbnb linting).

我可以使用// disable-eslint-line语法,但是我必须将它添加到每个读取的内容中,这看起来很乏味.

我也读过关于DirtyChai库的内容,但这需要我回到我的整个测试库中,为它们添加括号,这些似乎是我不应该做的只是为了让我的linter传递它应该可能的东西一开始就好.

有没有人知道比我上面概述的更好的方法来处理这个问题？

我正在使用Vue ESLint 插件，它有一条不允许使用单字组件名称的规则。

但是，我也在使用 Nuxt，要在 Nuxt 中设置默认布局，您需要一个名为的 .vue 组件default.vue，该组件会引发 ES Lint 规则错误。

我似乎无法在那个实际上很小的 .vue 文件中禁用它......

<template>
    <div>
        <Header/>
        <Nuxt/>
    </div>
</template>

但如果我禁用我的规则，.eslintrc.js那么它就会起作用。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}

有没有一种方法可以仅对一个 Vue 文件禁用该规则？