Update typescript, prettier, tslint -> eslint (#5536)

* Update typescript, prettier, tslint -> eslint

* Organize imports

* Use glob for eslint fix react import

src/components/entity/ha-chart-base.js

@@ -1,12 +1,13 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+/* eslint-plugin-disable lit */
 import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
 import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
-import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { formatTime } from "../../common/datetime/format_time";
+
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
 

src/components/entity/ha-entities-picker.ts

@@ -1,27 +1,25 @@
-import {
-  LitElement,
-  TemplateResult,
-  property,
-  html,
-  customElement,
-} from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button-light";
-
-import { HomeAssistant } from "../../types";
-import { PolymerChangedEvent } from "../../polymer-types";
+import type { HassEntity } from "home-assistant-js-websocket";
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
-
+import type { PolymerChangedEvent } from "../../polymer-types";
+import type { HomeAssistant } from "../../types";
 import "./ha-entity-picker";
-// Not a duplicate, type import
-// tslint:disable-next-line
-import { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
-import { HassEntity } from "home-assistant-js-websocket";
+import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPickerLight extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() public value?: string[];
+
   /**
    * Show entities from specific domains.
    * @type {string}
@@ -29,6 +27,7 @@ class HaEntitiesPickerLight extends LitElement {
    */
   @property({ type: Array, attribute: "include-domains" })
   public includeDomains?: string[];
+
   /**
    * Show no entities of these domains.
    * @type {Array}
@@ -36,8 +35,10 @@ class HaEntitiesPickerLight extends LitElement {
    */
   @property({ type: Array, attribute: "exclude-domains" })
   public excludeDomains?: string[];
+
   @property({ attribute: "picked-entity-label" })
   public pickedEntityLabel?: string;
+
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
 
   protected render(): TemplateResult {

src/components/entity/ha-entity-picker.ts

@@ -3,25 +3,23 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
-import memoizeOne from "memoize-one";
-
-import "./state-badge";
-
-import { computeStateName } from "../../common/entity/compute_state_name";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
-  LitElement,
-  TemplateResult,
-  html,
   css,
   CSSResult,
+  html,
+  LitElement,
   property,
   PropertyValues,
+  TemplateResult,
 } from "lit-element";
-import { HomeAssistant } from "../../types";
-import { HassEntity } from "home-assistant-js-websocket";
-import { PolymerChangedEvent } from "../../polymer-types";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { HomeAssistant } from "../../types";
+import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -54,13 +52,19 @@ const rowRenderer = (
 };
 
 class HaEntityPicker extends LitElement {
-  @property({ type: Boolean }) public autofocus?: boolean;
+  @property({ type: Boolean }) public autofocus = false;
+
   @property({ type: Boolean }) public disabled?: boolean;
+
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
+
   @property() public hass?: HomeAssistant;
+
   @property() public label?: string;
+
   @property() public value?: string;
+
   /**
    * Show entities from specific domains.
    * @type {Array}
@@ -68,6 +72,7 @@ class HaEntityPicker extends LitElement {
    */
   @property({ type: Array, attribute: "include-domains" })
   public includeDomains?: string[];
+
   /**
    * Show no entities of these domains.
    * @type {Array}
@@ -75,6 +80,7 @@ class HaEntityPicker extends LitElement {
    */
   @property({ type: Array, attribute: "exclude-domains" })
   public excludeDomains?: string[];
+
   /**
    * Show only entities of these device classes.
    * @type {Array}
@@ -82,8 +88,11 @@ class HaEntityPicker extends LitElement {
    */
   @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
+
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
+
   @property({ type: Boolean }) private _opened?: boolean;
+
   @property() private _hass?: HomeAssistant;
 
   private _getStates = memoizeOne(

src/components/entity/ha-entity-toggle.ts

@@ -1,24 +1,21 @@
 import "@polymer/paper-icon-button/paper-icon-button";
-
-import { STATES_OFF } from "../../common/const";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResult,
   css,
+  CSSResult,
+  html,
+  LitElement,
   property,
   PropertyValues,
+  TemplateResult,
 } from "lit-element";
-import { HomeAssistant } from "../../types";
-import { HassEntity } from "home-assistant-js-websocket";
-import { forwardHaptic } from "../../data/haptics";
-
+import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-
-import "../ha-switch";
 import { UNAVAILABLE_STATES } from "../../data/entity";
+import { forwardHaptic } from "../../data/haptics";
+import { HomeAssistant } from "../../types";
+import "../ha-switch";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -28,14 +25,14 @@ const isOn = (stateObj?: HassEntity) =>
 class HaEntityToggle extends LitElement {
   // hass is not a property so that we only re-render on stateObj changes
   public hass?: HomeAssistant;
+
   @property() public stateObj?: HassEntity;
-  @property() private _isOn: boolean = false;
+
+  @property() private _isOn = false;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
-      return html`
-        <ha-switch disabled></ha-switch>
-      `;
+      return html` <ha-switch disabled></ha-switch> `;
     }
 
     if (this.stateObj.attributes.assumed_state) {

src/components/entity/ha-state-icon.js

@@ -1,14 +1,12 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../ha-icon";
 import { stateIcon } from "../../common/entity/state_icon";
+import "../ha-icon";
 
 class HaStateIcon extends PolymerElement {
   static get template() {
-    return html`
-      <ha-icon icon="[[computeIcon(stateObj)]]"></ha-icon>
-    `;
+    return html` <ha-icon icon="[[computeIcon(stateObj)]]"></ha-icon> `;
   }
 
   static get properties() {

src/components/entity/ha-state-label-badge.ts

@@ -1,25 +1,22 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import {
-  LitElement,
-  html,
-  PropertyValues,
-  TemplateResult,
   css,
   CSSResult,
   customElement,
+  html,
+  LitElement,
   property,
+  PropertyValues,
+  TemplateResult,
 } from "lit-element";
-
-import { HassEntity } from "home-assistant-js-websocket";
 import { classMap } from "lit-html/directives/class-map";
-import { HomeAssistant } from "../../types";
-
+import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { stateIcon } from "../../common/entity/state_icon";
 import { timerTimeRemaining } from "../../common/entity/timer_time_remaining";
-import secondsToDuration from "../../common/datetime/seconds_to_duration";
-
+import { HomeAssistant } from "../../types";
 import "../ha-label-badge";
 
 @customElement("ha-state-label-badge")

src/components/entity/state-badge.ts

@@ -1,31 +1,34 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import {
-  LitElement,
-  TemplateResult,
   css,
   CSSResult,
   html,
+  LitElement,
   property,
   PropertyValues,
   query,
+  TemplateResult,
 } from "lit-element";
-import "../ha-icon";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateIcon } from "../../common/entity/state_icon";
-import { HassEntity } from "home-assistant-js-websocket";
-// Not duplicate, this is for typing.
-// tslint:disable-next-line
-import { HaIcon } from "../ha-icon";
-import { HomeAssistant } from "../../types";
-import { computeActiveState } from "../../common/entity/compute_active_state";
-import { ifDefined } from "lit-html/directives/if-defined";
 import { iconColorCSS } from "../../common/style/icon_color_css";
+import type { HomeAssistant } from "../../types";
+import "../ha-icon";
+import type { HaIcon } from "../ha-icon";
 
 export class StateBadge extends LitElement {
   public hass?: HomeAssistant;
+
   @property() public stateObj?: HassEntity;
+
   @property() public overrideIcon?: string;
+
   @property() public overrideImage?: string;
+
   @property({ type: Boolean }) public stateColor?: boolean;
+
   @query("ha-icon") private _icon!: HaIcon;
 
   protected render(): TemplateResult {
@@ -91,7 +94,7 @@ export class StateBadge extends LitElement {
             const errorMessage = `Type error: state-badge expected number, but type of ${
               stateObj.entity_id
             }.attributes.brightness is ${typeof brightness} (${brightness})`;
-            // tslint:disable-next-line
+            // eslint-disable-next-line
             console.warn(errorMessage);
           }
           // lowest brighntess will be around 50% (that's pretty dark)

src/components/entity/state-info.js

@@ -1,10 +1,10 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../ha-relative-time";
-import "./state-badge";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
+import "../ha-relative-time";
+import "./state-badge";
 
 class StateInfo extends PolymerElement {
   static get template() {
@@ -62,9 +62,7 @@ class StateInfo extends PolymerElement {
   }
 
   static get stateBadgeTemplate() {
-    return html`
-      <state-badge state-obj="[[stateObj]]"></state-badge>
-    `;
+    return html` <state-badge state-obj="[[stateObj]]"></state-badge> `;
   }
 
   static get infoTemplate() {