Configure eslint properly

.eslintrc.js

@@ -1,14 +1,27 @@
 module.exports = {
-    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-    parserOptions: {
-        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-        sourceType: "module" // Allows for the use of imports
+    "env": {
+        "browser": true,
+        "es2021": true
     },
-    extends: [
-        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "extends": "standard-with-typescript",
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
     ],
-    rules: {
-        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+        "@typescript-eslint/strict-boolean-expressions": "off"
     }
-};
+}

.github/workflows/build.yml → .github/workflows/yarn.yml

@@ -1,10 +1,10 @@
-name: 'Build'
+name: yarn
 
 on: [push, pull_request]
 
 jobs:
   build:
-    name: Test build
+    name: yarn
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -15,3 +15,6 @@ jobs:
         run: |
           yarn install
           yarn build
+      - name: Lint
+        run: |
+          yarn lint

.vscode/extensions.json

@@ -3,7 +3,6 @@
     "github.vscode-pull-request-github",
     "eamodio.gitlens",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
     "bierner.lit-html",
     "runem.lit-plugin",
     "davidanson.vscode-markdownlint",

package.json

@@ -29,14 +29,13 @@
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^5.0.0",
     "@types/luxon": "^3.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "prettier": "^2.4.1",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^39.1.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
     "rollup": "^2.58.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -56,8 +55,7 @@
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",
     "build": "npm run lint && npm run rollup",
-    "lint": "eslint src/*.ts",
-    "rollup": "rollup -c",
-    "prettier": "prettier --write src/*.ts"
+    "lint": "eslint **/*.ts --max-warnings 0",
+    "rollup": "rollup -c"
   }
 }

src/action-handler-directive.ts

@@ -1,197 +1,196 @@
-import { noChange } from 'lit';
-import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive';
+import { noChange } from 'lit'
+import { type AttributePart, directive, Directive, type DirectiveParameters } from 'lit/directive'
 
-import { ActionHandlerDetail, ActionHandlerOptions } from 'custom-card-helpers/dist/types';
-import { fireEvent } from 'custom-card-helpers';
+import { type ActionHandlerDetail, type ActionHandlerOptions } from 'custom-card-helpers/dist/types'
+import { fireEvent } from 'custom-card-helpers'
 
-const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;
+const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0
 
 interface ActionHandler extends HTMLElement {
-  holdTime: number;
-  bind(element: Element, options): void;
+  holdTime: number
+  bind: (element: Element, options) => void
 }
 interface ActionHandlerElement extends HTMLElement {
-  actionHandler?: boolean;
+  actionHandler?: boolean
 }
 
 declare global {
   interface HASSDomEvents {
-    action: ActionHandlerDetail;
+    action: ActionHandlerDetail
   }
 }
 
 class ActionHandler extends HTMLElement implements ActionHandler {
-  public holdTime = 500;
+  public holdTime = 500
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public ripple: any;
+  public ripple: any
 
-  protected timer?: number;
+  protected timer?: number
 
-  protected held = false;
+  protected held = false
 
-  private dblClickTimeout?: number;
+  private dblClickTimeout?: number
 
-  constructor() {
-    super();
-    this.ripple = document.createElement('mwc-ripple');
+  constructor () {
+    super()
+    this.ripple = document.createElement('mwc-ripple')
   }
 
-  public connectedCallback(): void {
+  public connectedCallback (): void {
     Object.assign(this.style, {
       position: 'absolute',
       width: isTouch ? '100px' : '50px',
       height: isTouch ? '100px' : '50px',
       transform: 'translate(-50%, -50%)',
       pointerEvents: 'none',
-      zIndex: '999',
-    });
+      zIndex: '999'
+    })
 
-    this.appendChild(this.ripple);
+    this.appendChild(this.ripple)
     this.ripple.primary = true;
 
     ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach((ev) => {
       document.addEventListener(
         ev,
         () => {
-          clearTimeout(this.timer);
-          this.stopAnimation();
-          this.timer = undefined;
+          clearTimeout(this.timer)
+          this.stopAnimation()
+          this.timer = undefined
         },
-        { passive: true },
-      );
-    });
+        { passive: true }
+      )
+    })
   }
 
-  public bind(element: ActionHandlerElement, options): void {
+  public bind (element: ActionHandlerElement, options): void {
     if (element.actionHandler) {
-      return;
+      return
     }
-    element.actionHandler = true;
+    element.actionHandler = true
 
     element.addEventListener('contextmenu', (ev: Event) => {
-      const e = ev || window.event;
+      const e = ev || window.event
       if (e.preventDefault) {
-        e.preventDefault();
+        e.preventDefault()
       }
       if (e.stopPropagation) {
-        e.stopPropagation();
+        e.stopPropagation()
       }
-      e.cancelBubble = true;
-      e.returnValue = false;
-      return false;
-    });
+      e.cancelBubble = true
+      e.returnValue = false
+      return false
+    })
 
     const start = (ev: Event): void => {
-      this.held = false;
-      let x;
-      let y;
+      this.held = false
+      let x
+      let y
       if ((ev as TouchEvent).touches) {
-        x = (ev as TouchEvent).touches[0].pageX;
-        y = (ev as TouchEvent).touches[0].pageY;
+        x = (ev as TouchEvent).touches[0].pageX
+        y = (ev as TouchEvent).touches[0].pageY
       } else {
-        x = (ev as MouseEvent).pageX;
-        y = (ev as MouseEvent).pageY;
+        x = (ev as MouseEvent).pageX
+        y = (ev as MouseEvent).pageY
       }
 
       this.timer = window.setTimeout(() => {
-        this.startAnimation(x, y);
-        this.held = true;
-      }, this.holdTime);
-    };
+        this.startAnimation(x, y)
+        this.held = true
+      }, this.holdTime)
+    }
 
     const end = (ev: Event): void => {
       // Prevent mouse event if touch event
-      ev.preventDefault();
+      ev.preventDefault()
       if (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined) {
-        return;
+        return
       }
-      clearTimeout(this.timer);
-      this.stopAnimation();
-      this.timer = undefined;
+      clearTimeout(this.timer)
+      this.stopAnimation()
+      this.timer = undefined
       if (this.held) {
-        fireEvent(element, 'action', { action: 'hold' });
+        fireEvent(element, 'action', { action: 'hold' })
       } else if (options.hasDoubleClick) {
         if ((ev.type === 'click' && (ev as MouseEvent).detail < 2) || !this.dblClickTimeout) {
           this.dblClickTimeout = window.setTimeout(() => {
-            this.dblClickTimeout = undefined;
-            fireEvent(element, 'action', { action: 'tap' });
-          }, 250);
+            this.dblClickTimeout = undefined
+            fireEvent(element, 'action', { action: 'tap' })
+          }, 250)
         } else {
-          clearTimeout(this.dblClickTimeout);
-          this.dblClickTimeout = undefined;
-          fireEvent(element, 'action', { action: 'double_tap' });
+          clearTimeout(this.dblClickTimeout)
+          this.dblClickTimeout = undefined
+          fireEvent(element, 'action', { action: 'double_tap' })
         }
       } else {
-        fireEvent(element, 'action', { action: 'tap' });
+        fireEvent(element, 'action', { action: 'tap' })
       }
-    };
+    }
 
     const handleEnter = (ev: KeyboardEvent): void => {
       if (ev.keyCode !== 13) {
-        return;
+        return
       }
-      end(ev);
-    };
+      end(ev)
+    }
 
-    element.addEventListener('touchstart', start, { passive: true });
-    element.addEventListener('touchend', end);
-    element.addEventListener('touchcancel', end);
+    element.addEventListener('touchstart', start, { passive: true })
+    element.addEventListener('touchend', end)
+    element.addEventListener('touchcancel', end)
 
-    element.addEventListener('mousedown', start, { passive: true });
-    element.addEventListener('click', end);
+    element.addEventListener('mousedown', start, { passive: true })
+    element.addEventListener('click', end)
 
-    element.addEventListener('keyup', handleEnter);
+    element.addEventListener('keyup', handleEnter)
   }
 
-  private startAnimation(x: number, y: number): void {
+  private startAnimation (x: number, y: number): void {
     Object.assign(this.style, {
       left: `${x}px`,
       top: `${y}px`,
-      display: null,
-    });
-    this.ripple.disabled = false;
-    this.ripple.active = true;
-    this.ripple.unbounded = true;
+      display: null
+    })
+    this.ripple.disabled = false
+    this.ripple.active = true
+    this.ripple.unbounded = true
   }
 
-  private stopAnimation(): void {
-    this.ripple.active = false;
-    this.ripple.disabled = true;
-    this.style.display = 'none';
+  private stopAnimation (): void {
+    this.ripple.active = false
+    this.ripple.disabled = true
+    this.style.display = 'none'
   }
 }
 
-customElements.define('action-handler-clock-weather', ActionHandler);
+customElements.define('action-handler-clock-weather', ActionHandler)
 
 const getActionHandler = (): ActionHandler => {
-  const body = document.body;
+  const body = document.body
   if (body.querySelector('action-handler-clock-weather')) {
-    return body.querySelector('action-handler-clock-weather') as ActionHandler;
+    return body.querySelector('action-handler-clock-weather') as ActionHandler
   }
 
-  const actionhandler = document.createElement('action-handler-clock-weather');
-  body.appendChild(actionhandler);
+  const actionhandler = document.createElement('action-handler-clock-weather')
+  body.appendChild(actionhandler)
 
-  return actionhandler as ActionHandler;
-};
+  return actionhandler as ActionHandler
+}
 
 export const actionHandlerBind = (element: ActionHandlerElement, options?: ActionHandlerOptions): void => {
-  const actionhandler: ActionHandler = getActionHandler();
+  const actionhandler: ActionHandler = getActionHandler()
   if (!actionhandler) {
-    return;
+    return
   }
-  actionhandler.bind(element, options);
-};
+  actionhandler.bind(element, options)
+}
 
 export const actionHandler = directive(
   class extends Directive {
-    update(part: AttributePart, [options]: DirectiveParameters<this>) {
-      actionHandlerBind(part.element as ActionHandlerElement, options);
-      return noChange;
+    update (part: AttributePart, [options]: DirectiveParameters<this>): undefined {
+      actionHandlerBind(part.element as ActionHandlerElement, options)
+      return noChange
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-    render(_options?: ActionHandlerOptions) {}
-  },
-);
+    render (_options?: ActionHandlerOptions): void {}
+  }
+)