标签: eslintrc

我开始在 WebStorm 2022.2.1 Build #WS-222.3739.57 上使用 Next.js。我创建了一个新的 Next.js 项目并启用了 TypeScript，仅此而已。

错误如下图所示：

TypeError: this.libOptions.parse is not a function

TypeError: this.libOptions.parse is not a function
    at ESLint8Plugin.<anonymous> (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:139:64)
    at step (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:44:23)
    at Object.next (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:25:53)
    at C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:15:12)
    at ESLint8Plugin.invokeESLint (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:133:16)
    at ESLint8Plugin.<anonymous> (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:120:44)
    at step (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:44:23)
    at Object.next (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:25:53)
Process finished with exit code -1

我的Node.js版本是v16.15.1，ESLint版本是8.23.0。

这就是我的 devDependency …

我在 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 …

我在 React 项目中使用 eslint、prettier、vite。

我已将 VSCode 工作区设置设置为"source.fixAll.eslint"和。但它不断更改为自动，例如当我打开 VSCode 或当我编码时。"source.organizeImports"true"explicit"

可能是什么原因？

// .vscode/settings.json (workspace settings)

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // keeps automatically changing to "explicit"
    "source.organizeImports": true // keeps automatically changing to "explicit"
  },
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

// package.json devDependencies

"devDependencies": {
  "@testing-library/react": "^14.0.0",
  "@types/jest": "^29.5.6",
  "@types/react": "^18.2.15",
  "@types/react-dom": "^18.2.7",
  "@typescript-eslint/eslint-plugin": "^6.0.0",
  "@typescript-eslint/parser": "^6.0.0",
  "@vitejs/plugin-react": "^4.0.3",
  "eslint": "^8.45.0",
  "eslint-plugin-prettier": "^5.0.1",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.3",
  "husky": "^8.0.3",
  "jest": "^29.7.0",
  "jest-environment-jsdom": …

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

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

我正在使用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 文件禁用该规则？

我正在使用 VSCode，当我将该行添加'react-hooks/exhaustive-deps': 'warn'到 .eslintrc.js 时，我在 ESLint 输出中得到以下内容：

Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"

这会破坏所有其他 linting。我尝试将以下内容添加到我的 .eslintrc.js 中：

meta: {
    hasSuggestions: true
},

这给了我以下错误：

UnhandledPromiseRejectionWarning: Error: ESLint configuration in .eslintrc.js is invalid:
    - Unexpected top-level property "meta".

任何帮助，将不胜感激。

这是我的 .eslintrc.js：

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
    settings: {
        'react': {
            'version': 'detect'
        }
    },
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        }, …

当我尝试构建 Next.Js 应用程序时，成功构建后会出现以下错误。当我在 Vercel 中部署应用程序时，会显示此错误。

error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json

这是我的.eslintrc.json

{
  "extends": ["next/babel","next/core-web-vitals"]
}

我还添加了.babelrc

{
  "presets": ["next/babel"],
  "plugins": []
}

当我更改eslintrc.json文件时，我还找到了一个解决方案，如下所示：

{
  "extends": ["next","next/core-web-vitals"]
}

那么构建应用程序时不会显示任何错误。但是当我使用上述解决方案时出现另一个问题，问题是：

Parsing error: Cannot find module 'next/babel'

这在所有带有红色标记的导入中都显示出来。

我尝试搜索解决方案，但没有找到任何解决方案。

我想使用 eslint 命令标志--fix来修复一个规则。我尝试了命令：eslint --fix --config ./.eslintrcsomerules.js .. 但它不起作用。如何达到目的？

我的.eslintrcsomerules.js文件如下：

module.exports = {
  'rules': {
    'indent': [2, 2],
  }
};