Add ESLint formatter for sorting imports (#1468)

Author: stevekinney

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'prettier',
   ],
-  plugins: ['svelte3', '@typescript-eslint', 'vitest'],
+  plugins: ['svelte3', '@typescript-eslint', 'vitest', 'import'],
   ignorePatterns: ['*.cjs', 'prism.cjs', '/server'],
   overrides: [
     {
@@ -54,7 +54,7 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/no-unused-vars': [
-      1,
+      'error',
       {
         argsIgnorePattern: '^_',
         varsIgnorePattern: '^_',
@@ -79,5 +79,43 @@ module.exports = {
         ],
       },
     ],
+    'sort-imports': [
+      'error',
+      { ignoreCase: true, ignoreDeclarationSort: true },
+    ],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          ['parent', 'sibling', 'index'],
+        ],
+        pathGroups: [
+          {
+            pattern: 'svelte/**',
+            group: 'external',
+            position: 'before',
+          },
+          { pattern: '$app/**', group: 'external', position: 'after' },
+          { pattern: './$types', group: 'external', position: 'after' },
+          { pattern: '$lib/**', group: 'internal' },
+          {
+            pattern: '$components/**/*.svelte',
+            group: 'internal',
+            position: 'after',
+          },
+          { pattern: './**/*.svelte', group: 'index', position: 'after' },
+        ],
+        pathGroupsExcludedImportTypes: ['svelte'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: false,
+          orderImportKind: 'asc',
+        },
+      },
+    ],
   },
 };

cypress/integration/event-history.spec.js

@@ -3,9 +3,9 @@
 import { formatDistanceToNow } from 'date-fns';
 import * as dateTz from 'date-fns-tz';
 
-import workflowCompletedFixture from '../fixtures/workflow-completed.json';
 import eventsFixtureDescending from '../fixtures/event-history-completed-reverse.json';
 import eventsFixtureAscending from '../fixtures/event-history-completed.json';
+import workflowCompletedFixture from '../fixtures/workflow-completed.json';
 
 const [firstEventInDescendingOrder] = eventsFixtureDescending.history.events;
 

cypress/integration/task-queues.spec.js

@@ -2,8 +2,8 @@
 
 import * as dateTz from 'date-fns-tz';
 
-import wtq from '../fixtures/worker-task-queues.json';
 import atq from '../fixtures/activity-task-queues.json';
+import wtq from '../fixtures/worker-task-queues.json';
 
 describe('Task Queues Page', () => {
   beforeEach(() => {

cypress/integration/workers.spec.js

@@ -2,9 +2,9 @@
 
 import * as dateTz from 'date-fns-tz';
 
-import workflowCompletedFixture from '../fixtures/workflow-completed.json';
-import wtq from '../fixtures/worker-task-queues.json';
 import atq from '../fixtures/activity-task-queues.json';
+import wtq from '../fixtures/worker-task-queues.json';
+import workflowCompletedFixture from '../fixtures/workflow-completed.json';
 
 const { workflowId, runId } =
   workflowCompletedFixture.workflowExecutionInfo.execution;

cypress/integration/workflow-input-and-results.spec.js

@@ -1,13 +1,13 @@
 /// <reference types="cypress" />
 
-import workflowsFixture from '../fixtures/workflows.json';
-import eventsCompletedFixture from '../fixtures/event-history-completed.json';
-import eventsCompletedNullFixture from '../fixtures/event-history-completed-null.json';
-import eventsRunningFixture from '../fixtures/event-history-running.json';
-import eventsFailedFixture from '../fixtures/event-history-failed.json';
 import eventsCanceledFixture from '../fixtures/event-history-canceled.json';
+import eventsCompletedNullFixture from '../fixtures/event-history-completed-null.json';
+import eventsCompletedFixture from '../fixtures/event-history-completed.json';
 import eventsContinuedAsNewFixture from '../fixtures/event-history-continued-as-new.json';
+import eventsFailedFixture from '../fixtures/event-history-failed.json';
+import eventsRunningFixture from '../fixtures/event-history-running.json';
 import eventsTimedOutFixture from '../fixtures/event-history-timed-out.json';
+import workflowsFixture from '../fixtures/workflows.json';
 
 const workflow = workflowsFixture.executions[0];
 const { workflowId, runId } = workflow.execution;

histoire.config.ts

@@ -1,6 +1,7 @@
 import path from 'path';
-import { defaultColors, defineConfig } from 'histoire';
+
 import { HstSvelte as histoire } from '@histoire/plugin-svelte';
+import { defaultColors, defineConfig } from 'histoire';
 
 export default defineConfig({
   plugins: [histoire()],

package.json

@@ -143,6 +143,7 @@
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-playwright": "^0.12.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "eslint-plugin-vitest": "^0.0.34",

plugins/vite-plugin-i18n-locales.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from 'vite';
+
 import { generateLocales } from '../utilities/generate-locales';
 
 type PluginOptions = {

plugins/vite-plugin-temporal-server.ts

@@ -1,10 +1,11 @@
-import { chalk } from 'zx';
 import type { Plugin } from 'vite';
+import type { ViteDevServer } from 'vite';
+import { chalk } from 'zx';
+
 import {
-  type TemporalServer,
   createTemporalServer,
+  type TemporalServer,
 } from '../utilities/temporal-server';
-import type { ViteDevServer } from 'vite';
 
 const { cyan, magenta } = chalk;
 

plugins/vite-plugin-ui-server.ts

@@ -1,7 +1,8 @@
 import type { Plugin } from 'vite';
-import { createUIServer, UIServer } from '../utilities/ui-server';
 import type { ViteDevServer } from 'vite';
 
+import { createUIServer, UIServer } from '../utilities/ui-server';
+
 let uiServer: UIServer;
 
 const shouldSkip = (server: ViteDevServer): boolean => {