Use prettier-plugin-sort-imports

.prettierrc.js

@@ -0,0 +1,33 @@
+const config = {
+  /**
+   * Enable plugin for automatically sorting of imports
+   */
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
+  importOrderParserPlugins: ["typescript", "decorators-legacy"],
+
+  /**
+   * Custom sorting of imports, first lit stuff, then other third
+   * party libs, then own modules
+   */
+  importOrder: [
+    "^lit$",
+    "^lit/.*$",
+    "^@lit/.*$",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]",
+  ],
+
+  /**
+   * Whether to separate sorting groups (as defined above) with
+   * newline
+   */
+  // importOrderSeparation: true,
+
+  /**
+   * Whether to sort the specifiers on the left hand side of the
+   * import statement
+   */
+  importOrderSortSpecifiers: true,
+};
+
+export default config;

package.json

@@ -59,6 +59,7 @@
     "@storybook/blocks": "^7.6.5",
     "@storybook/web-components": "^7.6.5",
     "@storybook/web-components-vite": "^7.6.5",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -79,7 +80,6 @@
       "plugin:prettier/recommended"
     ]
   },
-  "prettier": {},
   "lint-staged": {
     "**/*.{ts,js}": [
       "eslint --fix"

src/components/Backdrop.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Banner.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";

src/components/Container.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Footer.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/FooterLink.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/Hero.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Icon.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, TemplateResult } from "lit";
+import { LitElement, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/Menu.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";

src/components/MenuAction.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/MenuDropdown.ts

@@ -1,10 +1,10 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";
-import { theme } from "../utils/theme";
 import { isNodeOrChild } from "../utils/dom";
 import { navigateMenuWithKeyboard } from "../utils/menu";
+import { theme } from "../utils/theme";
 import "./Icon";
 
 /**

src/components/MenuDropdownItem.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/Nav.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/NavItem.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";

src/components/Subnav.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Topbar.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";