版本：0.17.0+

eslint howto

[toc]

`div` element with `onClick`

Although I can just attach a onClick method to a div's property, It would cause a chain of eslint problems.

The first one is no-static-element-interactions, since div and span can not own 'semantic' behavior.

Then, the solution is to add a role="button" to make it clickable.

After then, it trigger a new eslint problem of interactive-supports-focus, which suggests me to add a tabIndex property for keyboard support.

However, I didn't intend to let my div capturing 'tab' behavior. Hence, I can add a tabIndex=-1 to suppress it.

And next, another eslint problem of click-events-have-key-events occurred, which needs me to add a aria-hidden property.

At last, to make a div's 'click' action qualified, I should change the div element into like this:

<div
  onClick={requestReadFile}
  role={'button'}
  tabIndex={-1}
  aria-hidden
  // id={'upload-area'}
  // className={'flex justify-center items-center flex-col'}
  // style={{ width: 300, border: '2px dashed' }}
>{...}</div>

ref:

Alias error

Use this will partially cause error, since the _public works well, while _renderer won't.

// .eslintrc
  "settings": {
    "alias": {
        "map": [
            [ "_public", "./public" ],
            [ "_renderer", "./src/renderer" ]
        ]
      },
    "import/resolver": {
        "webpack": {
            "config": "./webpack.config.js"
        },
      }
    }
  },

However, if I just change the config's value into {}, then everything goes well including import/no-extraneous-dependencies.

// .eslintrc
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
        }
      }
    }
  },

I don't know why, maybe it's a bug.

Here is my installed packages about eslint:

Finally, I decided to give up the xxx-webpack choice:

refer:

eslint howto

div element with onClick​

Alias error​

`div` element with `onClick`

Alias error