admin 管理员组

文章数量: 1086019

I migrated to the newest version of ESLint and I get false positive errors on React components. Meanwhile I use all of them in the current file:

In the "extends" section I have the default "no-unused-vars" through pluginEslintJs/recommended, but if I add the "no-unused-vars" explicitly to the "rules", the problem still persists. I would like to use the "no-unused-vars" - it is mandatory to me - but the rule is not working as expected.

My eslint.config.mjs:

import { defineConfig } from 'eslint/config';
import globals from 'globals';
import pluginEslintJs from '@eslint/js';
import pluginStylisticJs from '@stylistic/eslint-plugin-js';
import pluginStylisticJsx from '@stylistic/eslint-plugin-jsx';

/**
 * @see 
 * @see /rules
 */
export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],
    plugins: {
      pluginEslintJs,
      '@stylistic/js': pluginStylisticJs,
      '@stylistic/jsx': pluginStylisticJsx,
    },
    extends: [
      'pluginEslintJs/recommended',
    ],
    languageOptions: { globals: globals.browser },
  },
  {
    rules: {
      'yoda': ['error', 'always'],
      '@stylistic/js/semi': 0,
      '@stylistic/js/comma-dangle': [1, {
        arrays: 'only-multiline',
        objects: 'only-multiline',
        imports: 'only-multiline',
        exports: 'only-multiline',
        functions: 'only-multiline',
      }],
      '@stylistic/js/operator-linebreak': ['error', 'before'],
      '@stylistic/js/indent': ['error', 2, { SwitchCase: 1 }],
      '@stylistic/js/space-before-function-paren': ['error', {
        anonymous: 'never',
        named: 'never',
        asyncArrow: 'always',
      }],
      '@stylistic/js/arrow-parens': ['error', 'as-needed', {
        'requireForBlockBody': false,
      }],
      '@stylistic/js/arrow-spacing': ['error', {
        'before': true,
        'after': true,
      }],
      '@stylistic/js/no-mixed-spaces-and-tabs': 1,
      '@stylistic/jsx/jsx-closing-bracket-location': 1,
      '@stylistic/jsx/jsx-closing-tag-location': 1,
      '@stylistic/jsx/jsx-curly-brace-presence': [1, 'never'],
      '@stylistic/jsx/jsx-curly-spacing': 1,
      '@stylistic/jsx/jsx-equals-spacing': 1,
      '@stylistic/jsx/jsx-first-prop-new-line': [1, 'multiline-multiprop'],
      '@stylistic/jsx/jsx-indent': [1, 2, {
        checkAttributes: true,
        indentLogicalExpressions: true,
      }],
      '@stylistic/jsx/jsx-pascal-case': [1, {
        allowAllCaps: false,
        allowNamespace: true,
        allowLeadingUnderscore: false,
      }],
      '@stylistic/jsx/jsx-props-no-multi-spaces': 1,
      '@stylistic/jsx/jsx-self-closing-comp': ['error', {
        'component': true,
        'html': true,
      }],
      '@stylistic/jsx/jsx-wrap-multilines': [1, {
        'declaration': 'parens-new-line',
        'assignment': 'parens-new-line',
        'return': 'parens-new-line',
        'arrow': 'parens-new-line',
        'condition': 'ignore',
        'logical': 'parens-new-line',
        'prop': 'parens-new-line',
        'propertyValue': 'parens-new-line',
      }],
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },
]);

In the legacy eslint-plugin-react I could extend the settings like this:

export default defineConfig([
   ...
   pluginReact.configs.flat.recommended,
])

In this version of ESLint may I have to add the @stylistic/eslint-plugin-jsx to the extends but I could not find the docs, and nothing worked for me what I tried. And maybe, I am on a wrong way.

What have I miss? What should I configure to make it correct?

本文标签： reactjsESLlint nounusedvars has false positive on React componentsStack Overflow

版权声明：本文标题：reactjs - ESLlint `no-unused-vars` has false positive on React components - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744095690a2532857.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。