I am using solid/event-handlers rule of eslint-plugin-solid with eslint. After automatically repairing the error that occurred in onDblClick, it became onDoubleClick and an error occurred in typescript.

• Why does eslint-plugin-solid auto-repair onDblClick to onDoubleClick?
• How can I avoid errors in typescript?

node: 16.16.0 npm: 8.11.0 eslint: 8.26.0 eslint-plugin-solid: 0.8.0 typescript: 4.8.4

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

.eslintrc.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["solid"],
  "rules": {
    "solid/event-handlers": "warn"
  }
}

src/App.tsx

export const App = () => {
  return <div onDblClick={() => alert("hello world")}>double click me</div>;
};

Running npx eslint --fix src/App.tsx fixes it.

src/App.tsx

export const App = () => {
  return <div onDoubleClick={() => alert("hello world")}>double click me</div>;
};

Then run npx tsc and you will get an error.

src/App.tsx:2:15 - error TS2322: Type '{ children: string; onDoubleClick: () => void; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'onDoubleClick' does not exist on type 'HTMLAttributes<HTMLDivElement>'. Did you mean 'onDblClick'?

2   return <div onDoubleClick={() => alert("hello world")}>double click me</div>;
                ~~~~~~~~~~~~~

CodePudding user response：

I think they erroneously mapped dblclick to DoubleClick on event-handlers.ts#17.

You can disable eslint for a specific line using // eslint-disable-line or // eslint-disable-next-line.