reactjs - eslint errors in typescript - Stack Overflow

admin管理员组

文章数量:1309173

I've been practicing my skill in typescript so I created a simple todo-list and I use vite typescript react. My problem is it is working fine but I notice that eslint is marking my code with red underline errors even if it works fine. Here's also the link in my repo:

    <div className="flex justify-center flex-col items-center gap-4">
      <h2 className="text-3xl font-bold">Todo Input</h2>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <Input
          placeholder="Input details"
          onChange={handleChange}
          value={value}
        />
        <button className="bg-[#0077D4] text-white px-4 rounded-md">
          Add new task
        </button>
      </form>

      <h3 className="text-2xl font-bold mt-4">Todo list</h3>
      <div className="flex gap-4 mb-4">
        <button
          onClick={handleAll}
          className="bg-[#0077D4] text-white px-24 active:bg-[#005A9C]"
        >
          All
        </button>
        <button
          onClick={handleDone}
          className="bg-[#0077D4] text-white px-24 active:bg-[#005A9C]"
        >
          Done
        </button>
        <button className="bg-[#0077D4] text-white px-24 active:bg-[#005A9C]">
          Todo
        </button>
      </div>
      <List
        todos={filteredTodos}
        onDelete={handleDelete}
        onChecked={handleCheckTodo}
      />
    </div>

in this block of code i get errors in eslint that says

• '>' expected. Cannot find 'className'

• ';' expected.ts(1005) Cannot find name 'onSubmit'. Did you mean 'onsubmit'?

• Operator '<' cannot be applied to types 'boolean' and 'RegExp'

here's my tgconfig file:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

eslint config:

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
      { ignores: ['dist'] },
      {
        extends: [js.configs.recommended, ...tseslint.configs.recommended],
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
          ecmaVersion: 2020,
          globals: globals.browser,
        },
        plugins: {
          'react-hooks': reactHooks,
          'react-refresh': reactRefresh,
        },
        rules: {
          ...reactHooks.configs.recommended.rules,
          'react-refresh/only-export-components': [
            'warn',
            { allowConstantExport: true },
          ],
        },
      },
    )

本文标签： reactjseslint errors in typescriptStack Overflow