Better import ordering with prettier (#48188)

.eslintrc.js

@@ -223,6 +223,7 @@ See https://handbook.sourcegraph.com/community/faq#is-all-of-sourcegraph-open-so
         schema: 'always',
       },
     ],
+    'import/order': 'off',
   },
   overrides: [
     {

.prettierignore

@@ -45,3 +45,7 @@ code-intel-extensions.json
 pnpm-lock.yaml
 node_modules/
 client/web-sveltekit/.svelte-kit
+*.module.scss.d.ts
+
+# Errors when used with @ianvs/prettier-plugin-sort-imports due to TS language API hitting global `eval`
+client/browser/src/types/webextension-polyfill/index.d.ts

client/branded/src/search-ui/components/CodeExcerpt.test.tsx

@@ -7,6 +7,7 @@ import {
     HIGHLIGHTED_FILE_LINES_LONG,
     HIGHLIGHTED_FILE_LINES_SIMPLE,
 } from '@sourcegraph/shared/src/testing/searchTestHelpers'
+
 import '@sourcegraph/shared/src/testing/mockReactVisibilitySensor'
 
 import { CodeExcerpt } from './CodeExcerpt'

client/branded/src/search-ui/components/FileContentSearchResult.test.tsx

@@ -11,7 +11,9 @@ import {
     NOOP_SETTINGS_CASCADE,
     CHUNK_MATCH_RESULT,
 } from '@sourcegraph/shared/src/testing/searchTestHelpers'
+
 import '@sourcegraph/shared/src/testing/mockReactVisibilitySensor'
+
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
 import { FileContentSearchResult } from './FileContentSearchResult'

client/branded/src/search-ui/components/FileMatchChildren.test.tsx

@@ -10,7 +10,9 @@ import {
     NOOP_SETTINGS_CASCADE,
     HIGHLIGHTED_FILE_LINES,
 } from '@sourcegraph/shared/src/testing/searchTestHelpers'
+
 import '@sourcegraph/shared/src/testing/mockReactVisibilitySensor'
+
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
 import { FileMatchChildren } from './FileMatchChildren'

client/branded/src/search-ui/components/index.ts

@@ -1,3 +1,7 @@
+import FileMatchChildrenStyles from './FileMatchChildren.module.scss'
+import SearchResultStyles from './SearchResult.module.scss'
+import SymbolSearchResultStyles from './SymbolSearchResult.module.scss'
+
 export * from './CodeExcerpt'
 export * from './CodeHostIcon'
 export * from './CommitSearchResult'
@@ -15,7 +19,4 @@ export * from './SearchResultStar'
 export * from './SyntaxHighlightedSearchQuery'
 export * from './codeLinkNavigation'
 
-import FileMatchChildrenStyles from './FileMatchChildren.module.scss'
-import SearchResultStyles from './SearchResult.module.scss'
-import SymbolSearchResultStyles from './SymbolSearchResult.module.scss'
 export { SearchResultStyles, FileMatchChildrenStyles, SymbolSearchResultStyles }

client/branded/src/search-ui/input/codemirror/index.ts

@@ -13,6 +13,7 @@ import {
     StandardSuggestionSource,
 } from './completion'
 import { loadingIndicator } from './loading-indicator'
+
 export { tokenAt, tokens } from './parsedQuery'
 export { placeholder } from './placeholder'
 

client/browser/src/shared/code-hosts/phabricator/backend.tsx

@@ -13,9 +13,8 @@ import { addPhabricatorRepoResult, ResolveStagingRevResult } from '../../../grap
 import { isExtension } from '../../context'
 import { resolveRepo } from '../../repo/backend'
 
-import { normalizeRepoName } from './util'
-
 import { RevisionSpec, DiffSpec, BaseDiffSpec } from '.'
+import { normalizeRepoName } from './util'
 
 interface PhabEntity {
     id: string // e.g. "48"

client/browser/src/shared/code-hosts/phabricator/codeHost.ts

@@ -11,11 +11,10 @@ import { CodeHost } from '../shared/codeHost'
 import { CodeView, toCodeViewResolver } from '../shared/codeViews'
 import { ViewResolver } from '../shared/views'
 
+import { convertSpacesToTabs, spacesToTabsAdjustment } from '.'
 import { diffDomFunctions, diffusionDOMFns } from './domFunctions'
 import { resolveDiffFileInfo, resolveDiffusionFileInfo, resolveRevisionFileInfo } from './fileInfo'
 
-import { convertSpacesToTabs, spacesToTabsAdjustment } from '.'
-
 import styles from './codeHost.module.scss'
 
 /**

client/browser/src/shared/code-hosts/phabricator/fileInfo.ts

@@ -5,12 +5,11 @@ import { PlatformContext } from '@sourcegraph/shared/src/platform/context'
 
 import { FileInfo, DiffInfo, BlobInfo } from '../shared/codeHost'
 
+import { PhabricatorMode } from '.'
 import { queryConduitHelper, resolveDiffRevision } from './backend'
 import { getFilepathFromFileForDiff, getFilePathFromFileForRevision } from './scrape'
 import { getPhabricatorState } from './util'
 
-import { PhabricatorMode } from '.'
-
 export const resolveRevisionFileInfo = (
     codeView: HTMLElement,
     requestGraphQL: PlatformContext['requestGraphQL'],

client/browser/src/shared/code-hosts/phabricator/util.tsx

@@ -3,9 +3,8 @@ import { map } from 'rxjs/operators'
 
 import { PlatformContext } from '@sourcegraph/shared/src/platform/context'
 
-import { getRepoDetailsFromCallsign, getRepoDetailsFromRevisionID, QueryConduitHelper } from './backend'
-
 import { ChangeState, DifferentialState, DiffusionState, PhabricatorMode, RevisionState } from '.'
+import { getRepoDetailsFromCallsign, getRepoDetailsFromRevisionID, QueryConduitHelper } from './backend'
 
 const TAG_PATTERN = /r([\dA-z]+)([\da-f]{40})/
 function matchPageTag(): RegExpExecArray | null {

client/browser/src/shared/polyfills.ts

@@ -7,4 +7,5 @@ import '@sourcegraph/shared/src/polyfills'
 // The API is much nicer to use because it supports Promises
 // The polyfill is also very simple.
 import browser from 'webextension-polyfill'
+
 Object.assign(self, { browser })

client/client-api/src/textDocument.ts

@@ -1,6 +1,7 @@
 import { DocumentSelector } from 'sourcegraph'
 
 import { Position } from '@sourcegraph/extension-api-types'
+
 /**
  * The URI scheme for the resources that hold the body of comments (such as comments on a GitHub
  * issue).

client/common/src/errors/utils.ts

@@ -1,4 +1,5 @@
 import { ErrorLike } from './types'
+
 /**
  * Run the passed function and return `undefined` if it throws an error.
  */

client/jetbrains/scripts/react-shim.js

@@ -1,2 +1,3 @@
 import * as React from 'react'
+
 export { React }

client/jetbrains/webview/src/search/App.tsx

@@ -23,6 +23,7 @@ import { useObservable, WildcardThemeContext } from '@sourcegraph/wildcard'
 import { SearchPatternType } from '../graphql-operations'
 import { initializeSourcegraphSettings } from '../sourcegraphSettings'
 
+import { getInstanceURL } from '.'
 import { GlobalKeyboardListeners } from './GlobalKeyboardListeners'
 import { JetBrainsSearchBox } from './input/JetBrainsSearchBox'
 import { saveLastSearch } from './js-to-java-bridge'
@@ -30,8 +31,6 @@ import { SearchResultList } from './results/SearchResultList'
 import { StatusBar } from './StatusBar'
 import { Search } from './types'
 
-import { getInstanceURL } from '.'
-
 import styles from './App.module.scss'
 
 interface Props {

client/jetbrains/webview/src/search/java-to-js-bridge.ts

@@ -1,6 +1,3 @@
-import { indicateFinishedLoading } from './js-to-java-bridge'
-import { PluginConfig, Theme } from './types'
-
 import {
     applyConfig,
     applyTheme,
@@ -10,6 +7,8 @@ import {
     updateVersionAndAuthDataFromServer,
     wasServerAccessSuccessful,
 } from './index'
+import { indicateFinishedLoading } from './js-to-java-bridge'
+import { PluginConfig, Theme } from './types'
 
 export type ActionName = 'themeChanged' | 'pluginSettingsChanged'
 

client/jetbrains/webview/src/search/results/RepoName.tsx

@@ -2,11 +2,12 @@ import classNames from 'classnames'
 
 import { Tooltip, useIsTruncated } from '@sourcegraph/wildcard'
 
+import styles from './RepoName.module.scss'
+
 interface RepoNameProps {
     repoName: string
     suffix?: string
 }
-import styles from './RepoName.module.scss'
 
 export const RepoName: React.FunctionComponent<React.PropsWithChildren<RepoNameProps>> = ({ repoName, suffix }) => {
     /**

client/shared/src/react-shortcuts/ShortcutManager.test.tsx

@@ -4,9 +4,8 @@ import * as sinon from 'sinon'
 
 import { platform } from '../testing/dom-utils'
 
-import { ModifierKey } from './keys'
-
 import { Shortcut, ShortcutProvider } from '.'
+import { ModifierKey } from './keys'
 
 describe('ShortcutManager', () => {
     // We only want to preserve the original implementation, not call it as a

client/shared/src/types/puppeteer-firefox/index.d.ts

@@ -1,2 +1,3 @@
 import puppeteer from 'puppeteer'
+
 export default puppeteer

client/storybook/src/preview.ts

@@ -1,4 +1,5 @@
 import 'focus-visible'
+
 import { ReactElement } from 'react'
 
 import { configureActions } from '@storybook/addon-actions'

client/vscode/scripts/publish.ts

@@ -6,6 +6,7 @@ import fs from 'fs'
 import * as semver from 'semver'
 
 import { version } from '../package.json'
+
 /**
  * This script is used by the CI to publish the extension to the VS Code Marketplace
  * It is triggered when a commit has been made to the vsce release branch

client/vscode/scripts/release.ts

@@ -7,6 +7,7 @@ import fs from 'fs'
 import * as semver from 'semver'
 
 import { version } from '../package.json'
+
 /**
  * This script updates the version number and changelog for release purpose
  */

client/vscode/src/commands/browserActionsNode.ts

@@ -2,6 +2,7 @@ import vscode, { env } from 'vscode'
 
 import { getSourcegraphFileUrl, repoInfo } from './git-helpers'
 import { generateSourcegraphBlobLink } from './initialize'
+
 /**
  * Open active file in the browser on the configured Sourcegraph instance.
  */

client/vscode/src/extension.ts

@@ -27,6 +27,7 @@ import { watchUninstall } from './settings/uninstall'
 import { createVSCEStateMachine, VSCEQueryState } from './state'
 import { copySourcegraphLinks, focusSearchPanel, openSourcegraphLinks, registerWebviews } from './webview/commands'
 import { scretTokenKey, SourcegraphAuthActions, SourcegraphAuthProvider } from './webview/platform/AuthProvider'
+
 /**
  * See CONTRIBUTING docs for the Architecture Diagram
  */

client/vscode/src/settings/recommendations.ts

@@ -8,6 +8,7 @@
 import * as vscode from 'vscode'
 
 import { DISMISS_WORKSPACERECS_CTA_KEY, LocalStorageService } from './LocalStorageService'
+
 /**
  * Ask if user wants to add Sourcegraph to their Workspace Recommendations list by displaying built-in popup
  * It will not show popup if the user already has Sourcegraph added to their recommendations list

client/vscode/src/webview/platform/context.ts

@@ -12,7 +12,8 @@ import { PlatformContext } from '@sourcegraph/shared/src/platform/context'
 import { ExtensionManifest } from '@sourcegraph/shared/src/schema/extensionSchema'
 import { SettingsCascadeOrError } from '@sourcegraph/shared/src/settings/settings'
 
-import extensions from '../../../code-intel-extensions.json' // list of extensionID generated by build-inline-extensions script
+// list of extensionID generated by build-inline-extensions script
+import extensions from '../../../code-intel-extensions.json'
 import { ExtensionCoreAPI } from '../../contract'
 
 import { EventLogger } from './EventLogger'

client/vscode/src/webview/search-panel/SearchHomeView.tsx

@@ -22,6 +22,7 @@ import { BrandHeader } from './components/BrandHeader'
 import { HomeFooter } from './components/HomeFooter'
 
 import styles from './index.module.scss'
+
 export interface SearchHomeViewProps extends WebviewPageProps {
     context: SearchHomeState['context']
 }

client/vscode/src/webview/search-panel/alias/CommitSearchResult.tsx

@@ -10,6 +10,7 @@ import { CommitMatch, getCommitMatchUrl } from '@sourcegraph/shared/src/search/s
 import { Button, Code } from '@sourcegraph/wildcard'
 
 import { useOpenSearchResultsContext } from '../MatchHandlersContext'
+
 interface Props extends PlatformContextProps<'requestGraphQL'> {
     result: CommitMatch
     repoName: string

client/vscode/src/webview/search-panel/alias/RepoSearchResult.tsx

@@ -10,6 +10,7 @@ import { getRepoMatchLabel, RepositoryMatch } from '@sourcegraph/shared/src/sear
 import { Button, Icon } from '@sourcegraph/wildcard'
 
 import { useOpenSearchResultsContext } from '../MatchHandlersContext'
+
 export interface RepoSearchResultProps {
     result: RepositoryMatch
     repoName: string

client/vscode/src/webview/search-panel/alias/fetchSearchContext.ts

@@ -3,6 +3,7 @@ import { map } from 'rxjs/operators'
 
 import { gql, dataOrThrowErrors } from '@sourcegraph/http-client'
 import { PlatformContext } from '@sourcegraph/shared/src/platform/context'
+
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] }
 export type Maybe<T> = T | null
 

client/vscode/src/webview/sidebars/auth/AuthSidebarView.tsx

@@ -19,6 +19,7 @@ import {
 import { WebviewPageProps } from '../../platform/context'
 
 import styles from './AuthSidebarView.module.scss'
+
 interface AuthSidebarViewProps
     extends Pick<WebviewPageProps, 'extensionCoreAPI' | 'platformContext' | 'instanceURL' | 'authenticatedUser'> {}
 

client/web-sveltekit/server.js

@@ -1,6 +1,7 @@
 // Simple express server to serve a static production build of the prototype
 import express from 'express'
 import { createProxyMiddleware } from 'http-proxy-middleware'
+
 const app = express()
 const port = 4173
 

client/web-sveltekit/src/lib/loader/blob.ts

@@ -1,8 +1,6 @@
 import type { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 
-export { fetchHighlightedFileLineRanges } from '@sourcegraph/shared/src/backend/file'
-
 import { memoizeObservable } from '$lib/common'
 import type {
     BlobFileFields,
@@ -16,6 +14,8 @@ import { dataOrThrowErrors, gql } from '$lib/http-client'
 import { makeRepoURI } from '$lib/shared'
 import { requestGraphQL } from '$lib/web'
 
+export { fetchHighlightedFileLineRanges } from '@sourcegraph/shared/src/backend/file'
+
 interface FetchBlobOptions {
     repoName: string
     revision: string

client/web-sveltekit/src/lib/react-interop.tsx

@@ -5,11 +5,11 @@ import type { Navigation } from '@sveltejs/kit'
 import { RouterProvider, UNSAFE_enhanceManualRouteObjects, type RouteObject } from 'react-router-dom'
 import { RouterLink, setLinkComponent } from 'wildcard/src'
 
-import { WildcardThemeContext, type WildcardTheme } from './wildcard'
-
 import { goto } from '$app/navigation'
 import { navigating } from '$app/stores'
 
+import { WildcardThemeContext, type WildcardTheme } from './wildcard'
+
 setLinkComponent(RouterLink)
 
 const WILDCARD_THEME: WildcardTheme = {

client/web-sveltekit/src/lib/temporarySettings.ts

@@ -1,11 +1,11 @@
 import { writable, type Writable, derived, type Readable } from 'svelte/store'
 
-import { getStores } from './stores'
-import type { LoadingData } from './utils'
-
 import { logger } from '$lib/common'
 import { type TemporarySettings, TemporarySettingsStorage, migrateLocalStorageToTemporarySettings } from '$lib/shared'
 
+import { getStores } from './stores'
+import type { LoadingData } from './utils'
+
 const loggedOutUserStore = new TemporarySettingsStorage(null, false)
 
 export function createTemporarySettingsStorage(storage = loggedOutUserStore): Writable<TemporarySettingsStorage> {

client/web-sveltekit/src/routes/(enterprise)/+layout.ts

@@ -1,9 +1,9 @@
 import { error } from '@sveltejs/kit'
 
-import type { LayoutLoad } from './$types'
-
 import { PUBLIC_SG_ENTERPRISE } from '$env/static/public'
 
+import type { LayoutLoad } from './$types'
+
 export const load: LayoutLoad = () => {
     // Example for how we could prevent access to all enterprese specific routes.
     // It's not quite the same as not having the routes at all and have the

client/web-sveltekit/src/routes/+layout.ts

@@ -1,8 +1,6 @@
 import { from } from 'rxjs'
 import { switchMap, take } from 'rxjs/operators'
 
-import type { LayoutLoad } from './$types'
-
 import { browser } from '$app/environment'
 import { createPlatformContext } from '$lib/context'
 import type { CurrentAuthStateResult } from '$lib/graphql/shared'
@@ -10,6 +8,8 @@ import { getDocumentNode } from '$lib/http-client'
 import { currentAuthStateQuery } from '$lib/loader/auth'
 import { getWebGraphQLClient } from '$lib/web'
 
+import type { LayoutLoad } from './$types'
+
 // Disable server side rendering for the whole app
 export const ssr = false
 export const prerender = false

client/web-sveltekit/src/routes/[...repo]/(code)/+layout.ts

@@ -2,13 +2,13 @@ import { dirname } from 'path'
 
 import { catchError } from 'rxjs/operators'
 
-import type { LayoutLoad } from './$types'
-
 import { asError, isErrorLike, type ErrorLike } from '$lib/common'
 import { fetchTreeEntries } from '$lib/loader/repo'
 import { asStore } from '$lib/utils'
 import { requestGraphQL } from '$lib/web'
 
+import type { LayoutLoad } from './$types'
+
 export const load: LayoutLoad = ({ parent, params }) => ({
     treeEntries: asStore(
         parent().then(({ resolvedRevision, repoName, revision }) =>

client/web-sveltekit/src/routes/[...repo]/(code)/+page.ts

@@ -1,8 +1,8 @@
-import type { PageLoad } from './$types'
-
 import { fetchCommits } from '$lib/loader/commits'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ parent }) => ({
     commits: asStore(
         parent()

client/web-sveltekit/src/routes/[...repo]/(code)/-/blob/[...path]/+page.ts

@@ -1,11 +1,11 @@
 import { map } from 'rxjs/operators'
 
-import type { PageLoad } from './$types'
-
 import { fetchHighlight, fetchBlobPlaintext } from '$lib/loader/blob'
 import { parseRepoRevision } from '$lib/shared'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ params }) => {
     const { repoName, revision } = parseRepoRevision(params.repo)
 

client/web-sveltekit/src/routes/[...repo]/(code)/-/tree/[...path]/+page.ts

@@ -1,12 +1,12 @@
 import { catchError } from 'rxjs/operators'
 
-import type { PageLoad } from './$types'
-
 import { asError, isErrorLike, type ErrorLike } from '$lib/common'
 import { fetchTreeEntries } from '$lib/loader/repo'
 import { asStore } from '$lib/utils'
 import { requestGraphQL } from '$lib/web'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ params, parent }) => ({
     treeEntries: asStore(
         parent().then(({ resolvedRevision, revision, repoName }) =>

client/web-sveltekit/src/routes/[...repo]/+layout.ts

@@ -1,12 +1,12 @@
 import { NEVER, of } from 'rxjs'
 import { catchError } from 'rxjs/operators'
 
-import type { LayoutLoad } from './$types'
-
 import { asError, encodeURIPathComponent, type ErrorLike } from '$lib/common'
 import { resolveRepoRevision } from '$lib/loader/repo'
 import { isCloneInProgressErrorLike, isRepoSeeOtherErrorLike, parseRepoRevision } from '$lib/shared'
 
+import type { LayoutLoad } from './$types'
+
 export const load: LayoutLoad = ({ params }) => {
     const { repoName, revision } = parseRepoRevision(params.repo)
 

client/web-sveltekit/src/routes/[...repo]/-/branches/+page.ts

@@ -1,9 +1,9 @@
-import type { PageLoad } from './$types'
-
 import { isErrorLike } from '$lib/common'
 import { queryGitBranchesOverview } from '$lib/loader/repo'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ parent }) => ({
     branches: asStore(
         parent().then(({ resolvedRevision }) =>

client/web-sveltekit/src/routes/[...repo]/-/branches/all/+page.ts

@@ -1,10 +1,10 @@
-import type { PageLoad } from './$types'
-
 import { isErrorLike } from '$lib/common'
 import { GitRefType } from '$lib/graphql-operations'
 import { queryGitReferences } from '$lib/loader/repo'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ parent }) => ({
     branches: asStore(
         parent().then(({ resolvedRevision }) =>

client/web-sveltekit/src/routes/[...repo]/-/commit/[...revspec]/+page.ts

@@ -1,9 +1,9 @@
-import type { PageLoad } from './$types'
-
 import { isErrorLike } from '$lib/common'
 import { fetchRepoCommit, queryRepositoryComparisonFileDiffs } from '$lib/loader/commits'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ parent, params }) => {
     const commit = parent().then(({ resolvedRevision }) => {
         if (!isErrorLike(resolvedRevision)) {

client/web-sveltekit/src/routes/[...repo]/-/commits/+page.ts

@@ -1,8 +1,8 @@
-import type { PageLoad } from './$types'
-
 import { fetchCommits } from '$lib/loader/commits'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ parent }) => ({
     commits: asStore(
         parent()

client/web-sveltekit/src/routes/[...repo]/-/stats/contributors/+page.ts

@@ -1,13 +1,13 @@
 import { map } from 'rxjs/operators'
 
-import type { PageLoad } from './$types'
-
 import { isErrorLike } from '$lib/common'
 import type { PagedRepositoryContributorsResult, PagedRepositoryContributorsVariables } from '$lib/graphql-operations'
 import { CONTRIBUTORS_QUERY } from '$lib/loader/repo'
 import { getPaginationParams } from '$lib/Paginator.svelte'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 const pageSize = 20
 
 const emptyPage: Extract<PagedRepositoryContributorsResult['node'], { __typename: 'Repository' }>['contributors'] = {

client/web-sveltekit/src/routes/[...repo]/-/tags/+page.ts

@@ -1,10 +1,10 @@
-import type { PageLoad } from './$types'
-
 import { isErrorLike } from '$lib/common'
 import { GitRefType } from '$lib/graphql-operations'
 import { queryGitReferences } from '$lib/loader/repo'
 import { asStore } from '$lib/utils'
 
+import type { PageLoad } from './$types'
+
 export const load: PageLoad = ({ parent }) => ({
     tags: asStore(
         parent().then(({ resolvedRevision }) =>

client/web-sveltekit/src/routes/search/+page.ts

@@ -2,8 +2,6 @@ import { BehaviorSubject, merge, Observable, of } from 'rxjs'
 import { shareReplay } from 'rxjs/operators'
 import { get } from 'svelte/store'
 
-import type { PageLoad } from './$types'
-
 import { navigating } from '$app/stores'
 import { SearchPatternType } from '$lib/graphql-operations'
 import {
@@ -18,6 +16,8 @@ import {
 } from '$lib/shared'
 import { parseSearchURL } from '$lib/web'
 
+import type { PageLoad } from './$types'
+
 const cache: Record<string, Observable<AggregateStreamingSearchResults | undefined>> = {}
 
 export const load: PageLoad = ({ url, depends }) => {

client/web/src/OpenSourceWebApp.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 
 import './SourcegraphWebApp.scss'
+
 import { LegacySourcegraphWebApp } from './LegacySourcegraphWebApp'
 import { orgAreaHeaderNavItems } from './org/area/navitems'
 import { orgAreaRoutes } from './org/area/routes'

client/web/src/api/ApiConsole.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
-import * as _graphiqlModule from 'graphiql' // type only
+// type only
+import * as _graphiqlModule from 'graphiql'
 import * as H from 'history'
 import { useNavigate, useLocation, type NavigateFunction } from 'react-router-dom'
 import { from as fromPromise, Subject, Subscription } from 'rxjs'

client/web/src/codeintel/ReferencesPanel.test.tsx

@@ -3,7 +3,9 @@ import { createPath } from 'react-router-dom'
 
 import { SettingsProvider } from '@sourcegraph/shared/src/settings/settings'
 import { MockedTestProvider, waitForNextApolloResponse } from '@sourcegraph/shared/src/testing/apollo'
+
 import '@sourcegraph/shared/src/testing/mockReactVisibilitySensor'
+
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
 import { ReferencesPanel } from './ReferencesPanel'

client/web/src/codeintel/ReferencesPanel.tsx

@@ -65,6 +65,7 @@ import * as BlobAPI from '../repo/blob/use-blob-store'
 import { HoverThresholdProps } from '../repo/RepoContainer'
 import { parseBrowserRepoURL } from '../util/url'
 
+import { CodeIntelligenceProps } from '.'
 import { Location, LocationGroup, locationGroupQuality, buildRepoLocationGroups, RepoLocationGroup } from './location'
 import { FETCH_HIGHLIGHTED_BLOB } from './ReferencesPanelQueries'
 import { newSettingsGetter } from './settings'
@@ -72,8 +73,6 @@ import { findSearchToken } from './token'
 import { useRepoAndBlob } from './useRepoAndBlob'
 import { isDefined } from './util/helpers'
 
-import { CodeIntelligenceProps } from '.'
-
 import styles from './ReferencesPanel.module.scss'
 
 type Token = HoveredToken & RepoSpec & RevisionSpec & FileSpec & ResolvedRevisionSpec

client/web/src/codeintel/useRepoAndBlob.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@sourcegraph/http-client'
 
 import { ResolveRepoAndRevisionResult, ResolveRepoAndRevisionVariables } from '../graphql-operations'
 
-import { RESOLVE_REPO_REVISION_BLOB_QUERY as RESOLVE_REPO_REVISION_BLOB_QUERY } from './ReferencesPanelQueries'
+import { RESOLVE_REPO_REVISION_BLOB_QUERY } from './ReferencesPanelQueries'
 
 interface RepoAndBlob {
     isFork: boolean

client/web/src/components/externalServices/ExternalServiceCard.tsx

@@ -8,6 +8,7 @@ import { Icon, Link, H3, Text, Tooltip, Badge, ProductStatusBadge } from '@sourc
 import { AddExternalServiceOptions } from './externalServices'
 
 import styles from './ExternalServiceCard.module.scss'
+
 interface ExternalServiceCardProps extends AddExternalServiceOptions {
     to?: string
 

client/web/src/components/externalServices/ExternalServiceForm.test.tsx

@@ -1,7 +1,3 @@
-jest.mock('../../settings/DynamicallyImportedMonacoSettingsEditor', () => ({
-    DynamicallyImportedMonacoSettingsEditor: () => 'DynamicallyImportedMonacoSettingsEditor',
-}))
-
 import * as H from 'history'
 import { noop } from 'rxjs'
 
@@ -12,6 +8,10 @@ import { ExternalServiceKind } from '../../graphql-operations'
 
 import { ExternalServiceForm } from './ExternalServiceForm'
 
+jest.mock('../../settings/DynamicallyImportedMonacoSettingsEditor', () => ({
+    DynamicallyImportedMonacoSettingsEditor: () => 'DynamicallyImportedMonacoSettingsEditor',
+}))
+
 describe('ExternalServiceForm', () => {
     const baseProps = {
         history: H.createMemoryHistory(),

client/web/src/enterprise/batches/batch-spec/edit/editor/MonacoBatchSpecEditor.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { cloneDeep } from 'lodash'
 // eslint-disable-next-line import/order
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+
 import 'monaco-yaml'
 
 import { Subject, Subscription } from 'rxjs'

client/web/src/enterprise/insights/pages/dashboards/creation/InsightsDashboardCreationPage.tsx

@@ -9,7 +9,6 @@ import { PageHeader, Container, Button, LoadingSpinner, useObservable, Link, Too
 import { LoaderButton } from '../../../../../components/LoaderButton'
 import { PageTitle } from '../../../../../components/PageTitle'
 import { CodeInsightsIcon, CodeInsightsPage } from '../../../components'
-import {} from '../../../components/code-insights-page/CodeInsightsPage'
 import { CodeInsightsBackendContext } from '../../../core'
 import { useUiFeatures } from '../../../hooks'
 

client/web/src/enterprise/main.tsx

@@ -3,7 +3,9 @@
 // Order is important here
 // Don't remove the empty lines between these imports
 
+// prettier-ignore-start
 import '@sourcegraph/shared/src/polyfills'
+// prettier-ignore-end
 
 import '../initBuildInfo'
 import '../monitoring/initMonitoring'

client/web/src/main.tsx

@@ -3,7 +3,9 @@
 // Order is important here
 // Don't remove the empty lines between these imports
 
+// prettier-ignore-start
 import '@sourcegraph/shared/src/polyfills'
+// prettier-ignore-end
 
 import './initBuildInfo'
 import './monitoring/initMonitoring'

client/web/src/nav/GlobalNavbar.tsx

@@ -38,12 +38,11 @@ import { AccessRequestsGlobalNavItem } from '../site-admin/AccessRequestsPage/Ac
 import { useNavbarQueryState } from '../stores'
 import { eventLogger } from '../tracking/eventLogger'
 
+import { NavGroup, NavItem, NavBar, NavLink, NavActions, NavAction } from '.'
 import { NavDropdown, NavDropdownItem } from './NavBar/NavDropdown'
 import { StatusMessagesNavItem } from './StatusMessagesNavItem'
 import { UserNavItem } from './UserNavItem'
 
-import { NavGroup, NavItem, NavBar, NavLink, NavActions, NavAction } from '.'
-
 import styles from './GlobalNavbar.module.scss'
 
 export interface GlobalNavbarProps

client/web/src/notebooks/notebook/NotebookComponent.tsx

@@ -24,12 +24,11 @@ import { NotebookMarkdownBlock } from '../blocks/markdown/NotebookMarkdownBlock'
 import { NotebookQueryBlock } from '../blocks/query/NotebookQueryBlock'
 import { NotebookSymbolBlock } from '../blocks/symbol/NotebookSymbolBlock'
 
+import { Notebook, CopyNotebookProps } from '.'
 import { NotebookCommandPaletteInput } from './NotebookCommandPaletteInput'
 import { NotebookOutline } from './NotebookOutline'
 import { focusBlockElement, useNotebookEventHandlers } from './useNotebookEventHandlers'
 
-import { Notebook, CopyNotebookProps } from '.'
-
 import styles from './NotebookComponent.module.scss'
 
 export interface NotebookComponentProps

client/web/src/notebooks/notebookPage/NotebookPage.tsx

@@ -51,6 +51,7 @@ import { NotebookPageHeaderActions } from './NotebookPageHeaderActions'
 import { NotebookTitle } from './NotebookTitle'
 
 import styles from './NotebookPage.module.scss'
+
 interface NotebookPageProps
     extends SearchStreamingProps,
         TelemetryProps,

client/web/src/regression/util/settings.ts

@@ -4,6 +4,7 @@ import { SettingsEdit } from '../../graphql-operations'
 
 import { getUser } from './api'
 import { GraphQLClient } from './GraphQlClient'
+
 /**
  * Applies an edit to the user settings for the given username.
  */

client/web/src/repo/actions/GoToCodeHostAction.tsx

@@ -11,7 +11,8 @@ import { catchError } from 'rxjs/operators'
 import { asError, ErrorLike, isErrorLike, logger } from '@sourcegraph/common'
 import { Position, Range } from '@sourcegraph/extension-api-types'
 import { SimpleActionItem } from '@sourcegraph/shared/src/actions/SimpleActionItem'
-import { HelixSwarmIcon, PhabricatorIcon } from '@sourcegraph/shared/src/components/icons' // TODO: Switch mdi icon
+// TODO: Switch mdi icon
+import { HelixSwarmIcon, PhabricatorIcon } from '@sourcegraph/shared/src/components/icons'
 import { FileSpec, RevisionSpec } from '@sourcegraph/shared/src/util/url'
 import { ButtonLinkProps, Icon, Link, Tooltip, useObservable } from '@sourcegraph/wildcard'
 

client/web/src/repo/blob/codemirror/hovercard.tsx

@@ -10,11 +10,10 @@ import { UIRangeSpec } from '@sourcegraph/shared/src/util/url'
 import { WebHoverOverlay, WebHoverOverlayProps } from '../../../components/WebHoverOverlay'
 import { updateBrowserHistoryIfChanged, BlobPropsFacet } from '../CodeMirrorBlob'
 
+import { blobPropsFacet } from './index'
 import { CodeMirrorContainer } from './react-interop'
 import { zeroToOneBasedPosition } from './utils'
 
-import { blobPropsFacet } from './index'
-
 type UIRange = UIRangeSpec['range']
 
 /**

client/web/src/repo/blob/codemirror/linenumbers.ts

@@ -24,9 +24,8 @@ import classNames from 'classnames'
 
 import { toPrettyBlobURL } from '@sourcegraph/shared/src/util/url'
 
-import { isValidLineRange, MOUSE_MAIN_BUTTON } from './utils'
-
 import { blobPropsFacet } from './index'
+import { isValidLineRange, MOUSE_MAIN_BUTTON } from './utils'
 
 /**
  * Represents the currently selected line range. null means no lines are

client/web/src/repo/blob/codemirror/search.tsx

@@ -30,9 +30,8 @@ import { Button, Icon, Input, Label, Text, Tooltip } from '@sourcegraph/wildcard
 import { Keybindings } from '../../../components/KeyboardShortcutsHelp/KeyboardShortcutsHelp'
 import { createElement } from '../../../util/dom'
 
-import { CodeMirrorContainer } from './react-interop'
-
 import { blobPropsFacet } from '.'
+import { CodeMirrorContainer } from './react-interop'
 
 const searchKeybinding = <Keybindings keybindings={[{ held: ['Mod'], ordered: ['F'] }]} />
 

client/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
-import * as _monaco from 'monaco-editor' // type only
+// type only
+import * as _monaco from 'monaco-editor'
 import { Subscription } from 'rxjs'
 
 import { logger } from '@sourcegraph/common'

client/web/src/site-admin/analytics/AnalyticsUsersPage/AnalyticsUsersPage.story.tsx

@@ -7,9 +7,8 @@ import { MockedTestProvider } from '@sourcegraph/shared/src/testing/apollo'
 import { WebStory } from '../../../components/WebStory'
 import { UsersStatisticsResult } from '../../../graphql-operations'
 
-import { USERS_STATISTICS } from './queries'
-
 import { AnalyticsUsersPage } from './index'
+import { USERS_STATISTICS } from './queries'
 
 const decorator: DecoratorFn = story => <WebStory>{() => <div className="p-3 container">{story()}</div>}</WebStory>
 

client/web/src/user/settings/aboutOrganization/AboutOrganizationPage.tsx

@@ -7,6 +7,7 @@ import { PageTitle } from '../../../components/PageTitle'
 import { SelfHostedCta } from '../../../components/SelfHostedCta'
 
 import styles from './AboutOrganizationPage.module.scss'
+
 interface AboutOrganizationPageProps extends TelemetryProps {}
 
 export const AboutOrganizationPage: React.FunctionComponent<React.PropsWithChildren<AboutOrganizationPageProps>> = ({

client/web/src/user/settings/auth/ExternalAccountsSignIn.tsx

@@ -11,6 +11,7 @@ import { ExternalAccount } from './ExternalAccount'
 import { AccountByServiceID, UserExternalAccount } from './UserSettingsSecurityPage'
 
 import styles from './ExternalAccountsSignIn.module.scss'
+
 export interface NormalizedExternalAccount {
     name: string
     icon: React.ComponentType<React.PropsWithChildren<{ className?: string }>>

client/wildcard/src/components/Alert/Alert.story.tsx

@@ -4,16 +4,16 @@ import { action } from '@storybook/addon-actions'
 import { Story, Meta } from '@storybook/react'
 import classNames from 'classnames'
 import { flow } from 'lodash'
+
 import 'storybook-addon-designs'
 
 import { H1, H4, Text } from '..'
 import { BrandedStory } from '../../stories/BrandedStory'
 
+import { AlertLink } from '.'
 import { Alert } from './Alert'
 import { ALERT_VARIANTS } from './constants'
 
-import { AlertLink } from '.'
-
 const preventDefault = <E extends React.SyntheticEvent>(event: E): E => {
     event.preventDefault()
     return event

client/wildcard/src/components/Badge/Badge.story.tsx

@@ -3,9 +3,8 @@ import { Meta } from '@storybook/react'
 import { H1, H2, Link, Text } from '..'
 import { BrandedStory } from '../../stories/BrandedStory'
 
-import { BADGE_VARIANTS } from './constants'
-
 import { Badge } from '.'
+import { BADGE_VARIANTS } from './constants'
 
 const config: Meta = {
     title: 'wildcard/Badge',

client/wildcard/src/components/Button/story/ButtonVariants.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { startCase } from 'lodash'
+
 import 'storybook-addon-designs'
 
 import { Icon } from '../../Icon'

client/wildcard/src/components/NavMenu/NavMenu.test.tsx

@@ -4,9 +4,8 @@ import sinon from 'sinon'
 
 import { AnchorLink } from '../Link'
 
-import { NavMenuSectionProps } from './NavMenu'
-
 import { NavMenu } from '.'
+import { NavMenuSectionProps } from './NavMenu'
 
 describe('<NavMenu />', () => {
     it('Should render Menu Items Correctly', () => {

client/wildcard/src/components/Tree/react-accessible-treeview/index.tsx

@@ -9,8 +9,11 @@
  *  - Apply fix from https://github.com/dgreene1/react-accessible-treeview/pull/81
  *  - Remove PropTypes API
  */
-import cx from 'classnames'
+
 import React, { useEffect, useReducer, useRef } from 'react'
+
+import cx from 'classnames'
+
 import {
     composeHandlers,
     difference,

client/wildcard/src/components/Tree/react-accessible-treeview/utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable unicorn/no-abusive-eslint-disable */
 /* eslint-disable */
 import { useEffect, useRef } from 'react'
+
 import { INode, INodeRef } from '.'
 
 export type EventCallback = <T, E>(event: React.MouseEvent<T, E> | React.KeyboardEvent<T>) => void

client/wildcard/src/components/Typography/Typography.story.tsx

@@ -3,11 +3,10 @@ import { DecoratorFn, Meta, Story } from '@storybook/react'
 import { BrandedStory } from '../../stories/BrandedStory'
 import { Link } from '../Link'
 
+import { Code, Label, H1, H2, H3, H4, H5, H6, Text } from '.'
 import { TYPOGRAPHY_ALIGNMENTS, TYPOGRAPHY_MODES } from './constants'
 import { Heading } from './Heading'
 
-import { Code, Label, H1, H2, H3, H4, H5, H6, Text } from '.'
-
 const decorator: DecoratorFn = story => (
     <BrandedStory>{() => <div className="container mt-3">{story()}</div>}</BrandedStory>
 )

client/wildcard/src/global-styles/GlobalStylesStory/FormFieldVariants/FormFieldVariants.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 
 import { Checkbox, RadioButton, Select, TextArea, Input } from '../../../components'
+
 import 'storybook-addon-designs'
 
 import styles from './FormFieldVariants.module.scss'

client/wildcard/src/global-styles/GlobalStylesStory/GlobalStyles.story.tsx

@@ -4,6 +4,7 @@
 // customizations.
 import { action } from '@storybook/addon-actions'
 import { DecoratorFn, Meta, Story } from '@storybook/react'
+
 import 'storybook-addon-designs'
 
 import { highlightCodeSafe, registerHighlightContributions } from '@sourcegraph/common'

package.json

@@ -106,6 +106,7 @@
     "@graphql-codegen/typescript": "2.8.5",
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.2.6",
     "@graphql-codegen/typescript-operations": "2.5.10",
+    "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@jest/types": "^28.1.0",
     "@lhci/cli": "0.8.1",

pnpm-lock.yaml

@@ -40,6 +40,7 @@ importers:
       '@graphql-codegen/typescript': 2.8.5
       '@graphql-codegen/typescript-apollo-client-helpers': ^2.2.6
       '@graphql-codegen/typescript-operations': 2.5.10
+      '@ianvs/prettier-plugin-sort-imports': ^3.7.1
       '@istanbuljs/nyc-config-typescript': ^1.0.1
       '@jest/types': ^28.1.0
       '@lezer/common': ^1.0.0
@@ -558,6 +559,7 @@ importers:
       '@graphql-codegen/typescript': 2.8.5_graphql@15.4.0
       '@graphql-codegen/typescript-apollo-client-helpers': 2.2.6_graphql@15.4.0
       '@graphql-codegen/typescript-operations': 2.5.10_graphql@15.4.0
+      '@ianvs/prettier-plugin-sort-imports': 3.7.1_prettier@2.8.1
       '@istanbuljs/nyc-config-typescript': 1.0.1_5uavie64mloq3rg6hzeolarrmy
       '@jest/types': 28.1.3
       '@lhci/cli': 0.8.1
@@ -4005,6 +4007,28 @@ packages:
   /@humanwhocodes/object-schema/1.2.1:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
 
+  /@ianvs/prettier-plugin-sort-imports/3.7.1_prettier@2.8.1:
+    resolution: {integrity: sha512-XDnBUUruJY9KgNd7T2ZHnVPWo5B9NzVDCLEMm7HjXTA3rTtMg5Q46gYRjLvampDXSmN8+icu54aRE3IIT8U+1w==}
+    peerDependencies:
+      '@vue/compiler-sfc': '>=3.0.0'
+      prettier: 2.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+    dependencies:
+      '@babel/core': 7.20.5
+      '@babel/generator': 7.20.5
+      '@babel/parser': 7.20.5
+      '@babel/traverse': 7.20.5
+      '@babel/types': 7.20.7
+      javascript-natural-sort: 0.7.1
+      lodash.clone: 4.5.0
+      lodash.isequal: 4.5.0
+      prettier: 2.8.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@iarna/toml/2.2.5:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
@@ -17993,6 +18017,10 @@ packages:
       react: 18.1.0
     dev: false
 
+  /javascript-natural-sort/0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: true
+
   /jest-canvas-mock/2.3.0:
     resolution: {integrity: sha512-3TMyR66VG2MzAW8Negzec03bbcIjVJMfGNvKzrEnbws1CYKqMNkvIJ8LbkoGYfp42tKqDmhIpQq3v+MNLW2A2w==}
     dependencies:
@@ -19593,6 +19621,10 @@ packages:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: false
 
+  /lodash.clone/4.5.0:
+    resolution: {integrity: sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==}
+    dev: true
+
   /lodash.clonedeep/4.5.0:
     resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
     dev: true

prettier.config.js

@@ -1 +1,19 @@
-module.exports = require('@sourcegraph/prettierrc')
+const baseConfig = require('@sourcegraph/prettierrc')
+
+module.exports = {
+  ...baseConfig,
+  plugins: [...(baseConfig.plugins || []), '@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>', // Note: Any unmatched modules will be placed here
+    '^@sourcegraph/(.*)$', // Any internal module
+    '^\\$.*$', // Svelte imports
+    '^(?!.*.scss$)(?!\\.\\/)(\\.\\.\\/.*$|\\.\\.$)', // Matches parent directory paths, e.g. "../Foo", or "../../Foo". or ".."
+    '^(?!.*.scss$)(\\.\\/.*$|\\.$)', // Matches sibling directory paths, e.g. "./Foo" or ".",
+    '.*.scss$', // SCSS imports. Note: This must be last to ensure predictable styling.
+  ],
+  importOrderSeparation: true,
+  importOrderMergeDuplicateImports: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderCaseInsensitive: true,
+}