标签: eslintrc

使用角度 11 。我对 Eslint 问题有疑问

我有带有类和其他元素的组件选择器

 @Component ({
  selector : ".myApp",
  ..
 })

如何在里面添加签到规则

@angulareslint/组件选择器

我的组件选择器“my”和选择器类型 element 和 class 。

使用以下 Node.js 代码：

import { fileURLToPath } from 'node:url';
import path from 'node:path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(fileURLToPath(import.meta.url));

我看到以下与参考相关的 lint 错误import.meta.url：

此代码段将按照node.js 指南__filename复制并复制到 ESM 中。使用如下时会出现相同的错误...这也在官方指南中：__dirnameimport.meta.url

import { readFileSync } from 'fs';
const buffer = readFileSync(new URL('./data.proto', import.meta.url));

我已经看过这个，但它没有解决我的问题。这是专门在 Cloud9 IDE 中......不是当前的 AWS Cloud9，而是基于此存储库的自托管 Cloud9 （最后更新于 4 年前）。(AWS) Cloud9 的唯一指导在此页面上：

我可以使用此.eslintrc文件获得某些基本规则，例如

{
  rules: {
    semi: ["error", "never"]
  }
}

所以我知道配置文件正在IDE中生效。但看不到禁用“意外令牌导入”错误的适当规则。

编辑：以下内容似乎相关，但我无法确定它是否真正得出了结论： …

我们有一个 CircleCI 管道。我们有一个旧版本的 eslint 即 5.10.0，大约是三年前安装的，现在客户想要将节点版本升级到 16 并升级相关软件包。我已经修改了 package.json 文件并将 eslint 版本从 更改"eslint": "^5.10.0"为 " eslint": "^7.10.0"。现在，在分支 CircleCI 上推送更改时测试执行失败并出现以下错误：

哎呀！出了些问题！:(

ESLint：7.32.0

ESLint 找不到要扩展的配置“标准”。请检查配置名称是否正确。

配置“standard”是从“/home/xxx/xxx/.eslintrc.yml”中的配置文件引用的。

我已经用谷歌搜索过这个问题，但没有找到正确的解决方案。

我已经尝试过

1. 通过猜测可以自动创建 .eslintrc.yml 文件来删除它。
2. 尝试eslint --init在 script 标签下的 package.json 内 运行命令yarn run"scripts": { "test": "yarn run eslint --init && yarn lint && yarn flow && yarn jest", } 但这里使用了 CircleCI 管道，因此 eslint --init 命令会询问问题 How would you like to use ESLint? 在自动文件和测试执行期间，CircleCI 中没有任何规定来提供任何答案。

使用以下配置创建新的 Next.js应用程序后

\xe2\x9c\x94 What is your project named? \xe2\x80\xa6 app\n\xe2\x9c\x94 Would you like to use TypeScript? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use ESLint? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use Tailwind CSS? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use `src/` directory? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use App Router? (recommended) \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to customize the default import alias? \xe2\x80\xa6 [No] / Yes\n …

我在 .babelrc.js 和 .eslintrc 中有一些别名，带有 eslint-import-resolver-babel-module 插件可以从 babel 配置中获取别名。但是 eslint 无论如何都无法解析别名。

.babelrc.js, .eslintrc, package.json 在要点中：https ://gist.github.com/SilentImp/4d005064063701faa04c29b02114d0df

.babelrc.js

const fs = require('fs');
const path = require('path');

const projectPath = path.resolve(__dirname, './');
const pathToSrc = path.resolve(projectPath, 'src');
const stats = fs.statSync(pathToSrc);

const env = process.env.NODE_ENV || 'dev';
const envAppConfigURL = path.resolve(__dirname, `../app/${env}.js`);
const devAppConfigURL = path.resolve(__dirname, 'dev.js');
const localAppConfigURL = path.resolve(__dirname, 'local.js');
const sampleAppConfigURL = path.resolve(__dirname, 'local.sample.js');

const isEnvConfig = fs.existsSync(envAppConfigURL);
const isDevConfig = fs.existsSync(devAppConfigURL);
const isLocalConfig = fs.existsSync(localAppConfigURL);
const isSampleConfig …

我的密码

  componentDidMount() {
    // we add a hidden class to the card and after 700 ms we delete it and the transition appears
    this.timeOutFunction = setTimeout(
      function () {
        this.setState({cardAnimaton: ""});
      }.bind(this),
      700
    );
  }

  componentWillUnmount() {
    clearTimeout(this.timeOutFunction);
    this.timeOutFunction = null;
  }

  componentWillMount() {
    if (this.state.logged_in) {
      this.props.history.push("/dashboard");
    }
  }

我打开了以下内容 .eslintrc

{
    "parser": "babel-eslint",
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off",
       "react/no-multi-comp":  [1, { "ignoreStateless": true }]
    },

    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": …

嗨，我很努力地了解/我的React Project消失了这个错误。

Prefer default export import/prefer-default-export

Helpers.js错误指向：

export function getItems() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

导入功能：

import { getItems } from '../helpers/helpers';

componentDidMount() {
    getItems.call(this);
}

我尝试无济于事：

"rules": {
     "import/prefer-default-export": off,
     ...
}

我是否需要在函数中添加“默认”？ export default function getItems() {...}

谢谢

我对如何设置配置文件以及我应该使用哪些配置/插件感到非常困惑。

我有一个使用 Typescript、Jest 和 React 钩子的 React 项目。

我知道我需要安装：

• eslint
• prettier, eslint-config-prettier,eslint-plugin-prettier
• eslint-plugin-import

至于Airbnb的配置，我不确定是否需要安装：

• eslint-config-airbnb, eslint-plugin-react,eslint-plugin-jsx-a11y 或
• eslint-config-airbnb-base

这些似乎都不支持Typescript，所以我似乎还需要安装：

• @typescript-eslint/eslint-plugin, @typescript-eslint/parser

对于 Jest，我需要安装：

• eslint-plugin-jest

我不确定 React 钩子。我是否需要在此处安装任何其他内容，或者其他软件包之一是否包含对它的支持？我看到我可以选择安装：

• eslint-plugin-react-hooks

这是必须的吗？

现在，对于配置文件，我关心两个方面：extends和plugins.

我看到其中一些包可以用/recommended. 我应该使用这些吗？该extends部分应该是什么？我见过将其设置为的示例：

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

虽然我已经看到其他使用的例子：

{
  "extends": ["airbnb", "prettier"]
}

另一个使用示例：

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}

其他 Typescript、Jest 和 React Hooks 插件怎么样？例如，eslint-plugin-jest建议添加"plugin:jest/recommended"到扩展中。这会与其他任何人发生冲突吗？我看到我也可以添加"plugin:@typescript-eslint/recommended"和"prettier/@typescript-eslint" …

是否有规则可以禁用React.StatelessComponent或React.FunctionalComponent仅使用React.FC

例如：

export const ComponentOne: React.StatelessComponent<Props> = (props) => { return <....> };
export const ComponentTwo: React.FunctionalComponent<Props> = (props) => { return <....> };

应由 ESLint 强制编写为

export const ComponentOne: React.FC<Props> = (props) => { return <....> };
export const ComponentTwo: React.FC<Props> = (props) => { return <....> };

我认为通过规则是可能的no-restricted-syntax，但无法从文档中弄清楚。

我目前有这段代码，但 EsLint 显示以下错误：“片段必须包含多个子片段 - 否则不需要片段。”。但如果不将代码包装在 React.Fragment 中，我就无法执行 IF。是否有另一种方法可以在不允许 lint 规则的情况下消除此错误？

return (
            <>
                {loading && (
                    <div className={classes.container}>
                        <img
                            alt="loading"
                            src={LoadingAnimation}
                            className={classes.img}
                        />
                    </div>
                )}
            </>
        );