Update lint rules (#6490)

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "plugin:@typescript-eslint/recommended",
     "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
     "prettier",
@@ -45,16 +45,16 @@
     "func-names": 0,
     "prefer-arrow-callback": 0,
     "no-underscore-dangle": 0,
-    "no-var": 0,
     "strict": 0,
     "prefer-spread": 0,
     "no-plusplus": 0,
-    "no-bitwise": 0,
+    "no-bitwise": 2,
     "comma-dangle": 0,
     "vars-on-top": 0,
     "no-continue": 0,
     "no-param-reassign": 0,
     "no-multi-assign": 0,
+    "no-console": 2,
     "radix": 0,
     "no-alert": 0,
     "no-return-await": 0,

src/common/entity/battery_icon.ts

@@ -13,7 +13,7 @@ export const batteryIcon = (
     return "hass:battery-unknown";
   }
 
-  var icon = "hass:battery";
+  let icon = "hass:battery";
   const batteryRound = Math.round(battery / 10) * 10;
   if (battery_charging && battery > 10) {
     icon += `-charging-${batteryRound}`;

src/common/entity/supports-feature.ts

@@ -4,6 +4,6 @@ export const supportsFeature = (
   stateObj: HassEntity,
   feature: number
 ): boolean => {
-  // eslint-disable-next-line:no-bitwise
+  // eslint-disable-next-line no-bitwise
   return (stateObj.attributes.supported_features! & feature) !== 0;
 };

src/components/buttons/ha-call-service-button.js

@@ -54,8 +54,8 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
   callService() {
     this.progress = true;
     // eslint-disable-next-line @typescript-eslint/no-this-alias
-    var el = this;
-    var eventData = {
+    const el = this;
+    const eventData = {
       domain: this.domain,
       service: this.service,
       serviceData: this.serviceData,

src/components/buttons/ha-progress-button.js

@@ -78,7 +78,7 @@ class HaProgressButton extends PolymerElement {
   }
 
   tempClass(className) {
-    var classList = this.$.container.classList;
+    const classList = this.$.container.classList;
     classList.add(className);
     setTimeout(() => {
       classList.remove(className);

src/components/dialog/ha-iron-focusables-helper.js

@@ -23,10 +23,10 @@ export const HaIronFocusablesHelper = {
    * @return {!Array<!HTMLElement>}
    */
   getTabbableNodes: function (node) {
-    var result = [];
+    const result = [];
     // If there is at least one element with tabindex > 0, we need to sort
     // the final array by tabindex.
-    var needsSortByTabIndex = this._collectTabbableNodes(node, result);
+    const needsSortByTabIndex = this._collectTabbableNodes(node, result);
     if (needsSortByTabIndex) {
       return IronFocusablesHelper._sortByTabIndex(result);
     }
@@ -50,9 +50,9 @@ export const HaIronFocusablesHelper = {
     ) {
       return false;
     }
-    var element = /** @type {!HTMLElement} */ (node);
-    var tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
-    var needsSort = tabIndex > 0;
+    const element = /** @type {!HTMLElement} */ (node);
+    const tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
+    let needsSort = tabIndex > 0;
     if (tabIndex >= 0) {
       result.push(element);
     }
@@ -70,7 +70,7 @@ export const HaIronFocusablesHelper = {
     //   <input id="B" slot="b" tabindex="1">
     //  </div>
     // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
-    var children;
+    let children;
     if (element.localName === "content" || element.localName === "slot") {
       children = dom(element).getDistributedNodes();
     } else {
@@ -80,7 +80,7 @@ export const HaIronFocusablesHelper = {
       children = dom(element.shadowRoot || element.root || element).children;
       // /////////////////////////
     }
-    for (var i = 0; i < children.length; i++) {
+    for (let i = 0; i < children.length; i++) {
       // Ensure method is always invoked to collect tabbable children.
       needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
     }

src/components/ha-color-picker.js

@@ -188,10 +188,10 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
   // origin is wheel center
   // returns {x: X, y: Y} object
   convertToCanvasCoordinates(clientX, clientY) {
-    var svgPoint = this.interactionLayer.createSVGPoint();
+    const svgPoint = this.interactionLayer.createSVGPoint();
     svgPoint.x = clientX;
     svgPoint.y = clientY;
-    var cc = svgPoint.matrixTransform(
+    const cc = svgPoint.matrixTransform(
       this.interactionLayer.getScreenCTM().inverse()
     );
     return { x: cc.x, y: cc.y };
@@ -225,7 +225,7 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
   // Touch events
 
   onTouchStart(ev) {
-    var touch = ev.changedTouches[0];
+    const touch = ev.changedTouches[0];
     const cc = this.convertToCanvasCoordinates(touch.clientX, touch.clientY);
     // return if we're not on the wheel
     if (!this.isInWheel(cc.x, cc.y)) {
@@ -275,8 +275,8 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // Process user input to color
   processUserSelect(ev) {
-    var canvasXY = this.convertToCanvasCoordinates(ev.clientX, ev.clientY);
-    var hs = this.getColor(canvasXY.x, canvasXY.y);
+    const canvasXY = this.convertToCanvasCoordinates(ev.clientX, ev.clientY);
+    const hs = this.getColor(canvasXY.x, canvasXY.y);
     this.onColorSelect(hs);
   }
 
@@ -319,11 +319,11 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // set marker position to the given color
   setMarkerOnColor(hs) {
-    var dist = hs.s * this.radius;
-    var theta = ((hs.h - 180) / 180) * Math.PI;
-    var markerdX = -dist * Math.cos(theta);
-    var markerdY = -dist * Math.sin(theta);
-    var translateString = `translate(${markerdX},${markerdY})`;
+    const dist = hs.s * this.radius;
+    const theta = ((hs.h - 180) / 180) * Math.PI;
+    const markerdX = -dist * Math.cos(theta);
+    const markerdY = -dist * Math.sin(theta);
+    const translateString = `translate(${markerdX},${markerdY})`;
     this.marker.setAttribute("transform", translateString);
     this.tooltip.setAttribute("transform", translateString);
   }
@@ -358,8 +358,8 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // get angle (degrees)
   getAngle(dX, dY) {
-    var theta = Math.atan2(-dY, -dX); // radians from the left edge, clockwise = positive
-    var angle = (theta / Math.PI) * 180 + 180; // degrees, clockwise from right
+    const theta = Math.atan2(-dY, -dX); // radians from the left edge, clockwise = positive
+    const angle = (theta / Math.PI) * 180 + 180; // degrees, clockwise from right
     return angle;
   }
 
@@ -378,9 +378,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
    */
 
   getColor(x, y) {
-    var hue = this.getAngle(x, y); // degrees, clockwise from right
-    var relativeDistance = this.getDistance(x, y); // edge of radius = 1
-    var sat = Math.min(relativeDistance, 1); // Distance from center
+    const hue = this.getAngle(x, y); // degrees, clockwise from right
+    const relativeDistance = this.getDistance(x, y); // edge of radius = 1
+    const sat = Math.min(relativeDistance, 1); // Distance from center
     return { h: hue, s: sat };
   }
 
@@ -402,9 +402,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
       if (this.saturationSegments === 1) {
         hs.s = 1;
       } else {
-        var segmentSize = 1 / this.saturationSegments;
-        var saturationStep = 1 / (this.saturationSegments - 1);
-        var calculatedSat = Math.floor(hs.s / segmentSize) * saturationStep;
+        const segmentSize = 1 / this.saturationSegments;
+        const saturationStep = 1 / (this.saturationSegments - 1);
+        const calculatedSat = Math.floor(hs.s / segmentSize) * saturationStep;
         hs.s = Math.min(calculatedSat, 1);
       }
     }
@@ -477,9 +477,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
       hueSegments = hueSegments || 360; // reset 0 segments to 360
       const angleStep = 360 / hueSegments;
       const halfAngleStep = angleStep / 2; // center segments on color
-      for (var angle = 0; angle <= 360; angle += angleStep) {
-        var startAngle = (angle - halfAngleStep) * (Math.PI / 180);
-        var endAngle = (angle + halfAngleStep + 1) * (Math.PI / 180);
+      for (let angle = 0; angle <= 360; angle += angleStep) {
+        const startAngle = (angle - halfAngleStep) * (Math.PI / 180);
+        const endAngle = (angle + halfAngleStep + 1) * (Math.PI / 180);
         context.beginPath();
         context.moveTo(cX, cY);
         context.arc(
@@ -492,7 +492,7 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
         );
         context.closePath();
         // gradient
-        var gradient = context.createRadialGradient(
+        const gradient = context.createRadialGradient(
           cX,
           cY,
           0,
@@ -507,8 +507,8 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
         if (saturationSegments > 0) {
           const ratioStep = 1 / saturationSegments;
           let ratio = 0;
-          for (var stop = 1; stop < saturationSegments; stop += 1) {
-            var prevLighness = lightness;
+          for (let stop = 1; stop < saturationSegments; stop += 1) {
+            const prevLighness = lightness;
             ratio = stop * ratioStep;
             lightness = 100 - 50 * ratio;
             gradient.addColorStop(

src/components/ha-cover-controls.js

@@ -95,15 +95,15 @@ class HaCoverControls extends PolymerElement {
     if (stateObj.state === UNAVAILABLE) {
       return true;
     }
-    var assumedState = stateObj.attributes.assumed_state === true;
+    const assumedState = stateObj.attributes.assumed_state === true;
     return (entityObj.isFullyOpen || entityObj.isOpening) && !assumedState;
   }
 
   computeClosedDisabled(stateObj, entityObj) {
     if (stateObj.state === UNAVAILABLE) {
       return true;
     }
-    var assumedState = stateObj.attributes.assumed_state === true;
+    const assumedState = stateObj.attributes.assumed_state === true;
     return (entityObj.isFullyClosed || entityObj.isClosing) && !assumedState;
   }
 

src/components/ha-cover-tilt-controls.js

@@ -75,15 +75,15 @@ class HaCoverTiltControls extends PolymerElement {
     if (stateObj.state === UNAVAILABLE) {
       return true;
     }
-    var assumedState = stateObj.attributes.assumed_state === true;
+    const assumedState = stateObj.attributes.assumed_state === true;
     return entityObj.isFullyOpenTilt && !assumedState;
   }
 
   computeClosedDisabled(stateObj, entityObj) {
     if (stateObj.state === UNAVAILABLE) {
       return true;
     }
-    var assumedState = stateObj.attributes.assumed_state === true;
+    const assumedState = stateObj.attributes.assumed_state === true;
     return entityObj.isFullyClosedTilt && !assumedState;
   }
 

src/components/ha-service-description.js

@@ -16,9 +16,9 @@ class HaServiceDescription extends PolymerElement {
   }
 
   _getDescription(hass, domain, service) {
-    var domainServices = hass.services[domain];
+    const domainServices = hass.services[domain];
     if (!domainServices) return "";
-    var serviceObject = domainServices[service];
+    const serviceObject = domainServices[service];
     if (!serviceObject) return "";
     return serviceObject.description;
   }

src/components/paper-time-input.js

@@ -322,9 +322,9 @@ export class PaperTimeInput extends PolymerElement {
    * @return {boolean}
    */
   validate() {
-    var valid = true;
+    let valid = true;
     // Validate hour & min fields
-    if (!this.$.hour.validate() | !this.$.min.validate()) {
+    if (!this.$.hour.validate() || !this.$.min.validate()) {
       valid = false;
     }
     // Validate second field

src/dialogs/more-info/controls/more-info-configurator.js

@@ -123,12 +123,12 @@ class MoreInfoConfigurator extends PolymerElement {
   }
 
   fieldChanged(ev) {
-    var el = ev.target;
+    const el = ev.target;
     this.fieldInput[el.name] = el.value;
   }
 
   submitClicked() {
-    var data = {
+    const data = {
       configure_id: this.stateObj.attributes.configure_id,
       fields: this.fieldInput,
     };

src/dialogs/more-info/controls/more-info-cover.js

@@ -97,7 +97,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
   }
 
   computeClassNames(stateObj) {
-    var classes = [
+    const classes = [
       attributeClassNames(stateObj, [
         "current_position",
         "current_tilt_position",

src/dialogs/more-info/controls/more-info-fan.js

@@ -140,8 +140,8 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   speedChanged(ev) {
-    var oldVal = this.stateObj.attributes.speed;
-    var newVal = ev.detail.value;
+    const oldVal = this.stateObj.attributes.speed;
+    const newVal = ev.detail.value;
 
     if (!newVal || oldVal === newVal) return;
 
@@ -152,8 +152,8 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   oscillationToggleChanged(ev) {
-    var oldVal = this.stateObj.attributes.oscillating;
-    var newVal = ev.target.checked;
+    const oldVal = this.stateObj.attributes.oscillating;
+    const newVal = ev.target.checked;
 
     if (oldVal === newVal) return;
 

src/dialogs/more-info/controls/more-info-group.js

@@ -53,11 +53,11 @@ class MoreInfoGroup extends PolymerElement {
   }
 
   computeStates(stateObj, hass) {
-    var states = [];
-    var entIds = stateObj.attributes.entity_id || [];
+    const states = [];
+    const entIds = stateObj.attributes.entity_id || [];
 
-    for (var i = 0; i < entIds.length; i++) {
-      var state = hass.states[entIds[i]];
+    for (let i = 0; i < entIds.length; i++) {
+      const state = hass.states[entIds[i]];
 
       if (state) {
         states.push(state);

src/dialogs/more-info/controls/more-info-input_datetime.js

@@ -78,14 +78,14 @@ class DatetimeInput extends PolymerElement {
     if (stateObj.state === "unknown") {
       return "";
     }
-    var monthFiller;
+    let monthFiller;
     if (stateObj.attributes.month < 10) {
       monthFiller = "0";
     } else {
       monthFiller = "";
     }
 
-    var dayFiller;
+    let dayFiller;
     if (stateObj.attributes.day < 10) {
       dayFiller = "0";
     } else {
@@ -119,15 +119,18 @@ class DatetimeInput extends PolymerElement {
     };
 
     if (this.stateObj.attributes.has_time) {
-      changed |=
+      changed =
+        changed ||
         parseInt(this.selectedMinute) !== this.stateObj.attributes.minute;
-      changed |= parseInt(this.selectedHour) !== this.stateObj.attributes.hour;
+      changed =
+        changed ||
+        parseInt(this.selectedHour) !== this.stateObj.attributes.hour;
       if (this.selectedMinute < 10) {
         minuteFiller = "0";
       } else {
         minuteFiller = "";
       }
-      var timeStr =
+      const timeStr =
         this.selectedHour + ":" + minuteFiller + this.selectedMinute;
       serviceData.time = timeStr;
     }
@@ -144,7 +147,7 @@ class DatetimeInput extends PolymerElement {
         this.stateObj.attributes.day
       );
 
-      changed |= dateValState !== dateValInput;
+      changed = changed || dateValState !== dateValInput;
 
       serviceData.date = this.selectedDate;
     }