[webui] format code by eslint and prettier

[Lijiaoa]

• stylelint reference

  • yarn stylelint --fix could almost format css/scss code

• prettier

• add some eslint rule

 // no use `arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]`,
 // because `"requireForBlockBody": true`  is conflict with prettier `arrowParens: 'avoid',`
 "arrow-parens": [2, "as-needed"],
 "no-empty": 2, // block is null will error
 "no-multiple-empty-lines": [2, { "max": 1 }], // max empty line is 1

[liuzhe-lz]

I think this is less clear to human. It's hard to figure out associative order at first glance to me.
I personally prefer item => (item !== label), but according to line 44 of App.tsx maybe tslint doesn't like it.

[Lijiaoa]

alwaysParens: avoid | always;
default val is avoid, not add () for arrow function.
So we change it to always?

[liuzhe-lz]

Is this file used by a specific text editor? If yes it should not be committed to code tree.

[liuzhe-lz]

And I wonder why your files do not have trailing new line even though this is set to true...

[Lijiaoa]

but .tsx .scss these files all have new line in last line.

[liuzhe-lz]

Is return necessary here?

[Lijiaoa]

I also think so. We can use arrow function rules to standardize it.

[liuzhe-lz]

I think we should discuss the rules in a meeting, just like what we have done for pylint rules.
For pylint, we listed all default rules violated by our code, and discussed them one by one in a meeting to decide if the rule should be enabled.