Use same prettier config as Home Assistant Front-end

.prettierrc.js

@@ -1,12 +1,3 @@
 module.exports = {
-    arrowParens: "always",
-    bracketSpacing: true,
-    bracketSameLine: false,
-    endOfLine: "lf",
-    printWidth: 100,
-    semi: true,
-    singleQuote: false,
-    tabWidth: 4,
-    trailingComma: "es5",
-    useTabs: false,
+  trailingComma: "es5",
 };

src/cards/alarm-control-panel-card/alarm-control-panel-card-config.ts

@@ -1,30 +1,47 @@
-import { array, assign, boolean, deprecated, object, optional } from "superstruct";
+import {
+  array,
+  assign,
+  boolean,
+  deprecated,
+  object,
+  optional,
+} from "superstruct";
 import { LovelaceCardConfig } from "../../ha";
-import { ActionsSharedConfig, actionsSharedConfigStruct } from "../../shared/config/actions-config";
 import {
-    AppearanceSharedConfig,
-    appearanceSharedConfigStruct,
+  ActionsSharedConfig,
+  actionsSharedConfigStruct,
+} from "../../shared/config/actions-config";
+import {
+  AppearanceSharedConfig,
+  appearanceSharedConfigStruct,
 } from "../../shared/config/appearance-config";
-import { EntitySharedConfig, entitySharedConfigStruct } from "../../shared/config/entity-config";
+import {
+  EntitySharedConfig,
+  entitySharedConfigStruct,
+} from "../../shared/config/entity-config";
 import { lovelaceCardConfigStruct } from "../../shared/config/lovelace-card-config";
 import { AlarmMode } from "../../ha/data/alarm_control_panel";
 
 export type AlarmControlPanelCardConfig = LovelaceCardConfig &
-    EntitySharedConfig &
-    AppearanceSharedConfig &
-    ActionsSharedConfig & {
-        states?: AlarmMode[];
-    };
+  EntitySharedConfig &
+  AppearanceSharedConfig &
+  ActionsSharedConfig & {
+    states?: AlarmMode[];
+  };
 
 export const alarmControlPanelCardCardConfigStruct = assign(
-    lovelaceCardConfigStruct,
-    assign(entitySharedConfigStruct, appearanceSharedConfigStruct, actionsSharedConfigStruct),
-    object({
-        states: optional(array()),
-        show_keypad: deprecated(optional(boolean()), (_value, ctx) => {
-            console.warn(
-                `🍄 "${ctx.path}" option is deprecated and no longer available. Remove it from your YAML configuration or use the built-in Home Assistant alarm panel card if you want keypad.`
-            );
-        }),
-    })
+  lovelaceCardConfigStruct,
+  assign(
+    entitySharedConfigStruct,
+    appearanceSharedConfigStruct,
+    actionsSharedConfigStruct
+  ),
+  object({
+    states: optional(array()),
+    show_keypad: deprecated(optional(boolean()), (_value, ctx) => {
+      console.warn(
+        `🍄 "${ctx.path}" option is deprecated and no longer available. Remove it from your YAML configuration or use the built-in Home Assistant alarm panel card if you want keypad.`
+      );
+    }),
+  })
 );

src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts

@@ -12,79 +12,103 @@ import { HaFormSchema } from "../../utils/form/ha-form";
 import { UiAction } from "../../utils/form/ha-selector";
 import { loadHaComponents } from "../../utils/loader";
 import {
-    AlarmControlPanelCardConfig,
-    alarmControlPanelCardCardConfigStruct,
+  AlarmControlPanelCardConfig,
+  alarmControlPanelCardCardConfigStruct,
 } from "./alarm-control-panel-card-config";
-import { ALARM_CONTROl_PANEL_CARD_EDITOR_NAME, ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "./const";
+import {
+  ALARM_CONTROl_PANEL_CARD_EDITOR_NAME,
+  ALARM_CONTROl_PANEL_ENTITY_DOMAINS,
+} from "./const";
 
-const actions: UiAction[] = ["more-info", "navigate", "url", "call-service", "assist", "none"];
+const actions: UiAction[] = [
+  "more-info",
+  "navigate",
+  "url",
+  "call-service",
+  "assist",
+  "none",
+];
 
-const states = ["armed_home", "armed_away", "armed_night", "armed_vacation", "armed_custom_bypass"];
+const states = [
+  "armed_home",
+  "armed_away",
+  "armed_night",
+  "armed_vacation",
+  "armed_custom_bypass",
+];
 
 const computeSchema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
-    { name: "entity", selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } } },
-    { name: "name", selector: { text: {} } },
-    { name: "icon", selector: { icon: {} }, context: { icon_entity: "entity" } },
-    ...APPEARANCE_FORM_SCHEMA,
-    {
-        type: "multi_select",
-        name: "states",
-        options: states.map((state) => [
-            state,
-            localize(`ui.card.alarm_control_panel.${state.replace("armed", "arm")}`),
-        ]) as [string, string][],
-    },
-    ...computeActionsFormSchema(actions),
+  {
+    name: "entity",
+    selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } },
+  },
+  { name: "name", selector: { text: {} } },
+  { name: "icon", selector: { icon: {} }, context: { icon_entity: "entity" } },
+  ...APPEARANCE_FORM_SCHEMA,
+  {
+    type: "multi_select",
+    name: "states",
+    options: states.map((state) => [
+      state,
+      localize(`ui.card.alarm_control_panel.${state.replace("armed", "arm")}`),
+    ]) as [string, string][],
+  },
+  ...computeActionsFormSchema(actions),
 ]);
 
 @customElement(ALARM_CONTROl_PANEL_CARD_EDITOR_NAME)
-export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
-    @state() private _config?: AlarmControlPanelCardConfig;
-
-    connectedCallback() {
-        super.connectedCallback();
-        void loadHaComponents();
-    }
-
-    public setConfig(config: AlarmControlPanelCardConfig): void {
-        assert(config, alarmControlPanelCardCardConfigStruct);
-        this._config = config;
-    }
+export class SwitchCardEditor
+  extends MushroomBaseElement
+  implements LovelaceCardEditor
+{
+  @state() private _config?: AlarmControlPanelCardConfig;
 
-    protected render() {
-        if (!this.hass || !this._config) {
-            return nothing;
-        }
+  connectedCallback() {
+    super.connectedCallback();
+    void loadHaComponents();
+  }
 
-        const schema = computeSchema(this.hass!.localize);
+  public setConfig(config: AlarmControlPanelCardConfig): void {
+    assert(config, alarmControlPanelCardCardConfigStruct);
+    this._config = config;
+  }
 
-        return html`
-            <ha-form
-                .hass=${this.hass}
-                .data=${this._config}
-                .schema=${schema}
-                .computeLabel=${this._computeLabel}
-                @value-changed=${this._valueChanged}
-            ></ha-form>
-        `;
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
     }
 
-    private _computeLabel = (schema: HaFormSchema) => {
-        const customLocalize = setupCustomlocalize(this.hass!);
+    const schema = computeSchema(this.hass!.localize);
 
-        if (GENERIC_LABELS.includes(schema.name)) {
-            return customLocalize(`editor.card.generic.${schema.name}`);
-        }
-        if (schema.name === "states") {
-            return this.hass!.localize(
-                "ui.panel.lovelace.editor.card.alarm-panel.available_states"
-            );
-        }
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${schema}
+        .computeLabel=${this._computeLabel}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
 
-        return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
-    };
+  private _computeLabel = (schema: HaFormSchema) => {
+    const customLocalize = setupCustomlocalize(this.hass!);
 
-    private _valueChanged(ev: CustomEvent): void {
-        fireEvent(this, "config-changed", { config: ev.detail.value });
+    if (GENERIC_LABELS.includes(schema.name)) {
+      return customLocalize(`editor.card.generic.${schema.name}`);
+    }
+    if (schema.name === "states") {
+      return this.hass!.localize(
+        "ui.panel.lovelace.editor.card.alarm-panel.available_states"
+      );
     }
+
+    return this.hass!.localize(
+      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+    );
+  };
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
 }