From 195a096841996c3fbe08057e463d70c6d280b615 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 23 Feb 2022 16:35:16 -0500
Subject: [PATCH] Add rules for linting import order

---
 .eslintrc.js                                  | 56 +++++++++++++++++++
 src/components/DownloadButton.vue             |  2 +
 src/components/DropdownButton.vue             |  4 +-
 src/components/ImageDetails/ReuseSurvey.vue   |  1 +
 src/components/License/VLicense.vue           |  4 +-
 .../VAllResultsGrid/VAllResultsGrid.vue       |  4 +-
 src/components/VAllResultsGrid/VAudioCell.vue |  1 +
 src/components/VAllResultsGrid/VImageCell.vue |  1 +
 .../VAudioDetails/VAudioDetails.vue           |  7 ++-
 .../VAudioDetails/VRelatedAudio.vue           |  5 +-
 src/components/VAudioTrack/VAudioTrack.vue    | 13 +++--
 src/components/VAudioTrack/VPlayPause.vue     |  4 +-
 src/components/VAudioTrack/VWaveform.vue      |  1 +
 .../VAudioTrack/layouts/VRowLayout.vue        |  1 +
 src/components/VBackToSearchResultsLink.vue   |  1 +
 src/components/VButton.vue                    |  4 +-
 src/components/VCheckbox/VCheckbox.vue        |  3 +-
 src/components/VContentLink/VContentLink.vue  |  4 +-
 .../VContentReport/VContentReportButton.vue   |  4 +-
 .../VContentReport/VContentReportForm.vue     | 12 ++--
 .../VContentReport/VContentReportPopover.vue  |  7 ++-
 src/components/VContentReport/VDmcaNotice.vue |  1 +
 .../VContentReport/VReportDescForm.vue        |  1 +
 .../VContentSwitcher/VMobileMenuModal.vue     |  7 ++-
 .../VContentSwitcher/VSearchTypeButton.vue    |  6 +-
 .../VContentSwitcher/VSearchTypeItem.vue      |  2 +
 .../VContentSwitcher/VSearchTypePopover.vue   |  2 +
 .../VContentSwitcher/VSearchTypeRadio.vue     |  2 +
 .../VContentSwitcher/VSearchTypes.vue         |  5 +-
 src/components/VFilters/VFilterChecklist.vue  |  7 ++-
 .../VFilters/VLicenseExplanation.vue          |  4 +-
 src/components/VFilters/VSearchGridFilter.vue |  1 +
 src/components/VFourOhFour.vue                |  2 +
 .../VGlobalAudioSection.vue                   |  3 +-
 src/components/VHeader/VFilterButton.vue      |  1 +
 src/components/VHeader/VHeader.vue            |  5 +-
 src/components/VHeader/VHeaderFilter.vue      |  4 +-
 src/components/VHeader/VHeaderMenu.vue        | 12 ++--
 src/components/VHeader/VLogoButton.vue        |  2 +
 .../VHeader/VPageMenu/VMobilePageMenu.vue     |  1 +
 .../VHeader/VSearchBar/VSearchBar.vue         |  1 +
 .../VHeader/VSearchBar/VSearchButton.vue      |  6 +-
 .../VImageDetails/VRelatedImages.vue          |  2 +
 src/components/VItemGroup/VItem.vue           |  8 ++-
 src/components/VItemGroup/VItemGroup.vue      |  1 +
 .../VItemGroup/meta/VItemGroup.stories.js     | 15 +++--
 src/components/VLoadMore.vue                  |  2 +
 src/components/VLogoLoader/VLogoLoader.vue    |  1 +
 src/components/VMediaInfo/VCopyLicense.vue    |  5 +-
 src/components/VMediaInfo/VMediaLicense.vue   |  4 +-
 src/components/VMediaInfo/VMediaReuse.vue     |  2 +
 .../VMetaSearch/VMetaSourceList.vue           |  1 +
 src/components/VModal/VMobileModalContent.vue |  4 +-
 src/components/VModal/VModal.vue              |  2 +
 src/components/VModal/VModalContent.vue       | 10 +++-
 src/components/VModal/VModalTarget.vue        |  1 +
 src/components/VModal/VSidebarTarget.vue      |  1 +
 src/components/VNotificationBanner.vue        |  2 +
 src/components/VPopover/VPopover.vue          |  3 +-
 src/components/VPopover/VPopoverContent.vue   |  1 +
 .../VPopover/meta/VPopover.stories.js         |  3 +-
 src/components/VScrollButton.vue              |  1 +
 src/components/VSearchGrid.vue                |  1 +
 src/components/VSearchResultsTitle.vue        |  1 +
 src/components/VTeleport/VTeleport.vue        |  1 +
 src/components/VTeleport/VTeleportTarget.vue  |  4 +-
 src/components/VTranslationStatusBanner.vue   |  1 +
 .../use-filter-sidebar-visibility.js          |  1 +
 src/composables/use-focus-on-blur.js          |  1 -
 src/composables/use-hide-on-click-outside.js  |  1 +
 src/composables/use-i18n-sync.js              |  1 +
 src/composables/use-i18n-utilities.js         |  1 +
 src/composables/use-load-more.js              |  1 +
 src/composables/use-media-query.js            |  1 +
 src/composables/use-popover-content.js        |  1 +
 src/composables/use-related.js                |  1 +
 src/composables/use-scroll.js                 |  1 +
 src/composables/use-search-type.js            |  2 +
 src/composables/use-storage.js                |  1 +
 src/composables/use-window-scroll.js          |  3 +-
 src/data/api-service.js                       |  1 +
 src/data/media-service.js                     |  1 -
 src/layouts/blank.vue                         |  3 +
 src/layouts/default.vue                       | 14 +++--
 src/layouts/error.vue                         |  1 +
 src/locales/scripts/create-wp-locale-list.js  |  4 +-
 src/locales/scripts/get-translations.js       |  2 +
 src/locales/scripts/get-validated-locales.js  |  1 +
 src/locales/scripts/json-to-pot.js            |  4 +-
 src/locales/scripts/parse-vue-files.js        |  1 +
 src/mixins/iframe-height.js                   |  1 +
 src/pages/about.vue                           |  3 +-
 src/pages/audio/_id.vue                       |  1 +
 src/pages/audio/index.vue                     |  1 +
 src/pages/extension.vue                       |  4 +-
 src/pages/image/_id.vue                       | 10 +++-
 src/pages/image/index.vue                     |  1 +
 src/pages/index.vue                           | 19 +++----
 src/pages/meta-search.vue                     |  1 +
 src/pages/search.vue                          |  6 +-
 src/pages/search/audio.vue                    |  8 ++-
 src/pages/search/image.vue                    |  3 +-
 src/pages/search/index.vue                    |  4 +-
 src/pages/sources.vue                         |  2 +
 src/store/provider.js                         |  4 +-
 src/utils/search-query-transform.js           |  4 +-
 test/e2e/filters.spec.js                      |  1 +
 test/e2e/search-navigation.spec.js            |  1 +
 test/e2e/search-query-client.spec.js          |  1 +
 test/e2e/search-query-server.spec.js          |  1 +
 test/e2e/search-types.spec.js                 |  1 +
 test/e2e/search.spec.js                       |  1 +
 test/unit/setup.js                            |  3 +-
 .../components/AudioTrack/audio-track.spec.js |  4 +-
 .../ContentReport/content-report-form.spec.js |  2 +
 .../ImageDetails/reuse-survey.spec.js         | 11 ++--
 .../ImageDetails/v-copy-license.spec.js       |  5 +-
 .../VHeader/SearchBar/search-bar.spec.js      |  2 +
 .../VHeader/v-filter-button.spec.js           |  7 ++-
 .../components/VMediaTag/v-media-tag.spec.js  |  4 +-
 .../unit/specs/components/copy-button.spec.js |  1 +
 .../specs/components/download-button.spec.js  |  6 +-
 .../specs/components/dropdown-button.spec.js  |  3 +-
 test/unit/specs/components/dropdown.spec.js   |  3 +-
 .../specs/components/filter-checklist.spec.js |  3 +-
 test/unit/specs/components/filter-tag.spec.js |  3 +-
 test/unit/specs/components/image-grid.spec.js |  4 +-
 .../specs/components/loading-icon.spec.js     |  1 +
 .../specs/components/related-audios.spec.js   |  6 +-
 .../specs/components/related-images.spec.js   |  1 +
 .../specs/components/scroll-button.spec.js    |  3 +-
 .../components/search-grid-filter.spec.js     |  6 +-
 .../unit/specs/components/search-grid.spec.js |  3 +-
 .../specs/components/search-rating.spec.js    |  6 +-
 test/unit/specs/components/v-button.spec.js   |  3 +-
 test/unit/specs/components/v-checkbox.spec.js |  1 +
 .../specs/components/v-content-link.spec.js   |  4 +-
 .../specs/components/v-item-group.spec.js     |  6 +-
 test/unit/specs/components/v-license.spec.js  |  3 +-
 test/unit/specs/components/v-link.spec.js     |  3 +-
 .../specs/components/v-logo-loader.spec.js    |  4 +-
 test/unit/specs/components/v-popover.spec.js  |  7 ++-
 .../components/v-search-results-title.spec.js |  3 +-
 .../use-get-locale-formatted-number.spec.js   |  2 +-
 .../composables/use-i18n-utilities.spec.js    |  1 +
 test/unit/specs/pages/browse-page.spec.js     |  3 +-
 test/unit/specs/store/user.spec.js            |  3 +-
 .../utils/search-query-transform.spec.js      |  1 +
 test/unit/test-utils/render.js                |  2 +
 typings/vue/index.d.ts                        |  1 +
 150 files changed, 409 insertions(+), 142 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f304b2bcf8..d2b4f9aab5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -83,6 +83,62 @@ module.exports = {
         ignore: ['.svg'],
       },
     ],
+    'import/newline-after-import': ['error'],
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always-and-inside-groups',
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'object',
+          'type',
+        ],
+        pathGroups: [
+          {
+            // Treate vue and composition-api as "builtin"
+            pattern: '(vue|@nuxtjs/composition-api)',
+            group: 'builtin',
+            position: 'before',
+          },
+          {
+            // Move assets to the very end of the imports list
+            pattern: 'assets/**',
+            patternOptions: { partial: true },
+            group: 'type',
+            position: 'after',
+          },
+          {
+            // Treat components as their own group and move to the end of the internal imports list
+            pattern: '~/components/**',
+            group: 'parent',
+            position: 'before',
+          },
+          /**
+           * These next two must come after any more specific matchers
+           * as the plugin uses the patterns in order and does not sort
+           * multiple-matches by specificity, it just takes the _first_
+           * pattern that matches and applies that group to the import.
+           */
+          {
+            // Document webpack alias
+            pattern: '~/**',
+            group: 'internal',
+            position: 'before',
+          },
+          {
+            // Document webpack alias
+            pattern: '~~/**',
+            group: 'external',
+            position: 'after',
+          },
+        ],
+      },
+    ],
   },
   settings: {
     'vue-i18n': {
diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
index 200245f23b..e053f32e02 100644
--- a/src/components/DownloadButton.vue
+++ b/src/components/DownloadButton.vue
@@ -61,7 +61,9 @@
 <script>
 import filesize from 'filesize'
 import axios from 'axios'
+
 import local from '~/utils/local'
+
 import DropdownButton from '~/components/DropdownButton.vue'
 import VLink from '~/components/VLink.vue'
 
diff --git a/src/components/DropdownButton.vue b/src/components/DropdownButton.vue
index 37b2bc5a90..c5df2b0e61 100644
--- a/src/components/DropdownButton.vue
+++ b/src/components/DropdownButton.vue
@@ -53,9 +53,11 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import caretDown from '~/assets/icons/caret-down.svg'
+
 import * as keycodes from '~/utils/key-codes'
 
+import caretDown from '~/assets/icons/caret-down.svg'
+
 const DropdownButton = defineComponent({
   name: 'DropdownButton',
   props: {
diff --git a/src/components/ImageDetails/ReuseSurvey.vue b/src/components/ImageDetails/ReuseSurvey.vue
index 492e2f76f0..69917935c8 100644
--- a/src/components/ImageDetails/ReuseSurvey.vue
+++ b/src/components/ImageDetails/ReuseSurvey.vue
@@ -18,6 +18,7 @@ import {
   DETAIL_PAGE_EVENTS,
 } from '~/constants/usage-data-analytics-types'
 import { USAGE_DATA } from '~/constants/store-modules'
+
 import VLink from '~/components/VLink.vue'
 
 const reuseForm =
diff --git a/src/components/License/VLicense.vue b/src/components/License/VLicense.vue
index 03677901c8..13fdf82586 100644
--- a/src/components/License/VLicense.vue
+++ b/src/components/License/VLicense.vue
@@ -26,8 +26,6 @@
 <script>
 import { computed, useContext } from '@nuxtjs/composition-api'
 
-import VIcon from '~/components/VIcon/VIcon.vue'
-
 import {
   ALL_LICENSES,
   CC_LICENSES,
@@ -43,6 +41,8 @@ import nd from '~/assets/licenses/nd.svg'
 import pdm from '~/assets/licenses/pdm.svg'
 import sa from '~/assets/licenses/sa.svg'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 /**
  * Displays the icons for the license along with a readable display name for the
  * license.
diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
index 951303e01e..ef94827c41 100644
--- a/src/components/VAllResultsGrid/VAllResultsGrid.vue
+++ b/src/components/VAllResultsGrid/VAllResultsGrid.vue
@@ -53,14 +53,14 @@
 <script>
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
+import srand from '~/utils/srand'
+
 import VImageCell from '~/components/VAllResultsGrid/VImageCell.vue'
 import VAudioCell from '~/components/VAllResultsGrid/VAudioCell.vue'
 import VLoadMore from '~/components/VLoadMore.vue'
 import VContentLink from '~/components/VContentLink/VContentLink.vue'
 import VGridSkeleton from '~/components/VSkeleton/VGridSkeleton.vue'
 
-import srand from '~/utils/srand'
-
 export default defineComponent({
   name: 'VAllResultsGrid',
   components: {
diff --git a/src/components/VAllResultsGrid/VAudioCell.vue b/src/components/VAllResultsGrid/VAudioCell.vue
index 39b4d9a615..c2c94df650 100644
--- a/src/components/VAllResultsGrid/VAudioCell.vue
+++ b/src/components/VAllResultsGrid/VAudioCell.vue
@@ -9,6 +9,7 @@
 <script>
 import { useContext, useRouter } from '@nuxtjs/composition-api'
 import { defineComponent } from '@vue/composition-api'
+
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
 export default defineComponent({
diff --git a/src/components/VAllResultsGrid/VImageCell.vue b/src/components/VAllResultsGrid/VImageCell.vue
index 4556905ffa..f8553bf485 100644
--- a/src/components/VAllResultsGrid/VImageCell.vue
+++ b/src/components/VAllResultsGrid/VImageCell.vue
@@ -38,6 +38,7 @@
 
 <script>
 import VLicense from '~/components/License/VLicense.vue'
+
 const errorImage = require('~/assets/image_not_available_placeholder.png')
 
 const toAbsolutePath = (url, prefix = 'https://') => {
diff --git a/src/components/VAudioDetails/VAudioDetails.vue b/src/components/VAudioDetails/VAudioDetails.vue
index b3e7d5e361..e846b79bfb 100644
--- a/src/components/VAudioDetails/VAudioDetails.vue
+++ b/src/components/VAudioDetails/VAudioDetails.vue
@@ -82,9 +82,12 @@
 </template>
 
 <script>
-import getProviderName from '~/utils/get-provider-name'
-import { PROVIDER } from '~/constants/store-modules'
 import { mapState } from 'vuex'
+
+import { PROVIDER } from '~/constants/store-modules'
+
+import getProviderName from '~/utils/get-provider-name'
+
 import VLink from '~/components/VLink.vue'
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
diff --git a/src/components/VAudioDetails/VRelatedAudio.vue b/src/components/VAudioDetails/VRelatedAudio.vue
index bd093c51fe..50b8c01b1a 100644
--- a/src/components/VAudioDetails/VRelatedAudio.vue
+++ b/src/components/VAudioDetails/VRelatedAudio.vue
@@ -21,13 +21,16 @@
 
 <script>
 import { computed, ref } from '@nuxtjs/composition-api'
+
 import { AUDIO } from '~/constants/media'
 
 import useRelated from '~/composables/use-related'
 import { isMinScreen } from '~/composables/use-media-query'
-import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+
 import LoadingIcon from '~/components/LoadingIcon.vue'
 
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+
 export default {
   name: 'VRelatedAudio',
   components: { VAudioTrack, LoadingIcon },
diff --git a/src/components/VAudioTrack/VAudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue
index 77a1b33934..1aba91138b 100644
--- a/src/components/VAudioTrack/VAudioTrack.vue
+++ b/src/components/VAudioTrack/VAudioTrack.vue
@@ -50,6 +50,13 @@ import {
 
 import { useActiveAudio } from '~/composables/use-active-audio'
 
+import { ACTIVE, MEDIA } from '~/constants/store-modules'
+
+import {
+  PAUSE_ACTIVE_MEDIA_ITEM,
+  SET_ACTIVE_MEDIA_ITEM,
+} from '~/constants/mutation-types'
+
 import VPlayPause from '~/components/VAudioTrack/VPlayPause.vue'
 import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
 
@@ -58,12 +65,6 @@ import VRowLayout from '~/components/VAudioTrack/layouts/VRowLayout.vue'
 import VBoxLayout from '~/components/VAudioTrack/layouts/VBoxLayout.vue'
 import VGlobalLayout from '~/components/VAudioTrack/layouts/VGlobalLayout.vue'
 
-import { ACTIVE, MEDIA } from '~/constants/store-modules'
-import {
-  PAUSE_ACTIVE_MEDIA_ITEM,
-  SET_ACTIVE_MEDIA_ITEM,
-} from '~/constants/mutation-types'
-
 const propTypes = {
   /**
    * the information about the track, typically from a track's detail endpoint
diff --git a/src/components/VAudioTrack/VPlayPause.vue b/src/components/VAudioTrack/VPlayPause.vue
index b6326e4666..7612a916ac 100644
--- a/src/components/VAudioTrack/VPlayPause.vue
+++ b/src/components/VAudioTrack/VPlayPause.vue
@@ -12,12 +12,12 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
-import VIconButton from '~/components/VIconButton/VIconButton.vue'
-
 import playIcon from '~/assets/icons/play.svg'
 import pauseIcon from '~/assets/icons/pause.svg'
 import replayIcon from '~/assets/icons/replay.svg'
 
+import VIconButton from '~/components/VIconButton/VIconButton.vue'
+
 /**
  * Displays the control for switching between the playing and paused states of
  * a media file.
diff --git a/src/components/VAudioTrack/VWaveform.vue b/src/components/VAudioTrack/VWaveform.vue
index 93d99cfc8f..04bd1dd4c8 100644
--- a/src/components/VAudioTrack/VWaveform.vue
+++ b/src/components/VAudioTrack/VWaveform.vue
@@ -168,6 +168,7 @@ import {
   onMounted,
   ref,
 } from '@nuxtjs/composition-api'
+
 import { downsampleArray, upsampleArray } from '~/utils/resampling'
 import * as keycodes from '~/utils/key-codes'
 
diff --git a/src/components/VAudioTrack/layouts/VRowLayout.vue b/src/components/VAudioTrack/layouts/VRowLayout.vue
index f016a0ec2e..f50eaa91a3 100644
--- a/src/components/VAudioTrack/layouts/VRowLayout.vue
+++ b/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -84,6 +84,7 @@
 
 <script>
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+
 import { useBrowserIsBlink } from '~/composables/use-browser-detection'
 
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
diff --git a/src/components/VBackToSearchResultsLink.vue b/src/components/VBackToSearchResultsLink.vue
index 5419f3c406..b447859ae0 100644
--- a/src/components/VBackToSearchResultsLink.vue
+++ b/src/components/VBackToSearchResultsLink.vue
@@ -12,6 +12,7 @@
 
 <script>
 import { defineComponent } from '@vue/composition-api'
+
 import Chevron from '~/assets/icons/chevron-left.svg?inline'
 
 export default defineComponent({
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index c75427e10d..5435f54ae4 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -30,9 +30,11 @@ import {
   toRefs,
   computed,
 } from '@nuxtjs/composition-api'
-import VLink from '~/components/VLink.vue'
+
 import { warn } from '~/utils/warn'
 
+import VLink from '~/components/VLink.vue'
+
 /**
  * A button component that behaves just like a regular HTML `button` element
  * aside from pre-applied styles based on the passed in variant.
diff --git a/src/components/VCheckbox/VCheckbox.vue b/src/components/VCheckbox/VCheckbox.vue
index b49041db22..5f6ac0b24d 100644
--- a/src/components/VCheckbox/VCheckbox.vue
+++ b/src/components/VCheckbox/VCheckbox.vue
@@ -20,9 +20,10 @@
 </template>
 
 <script>
-import Checkmark from '~/assets/icons/checkmark.svg?inline'
 import { computed, defineComponent, ref, watch } from '@nuxtjs/composition-api'
 
+import Checkmark from '~/assets/icons/checkmark.svg?inline'
+
 const VCheckbox = defineComponent({
   name: 'VCheckbox',
   components: { Checkmark },
diff --git a/src/components/VContentLink/VContentLink.vue b/src/components/VContentLink/VContentLink.vue
index f3906378b6..de079b9ccb 100644
--- a/src/components/VContentLink/VContentLink.vue
+++ b/src/components/VContentLink/VContentLink.vue
@@ -18,13 +18,15 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 import { AUDIO, IMAGE, supportedMediaTypes } from '~/constants/media'
-import VIcon from '~/components/VIcon/VIcon.vue'
 
 import audioIcon from '~/assets/icons/audio-wave.svg'
 import imageIcon from '~/assets/icons/image.svg'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 const iconMapping = {
   [AUDIO]: audioIcon,
   [IMAGE]: imageIcon,
diff --git a/src/components/VContentReport/VContentReportButton.vue b/src/components/VContentReport/VContentReportButton.vue
index 6fd01e5c0e..e84de8985d 100644
--- a/src/components/VContentReport/VContentReportButton.vue
+++ b/src/components/VContentReport/VContentReportButton.vue
@@ -16,10 +16,10 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
-import VIcon from '~/components/VIcon/VIcon.vue'
-
 import flagIcon from '~/assets/icons/flag.svg'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 export default defineComponent({
   name: 'VContentReportButton',
   components: { VIcon },
diff --git a/src/components/VContentReport/VContentReportForm.vue b/src/components/VContentReport/VContentReportForm.vue
index 6038dbda1d..387bbae257 100644
--- a/src/components/VContentReport/VContentReportForm.vue
+++ b/src/components/VContentReport/VContentReportForm.vue
@@ -105,6 +105,12 @@
 <script>
 import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 
+import ReportService from '~/data/report-service'
+
+import { reasons, statuses, DMCA_FORM_URL } from '~/constants/content-report'
+
+import externalLinkIcon from '~/assets/icons/external-link.svg'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
@@ -112,12 +118,6 @@ import VDmcaNotice from '~/components/VContentReport/VDmcaNotice.vue'
 import VReportDescForm from '~/components/VContentReport/VReportDescForm.vue'
 import VLink from '~/components/VLink.vue'
 
-import ReportService from '~/data/report-service'
-
-import { reasons, statuses, DMCA_FORM_URL } from '~/constants/content-report'
-
-import externalLinkIcon from '~/assets/icons/external-link.svg'
-
 export default defineComponent({
   name: 'VContentReportForm',
   components: {
diff --git a/src/components/VContentReport/VContentReportPopover.vue b/src/components/VContentReport/VContentReportPopover.vue
index ecbbf1fa66..dfebd1f96d 100644
--- a/src/components/VContentReport/VContentReportPopover.vue
+++ b/src/components/VContentReport/VContentReportPopover.vue
@@ -28,12 +28,13 @@
 <script>
 import { computed, useStore, defineComponent } from '@nuxtjs/composition-api'
 
-import VPopover from '~/components/VPopover/VPopover.vue'
-import VContentReportButton from '~/components/VContentReport/VContentReportButton.vue'
-
 import flagIcon from '~/assets/icons/flag.svg'
+
 import closeSmallIcon from '~/assets/icons/close-small.svg'
 
+import VPopover from '~/components/VPopover/VPopover.vue'
+import VContentReportButton from '~/components/VContentReport/VContentReportButton.vue'
+
 export default defineComponent({
   name: 'VContentReportPopover',
   components: { VPopover, VContentReportButton },
diff --git a/src/components/VContentReport/VDmcaNotice.vue b/src/components/VContentReport/VDmcaNotice.vue
index caf516c505..fab95365c6 100644
--- a/src/components/VContentReport/VDmcaNotice.vue
+++ b/src/components/VContentReport/VDmcaNotice.vue
@@ -24,6 +24,7 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 
 import { DMCA_FORM_URL } from '~/constants/content-report'
+
 import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
diff --git a/src/components/VContentReport/VReportDescForm.vue b/src/components/VContentReport/VReportDescForm.vue
index b4722298d5..68a6b670e1 100644
--- a/src/components/VContentReport/VReportDescForm.vue
+++ b/src/components/VContentReport/VReportDescForm.vue
@@ -22,6 +22,7 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import { reasons } from '~/constants/content-report'
 
 export default defineComponent({
diff --git a/src/components/VContentSwitcher/VMobileMenuModal.vue b/src/components/VContentSwitcher/VMobileMenuModal.vue
index df7e4632d8..090f30b2a8 100644
--- a/src/components/VContentSwitcher/VMobileMenuModal.vue
+++ b/src/components/VContentSwitcher/VMobileMenuModal.vue
@@ -40,10 +40,13 @@ import {
   ref,
   watch,
 } from '@nuxtjs/composition-api'
-import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
-import useSearchType from '~/composables/use-search-type'
+
 import usePages from '~/composables/use-pages'
 
+import useSearchType from '~/composables/use-search-type'
+
+import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
+
 import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
 import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
 import VPageList from '~/components/VHeader/VPageMenu/VPageList.vue'
diff --git a/src/components/VContentSwitcher/VSearchTypeButton.vue b/src/components/VContentSwitcher/VSearchTypeButton.vue
index 28c3f9fa51..cd01b64334 100644
--- a/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -22,21 +22,23 @@
   </VButton>
 </template>
 <script>
-import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
 import {
   computed,
   defineComponent,
   inject,
   useContext,
 } from '@nuxtjs/composition-api'
+
+import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
 import { isMinScreen } from '~/composables/use-media-query'
 
 import caretDownIcon from '~/assets/icons/caret-down.svg'
 
-import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
+import VButton from '~/components/VButton.vue'
+
 export default defineComponent({
   name: 'VSearchTypeButton',
   components: { VButton, VIcon },
diff --git a/src/components/VContentSwitcher/VSearchTypeItem.vue b/src/components/VContentSwitcher/VSearchTypeItem.vue
index d152ee7b2d..02fdf1ad2b 100644
--- a/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -17,7 +17,9 @@
 <script>
 import { computed } from '@nuxtjs/composition-api'
 import { defineComponent } from '@vue/composition-api'
+
 import { contentStatus } from '~/constants/media'
+
 /** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
 const propTypes = {
   item: { type: String, required: true },
diff --git a/src/components/VContentSwitcher/VSearchTypePopover.vue b/src/components/VContentSwitcher/VSearchTypePopover.vue
index af160348b0..7dfc336ece 100644
--- a/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -29,7 +29,9 @@
 
 <script>
 import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+
 import useSearchType from '~/composables/use-search-type'
+
 import checkIcon from '~/assets/icons/checkmark.svg'
 
 import VPopover from '~/components/VPopover/VPopover.vue'
diff --git a/src/components/VContentSwitcher/VSearchTypeRadio.vue b/src/components/VContentSwitcher/VSearchTypeRadio.vue
index 6709195599..914dc475e2 100644
--- a/src/components/VContentSwitcher/VSearchTypeRadio.vue
+++ b/src/components/VContentSwitcher/VSearchTypeRadio.vue
@@ -13,12 +13,14 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import {
   ALL_MEDIA,
   AUDIO,
   IMAGE,
   supportedSearchTypes,
 } from '~/constants/media'
+
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import audioIcon from 'assets/icons/audio-wave.svg'
diff --git a/src/components/VContentSwitcher/VSearchTypes.vue b/src/components/VContentSwitcher/VSearchTypes.vue
index f4e0bb02a0..2407bcf73b 100644
--- a/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/src/components/VContentSwitcher/VSearchTypes.vue
@@ -20,12 +20,15 @@
   </VItemGroup>
 </template>
 <script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import { supportedSearchTypes } from '~/constants/media'
+
 import useSearchType from '~/composables/use-search-type'
 
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
+
 import VSearchTypeItem from '~/components/VContentSwitcher/VSearchTypeItem.vue'
-import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   name: 'VSearchTypes',
diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
index f4d1152cac..2fd0748654 100644
--- a/src/components/VFilters/VFilterChecklist.vue
+++ b/src/components/VFilters/VFilterChecklist.vue
@@ -53,15 +53,16 @@
 </template>
 
 <script>
+import helpIcon from '~/assets/icons/help.svg'
+
+import closeSmallIcon from '~/assets/icons/close-small.svg'
+
 import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
 import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
 import VLicense from '~/components/License/VLicense.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
 
-import helpIcon from '~/assets/icons/help.svg'
-import closeSmallIcon from '~/assets/icons/close-small.svg'
-
 export default {
   name: 'FilterCheckList',
   components: {
diff --git a/src/components/VFilters/VLicenseExplanation.vue b/src/components/VFilters/VLicenseExplanation.vue
index b5c0a6cb9e..32dfd962ac 100644
--- a/src/components/VFilters/VLicenseExplanation.vue
+++ b/src/components/VFilters/VLicenseExplanation.vue
@@ -38,10 +38,10 @@
 <script>
 import { isLicense } from '~/utils/license'
 
-import VLicenseElements from '~/components/VLicenseElements.vue'
-
 import { DEPRECATED_LICENSES } from '~/constants/license'
 
+import VLicenseElements from '~/components/VLicenseElements.vue'
+
 /**
  * Renders the explanation of the license passed to it by breaking it down to
  * its constituent clauses.
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index 46181ef055..920595988d 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -44,6 +44,7 @@
 
 <script>
 import { computed, useContext, useRouter } from '@nuxtjs/composition-api'
+
 import { kebabize } from '~/utils/format-strings'
 
 import {
diff --git a/src/components/VFourOhFour.vue b/src/components/VFourOhFour.vue
index 3743dd58cd..4136571f29 100644
--- a/src/components/VFourOhFour.vue
+++ b/src/components/VFourOhFour.vue
@@ -51,12 +51,14 @@ import {
   useContext,
   useRouter,
 } from '@nuxtjs/composition-api'
+
 import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 
 import Oops from '~/assets/oops.svg?inline'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
+
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
 
 const VFourOhFour = defineComponent({
diff --git a/src/components/VGlobalAudioSection/VGlobalAudioSection.vue b/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
index eaebb913d1..72c13f2069 100644
--- a/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
+++ b/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
@@ -19,9 +19,10 @@ import {
   EJECT_ACTIVE_MEDIA_ITEM,
 } from '~/constants/mutation-types'
 
-import closeIcon from '~/assets/icons/close-small.svg'
 import { useActiveAudio } from '~/composables/use-active-audio'
 
+import closeIcon from '~/assets/icons/close-small.svg'
+
 export default {
   name: 'VGlobalAudioSection',
   setup() {
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index 6c060208e3..1c6c39dc90 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -25,6 +25,7 @@ import {
   toRefs,
   useContext,
 } from '@nuxtjs/composition-api'
+
 import filterIcon from '~/assets/icons/filter.svg'
 
 import VButton from '~/components/VButton.vue'
diff --git a/src/components/VHeader/VHeader.vue b/src/components/VHeader/VHeader.vue
index e0bef89f55..8975ff65d1 100644
--- a/src/components/VHeader/VHeader.vue
+++ b/src/components/VHeader/VHeader.vue
@@ -75,10 +75,11 @@ import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 
 import closeIcon from '~/assets/icons/close.svg'
 
-import VHeaderMenu from '~/components/VHeader/VHeaderMenu.vue'
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+
 import VHeaderFilter from '~/components/VHeader/VHeaderFilter.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
-import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VHeaderMenu from '~/components/VHeader/VHeaderMenu.vue'
 
 const menus = {
   FILTERS: 'filters',
diff --git a/src/components/VHeader/VHeaderFilter.vue b/src/components/VHeader/VHeaderFilter.vue
index 588ee9af38..7602b651cc 100644
--- a/src/components/VHeader/VHeaderFilter.vue
+++ b/src/components/VHeader/VHeaderFilter.vue
@@ -27,9 +27,11 @@ import {
   useContext,
   inject,
 } from '@nuxtjs/composition-api'
-import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
+
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
+import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
+
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
diff --git a/src/components/VHeader/VHeaderMenu.vue b/src/components/VHeader/VHeaderMenu.vue
index b26cf84afe..312480baf8 100644
--- a/src/components/VHeader/VHeaderMenu.vue
+++ b/src/components/VHeader/VHeaderMenu.vue
@@ -7,16 +7,20 @@ import {
   useRouter,
   useStore,
 } from '@nuxtjs/composition-api'
+import isEmpty from 'lodash.isempty'
+
 import useSearchType from '~/composables/use-search-type'
 
+import { ALL_MEDIA, supportedMediaTypes } from '~/constants/media'
+
+import { FETCH_MEDIA } from '~/constants/action-types'
+
+import { MEDIA } from '~/constants/store-modules'
+
 import VMobileMenuModal from '~/components/VContentSwitcher/VMobileMenuModal.vue'
 import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
 import VDesktopPageMenu from '~/components/VHeader/VPageMenu/VDesktopPageMenu.vue'
 import VMobilePageMenu from '~/components/VHeader/VPageMenu/VMobilePageMenu.vue'
-import { ALL_MEDIA, supportedMediaTypes } from '~/constants/media'
-import { FETCH_MEDIA } from '~/constants/action-types'
-import { MEDIA } from '~/constants/store-modules'
-import isEmpty from 'lodash.isempty'
 
 export default {
   name: 'VHeaderMenu',
diff --git a/src/components/VHeader/VLogoButton.vue b/src/components/VHeader/VLogoButton.vue
index 54c3060796..c162984fb9 100644
--- a/src/components/VHeader/VLogoButton.vue
+++ b/src/components/VHeader/VLogoButton.vue
@@ -21,7 +21,9 @@
 </template>
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
+
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 import VButton from '~/components/VButton.vue'
 
diff --git a/src/components/VHeader/VPageMenu/VMobilePageMenu.vue b/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
index 3b0fc166bd..378f7ae7bd 100644
--- a/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
+++ b/src/components/VHeader/VPageMenu/VMobilePageMenu.vue
@@ -22,6 +22,7 @@
 
 <script>
 import { computed, reactive, ref, watch } from '@nuxtjs/composition-api'
+
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
 import VMobileModalContent from '~/components/VModal/VMobileModalContent.vue'
diff --git a/src/components/VHeader/VSearchBar/VSearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue
index 0d373c529d..0ec816915d 100644
--- a/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -26,6 +26,7 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import { useMatchHomeRoute } from '~/composables/use-match-routes'
 
 import VInputField from '~/components/VInputField/VInputField.vue'
diff --git a/src/components/VHeader/VSearchBar/VSearchButton.vue b/src/components/VHeader/VSearchBar/VSearchButton.vue
index 05209c98e6..669acee559 100644
--- a/src/components/VHeader/VSearchBar/VSearchButton.vue
+++ b/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -27,13 +27,15 @@
 
 <script>
 import { defineComponent, computed } from '@nuxtjs/composition-api'
+
 import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
-import VButton from '~/components/VButton.vue'
+import searchIcon from '~/assets/icons/search.svg'
+
 import VIcon from '~/components/VIcon/VIcon.vue'
 
-import searchIcon from '~/assets/icons/search.svg'
+import VButton from '~/components/VButton.vue'
 
 /**
  * @typedef Props
diff --git a/src/components/VImageDetails/VRelatedImages.vue b/src/components/VImageDetails/VRelatedImages.vue
index 73e4cc6b2a..317ca5c3fc 100644
--- a/src/components/VImageDetails/VRelatedImages.vue
+++ b/src/components/VImageDetails/VRelatedImages.vue
@@ -17,8 +17,10 @@
 
 <script>
 import { ref } from '@nuxtjs/composition-api'
+
 import useRelated from '~/composables/use-related'
 import { IMAGE } from '~/constants/media'
+
 import ImageGrid from '~/components/ImageGrid/ImageGrid.vue'
 
 export default {
diff --git a/src/components/VItemGroup/VItem.vue b/src/components/VItemGroup/VItem.vue
index 5b4eab33b9..3db0da2013 100644
--- a/src/components/VItemGroup/VItem.vue
+++ b/src/components/VItemGroup/VItem.vue
@@ -66,15 +66,19 @@ import {
   computed,
   watch,
 } from '@nuxtjs/composition-api'
+
+import { warn } from '~/utils/warn'
+
 import checkmark from '~/assets/icons/checkmark.svg'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
+import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
+
 import {
   VItemGroupContextKey,
   VItemGroupFocusContextKey,
 } from './VItemGroup.vue'
-import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
-import { warn } from '~/utils/warn'
 
 export default defineComponent({
   name: 'VItem',
diff --git a/src/components/VItemGroup/VItemGroup.vue b/src/components/VItemGroup/VItemGroup.vue
index ee88d397ad..eb32209b46 100644
--- a/src/components/VItemGroup/VItemGroup.vue
+++ b/src/components/VItemGroup/VItemGroup.vue
@@ -30,6 +30,7 @@ import {
   computed,
 } from '@nuxtjs/composition-api'
 import { ensureFocus } from 'reakit-utils/ensureFocus'
+
 import { useI18n } from '~/composables/use-i18n'
 import * as keycodes from '~/utils/key-codes'
 
diff --git a/src/components/VItemGroup/meta/VItemGroup.stories.js b/src/components/VItemGroup/meta/VItemGroup.stories.js
index 2174e8066f..3c371255f0 100644
--- a/src/components/VItemGroup/meta/VItemGroup.stories.js
+++ b/src/components/VItemGroup/meta/VItemGroup.stories.js
@@ -1,16 +1,19 @@
-import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
-import VItem from '~/components/VItemGroup/VItem.vue'
-import VIcon from '~/components/VIcon/VIcon.vue'
-import VPopover from '~/components/VPopover/VPopover.vue'
-import VButton from '~/components/VButton.vue'
-
 import { ref } from '@nuxtjs/composition-api'
 
 import close from '~/assets/icons/close.svg'
+
 import pause from '~/assets/icons/pause.svg'
+
 import play from '~/assets/icons/play.svg'
+
 import replay from '~/assets/icons/replay.svg'
 
+import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
+import VItem from '~/components/VItemGroup/VItem.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
+import VPopover from '~/components/VPopover/VPopover.vue'
+import VButton from '~/components/VButton.vue'
+
 const icons = [close, pause, play, replay]
 
 export default {
diff --git a/src/components/VLoadMore.vue b/src/components/VLoadMore.vue
index f047ec792b..e3619ec6e6 100644
--- a/src/components/VLoadMore.vue
+++ b/src/components/VLoadMore.vue
@@ -11,7 +11,9 @@
 </template>
 <script>
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+
 import VButton from '~/components/VButton.vue'
+
 export default defineComponent({
   name: 'VLoadMore',
   components: {
diff --git a/src/components/VLogoLoader/VLogoLoader.vue b/src/components/VLogoLoader/VLogoLoader.vue
index 874db85b2d..55551f550b 100644
--- a/src/components/VLogoLoader/VLogoLoader.vue
+++ b/src/components/VLogoLoader/VLogoLoader.vue
@@ -41,6 +41,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import { useReducedMotion } from '~/composables/use-media-query'
 
 import { propTypes } from './VLogoLoader.types'
diff --git a/src/components/VMediaInfo/VCopyLicense.vue b/src/components/VMediaInfo/VCopyLicense.vue
index 5359f07c25..cf785170a7 100644
--- a/src/components/VMediaInfo/VCopyLicense.vue
+++ b/src/components/VMediaInfo/VCopyLicense.vue
@@ -149,6 +149,7 @@ import {
   ref,
   useContext,
 } from '@nuxtjs/composition-api'
+
 import { USAGE_DATA } from '~/constants/store-modules'
 import {
   SEND_DETAIL_PAGE_EVENT,
@@ -157,8 +158,10 @@ import {
 import getAttributionHtml from '~/utils/attribution-html'
 import { isPublicDomain } from '~/utils/license'
 
-import CopyButton from '~/components/CopyButton.vue'
 import VLink from '~/components/VLink.vue'
+
+import CopyButton from '~/components/CopyButton.vue'
+
 const VCopyLicense = defineComponent({
   name: 'VCopyLicense',
   components: { CopyButton, VLink },
diff --git a/src/components/VMediaInfo/VMediaLicense.vue b/src/components/VMediaInfo/VMediaLicense.vue
index c30fbac99e..b58b181673 100644
--- a/src/components/VMediaInfo/VMediaLicense.vue
+++ b/src/components/VMediaInfo/VMediaLicense.vue
@@ -53,11 +53,11 @@
 </template>
 
 <script>
+import { isLicense } from '~/utils/license'
+
 import VLicenseElements from '~/components/VLicenseElements.vue'
 import VLink from '~/components/VLink.vue'
 
-import { isLicense } from '~/utils/license'
-
 export default {
   name: 'MediaLicense',
   components: { VLicenseElements, VLink },
diff --git a/src/components/VMediaInfo/VMediaReuse.vue b/src/components/VMediaInfo/VMediaReuse.vue
index 2989c0c040..3a7fddd15a 100644
--- a/src/components/VMediaInfo/VMediaReuse.vue
+++ b/src/components/VMediaInfo/VMediaReuse.vue
@@ -21,7 +21,9 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import { getFullLicenseName } from '~/utils/license'
+
 import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 import VMediaLicense from '~/components/VMediaInfo/VMediaLicense.vue'
 
diff --git a/src/components/VMetaSearch/VMetaSourceList.vue b/src/components/VMetaSearch/VMetaSourceList.vue
index 6aee9e516c..1cd4c4dd81 100644
--- a/src/components/VMetaSearch/VMetaSourceList.vue
+++ b/src/components/VMetaSearch/VMetaSourceList.vue
@@ -17,6 +17,7 @@
 import getLegacySourceUrl, {
   legacySourceMap,
 } from '~/utils/get-legacy-source-url'
+
 import VLink from '~/components/VLink.vue'
 
 export default {
diff --git a/src/components/VModal/VMobileModalContent.vue b/src/components/VModal/VMobileModalContent.vue
index 3ef2a03ba8..ab43fbbeac 100644
--- a/src/components/VModal/VMobileModalContent.vue
+++ b/src/components/VModal/VMobileModalContent.vue
@@ -44,9 +44,11 @@
 <script>
 import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
-import { useDialogContent } from '~/composables/use-dialog-content'
+
 import { warn } from '~/utils/warn'
 
+import { useDialogContent } from '~/composables/use-dialog-content'
+
 import closeIcon from '~/assets/icons/close.svg'
 
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
diff --git a/src/components/VModal/VModal.vue b/src/components/VModal/VModal.vue
index 65a44af023..500ed22d05 100644
--- a/src/components/VModal/VModal.vue
+++ b/src/components/VModal/VModal.vue
@@ -37,7 +37,9 @@ import {
   reactive,
   computed,
 } from '@nuxtjs/composition-api'
+
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
+
 import VModalContent from '~/components/VModal/VModalContent.vue'
 
 export default defineComponent({
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index f63a2f7aa8..f83502c068 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -40,12 +40,18 @@
 <script>
 import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
-import VTeleport from '~/components/VTeleport/VTeleport'
+
 import { useDialogContent } from '~/composables/use-dialog-content'
+
 import { warn } from '~/utils/warn'
+
+import closeIcon from '~/assets/icons/close.svg'
+
+import VTeleport from '~/components/VTeleport/VTeleport'
+
 import VButton from '~/components/VButton.vue'
+
 import VIcon from '~/components/VIcon/VIcon.vue'
-import closeIcon from '~/assets/icons/close.svg'
 
 /**
  * Renders the inner content of a modal and manages focus.
diff --git a/src/components/VModal/VModalTarget.vue b/src/components/VModal/VModalTarget.vue
index 13c03f3266..19668fac69 100644
--- a/src/components/VModal/VModalTarget.vue
+++ b/src/components/VModal/VModalTarget.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import VTeleportTarget from '~/components/VTeleport/VTeleportTarget'
 
 export default defineComponent({
diff --git a/src/components/VModal/VSidebarTarget.vue b/src/components/VModal/VSidebarTarget.vue
index bbfa359fc6..ef3681d509 100644
--- a/src/components/VModal/VSidebarTarget.vue
+++ b/src/components/VModal/VSidebarTarget.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import VTeleportTarget from '~/components/VTeleport/VTeleportTarget.vue'
 
 export default defineComponent({
diff --git a/src/components/VNotificationBanner.vue b/src/components/VNotificationBanner.vue
index 14412e9fc0..d41c474420 100644
--- a/src/components/VNotificationBanner.vue
+++ b/src/components/VNotificationBanner.vue
@@ -23,7 +23,9 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import closeIcon from '~/assets/icons/close.svg'
+
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 const VNotificationBanner = defineComponent({
diff --git a/src/components/VPopover/VPopover.vue b/src/components/VPopover/VPopover.vue
index 7c3aca0f95..4e16cde3b5 100644
--- a/src/components/VPopover/VPopover.vue
+++ b/src/components/VPopover/VPopover.vue
@@ -39,7 +39,6 @@
 </template>
 
 <script>
-import VPopoverContent from '~/components/VPopover/VPopoverContent.vue'
 import {
   defineComponent,
   ref,
@@ -48,6 +47,8 @@ import {
   computed,
 } from '@nuxtjs/composition-api'
 
+import VPopoverContent from '~/components/VPopover/VPopoverContent.vue'
+
 export default defineComponent({
   name: 'VPopover',
   components: { VPopoverContent },
diff --git a/src/components/VPopover/VPopoverContent.vue b/src/components/VPopover/VPopoverContent.vue
index 2ac3eee7c0..53511c5ca0 100644
--- a/src/components/VPopover/VPopoverContent.vue
+++ b/src/components/VPopover/VPopoverContent.vue
@@ -20,6 +20,7 @@
 
 <script>
 import { defineComponent, toRefs, ref, provide } from '@nuxtjs/composition-api'
+
 import { usePopoverContent } from '~/composables/use-popover-content'
 import { warn } from '~/utils/warn'
 
diff --git a/src/components/VPopover/meta/VPopover.stories.js b/src/components/VPopover/meta/VPopover.stories.js
index 79236a0642..7ee0af2947 100644
--- a/src/components/VPopover/meta/VPopover.stories.js
+++ b/src/components/VPopover/meta/VPopover.stories.js
@@ -1,6 +1,7 @@
+import { placements as popoverPlacements } from '@popperjs/core'
+
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VButton from '~/components/VButton'
-import { placements as popoverPlacements } from '@popperjs/core'
 
 export default {
   component: VPopover,
diff --git a/src/components/VScrollButton.vue b/src/components/VScrollButton.vue
index 6318e9963e..fd5b16fc62 100644
--- a/src/components/VScrollButton.vue
+++ b/src/components/VScrollButton.vue
@@ -21,6 +21,7 @@
 
 <script>
 import { computed } from '@nuxtjs/composition-api'
+
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 const positionWithoutSidebar = 'ltr:right-4 rtl:left-4'
diff --git a/src/components/VSearchGrid.vue b/src/components/VSearchGrid.vue
index fa62ae0173..84f1f5c4bd 100644
--- a/src/components/VSearchGrid.vue
+++ b/src/components/VSearchGrid.vue
@@ -27,6 +27,7 @@
 
 <script>
 import { computed } from '@nuxtjs/composition-api'
+
 import { ALL_MEDIA, IMAGE, supportedSearchTypes } from '~/constants/media'
 
 import VMetaSearchForm from '~/components/VMetaSearch/VMetaSearchForm.vue'
diff --git a/src/components/VSearchResultsTitle.vue b/src/components/VSearchResultsTitle.vue
index d8835ad17e..67e492646b 100644
--- a/src/components/VSearchResultsTitle.vue
+++ b/src/components/VSearchResultsTitle.vue
@@ -9,6 +9,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 const sizes = {
   DEFAULT: 'default',
   LARGE: 'large',
diff --git a/src/components/VTeleport/VTeleport.vue b/src/components/VTeleport/VTeleport.vue
index ffdfdb568e..5c12797fef 100644
--- a/src/components/VTeleport/VTeleport.vue
+++ b/src/components/VTeleport/VTeleport.vue
@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import { targets } from './meta/targets'
 
 export default defineComponent({
diff --git a/src/components/VTeleport/VTeleportTarget.vue b/src/components/VTeleport/VTeleportTarget.vue
index 978c52b37b..ef177fcd9a 100644
--- a/src/components/VTeleport/VTeleportTarget.vue
+++ b/src/components/VTeleport/VTeleportTarget.vue
@@ -1,8 +1,10 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { targets } from './meta/targets'
+
 import { warn } from '~/utils/warn'
 
+import { targets } from './meta/targets'
+
 export default defineComponent({
   name: 'VTeleportTarget',
   props: {
diff --git a/src/components/VTranslationStatusBanner.vue b/src/components/VTranslationStatusBanner.vue
index ce35576411..6244621f58 100644
--- a/src/components/VTranslationStatusBanner.vue
+++ b/src/components/VTranslationStatusBanner.vue
@@ -18,6 +18,7 @@
 </template>
 <script>
 import useI18nSync from '~/composables/use-i18n-sync'
+
 import VLink from '~/components/VLink.vue'
 import VNotificationBanner from '~/components/VNotificationBanner.vue'
 
diff --git a/src/composables/use-filter-sidebar-visibility.js b/src/composables/use-filter-sidebar-visibility.js
index 22caa6331f..4217d955f6 100644
--- a/src/composables/use-filter-sidebar-visibility.js
+++ b/src/composables/use-filter-sidebar-visibility.js
@@ -1,4 +1,5 @@
 import { onMounted, ref } from '@nuxtjs/composition-api'
+
 import local from '~/utils/local'
 import { isMinScreen } from '~/composables/use-media-query'
 
diff --git a/src/composables/use-focus-on-blur.js b/src/composables/use-focus-on-blur.js
index 163cda9010..4a147d224d 100644
--- a/src/composables/use-focus-on-blur.js
+++ b/src/composables/use-focus-on-blur.js
@@ -1,7 +1,6 @@
 import { getDocument } from 'reakit-utils/getDocument'
 import { getActiveElement } from 'reakit-utils/getActiveElement'
 import { getNextActiveElementOnBlur } from 'reakit-utils/getNextActiveElementOnBlur'
-
 import { ref, watch } from '@nuxtjs/composition-api'
 
 /**
diff --git a/src/composables/use-hide-on-click-outside.js b/src/composables/use-hide-on-click-outside.js
index ca023cef7d..4be1b4835e 100644
--- a/src/composables/use-hide-on-click-outside.js
+++ b/src/composables/use-hide-on-click-outside.js
@@ -1,5 +1,6 @@
 import { ref, watch, computed } from '@nuxtjs/composition-api'
 import { getDocument } from 'reakit-utils/getDocument'
+
 import { useEventListenerOutside } from './use-event-listener-outside'
 
 /**
diff --git a/src/composables/use-i18n-sync.js b/src/composables/use-i18n-sync.js
index 1ec84eb928..938a4a019f 100644
--- a/src/composables/use-i18n-sync.js
+++ b/src/composables/use-i18n-sync.js
@@ -1,4 +1,5 @@
 import { computed, reactive, useContext } from '@nuxtjs/composition-api'
+
 import { StorageSerializers, useStorage } from '~/composables/use-storage'
 
 const BASE_URL = 'https://translate.wordpress.org/projects/meta/openverse/'
diff --git a/src/composables/use-i18n-utilities.js b/src/composables/use-i18n-utilities.js
index 5e392d4c24..9364ed0119 100644
--- a/src/composables/use-i18n-utilities.js
+++ b/src/composables/use-i18n-utilities.js
@@ -1,4 +1,5 @@
 import { useContext } from '@nuxtjs/composition-api'
+
 import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
 
 /**
diff --git a/src/composables/use-load-more.js b/src/composables/use-load-more.js
index 713221596c..ed8a072427 100644
--- a/src/composables/use-load-more.js
+++ b/src/composables/use-load-more.js
@@ -1,4 +1,5 @@
 import { computed, useContext } from '@nuxtjs/composition-api'
+
 import { FETCH_MEDIA } from '~/constants/action-types'
 import { MEDIA } from '~/constants/store-modules'
 
diff --git a/src/composables/use-media-query.js b/src/composables/use-media-query.js
index 8afba42bc5..0081107fd3 100644
--- a/src/composables/use-media-query.js
+++ b/src/composables/use-media-query.js
@@ -1,6 +1,7 @@
 /* this implementation is from https://github.com/vueuse/vueuse/packages/core/useMediaQuery/
  which, in turn, is ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 import { onBeforeUnmount, ref } from '@nuxtjs/composition-api'
+
 import { SCREEN_SIZES } from '~/constants/screens'
 import { defaultWindow } from '~/composables/window'
 
diff --git a/src/composables/use-popover-content.js b/src/composables/use-popover-content.js
index d129cacf80..89275d4786 100644
--- a/src/composables/use-popover-content.js
+++ b/src/composables/use-popover-content.js
@@ -1,4 +1,5 @@
 import { usePopper } from '~/composables/use-popper'
+
 import { useDialogContent } from './use-dialog-content'
 
 /**
diff --git a/src/composables/use-related.js b/src/composables/use-related.js
index e41499dc03..32cdc89f1c 100644
--- a/src/composables/use-related.js
+++ b/src/composables/use-related.js
@@ -1,4 +1,5 @@
 import { ref, useFetch } from '@nuxtjs/composition-api'
+
 import { mediaServices } from '~/store/media'
 
 export default function useRelated({
diff --git a/src/composables/use-scroll.js b/src/composables/use-scroll.js
index 0dbbb1a87c..bf755ce7d4 100644
--- a/src/composables/use-scroll.js
+++ b/src/composables/use-scroll.js
@@ -1,6 +1,7 @@
 // code taken from Vueuse
 import throttle from 'lodash.throttle'
 import { ref } from '@nuxtjs/composition-api'
+
 import { useEventListener } from '~/composables/use-event-listener'
 
 /**
diff --git a/src/composables/use-search-type.js b/src/composables/use-search-type.js
index 823a2c0336..0c760df808 100644
--- a/src/composables/use-search-type.js
+++ b/src/composables/use-search-type.js
@@ -1,7 +1,9 @@
 import { computed, ref, useContext } from '@nuxtjs/composition-api'
+
 import { supportedSearchTypes } from '~/constants/media'
 import { SEARCH } from '~/constants/store-modules'
 import { UPDATE_QUERY } from '~/constants/action-types'
+
 import allIcon from '~/assets/icons/all-content.svg'
 import audioIcon from '~/assets/icons/audio-content.svg'
 import imageIcon from '~/assets/icons/image-content.svg'
diff --git a/src/composables/use-storage.js b/src/composables/use-storage.js
index b21c4c5340..0b986dd1e3 100644
--- a/src/composables/use-storage.js
+++ b/src/composables/use-storage.js
@@ -1,4 +1,5 @@
 import { ref, unref, watch } from '@nuxtjs/composition-api'
+
 import { useEventListener } from '~/composables/use-event-listener'
 
 const defaultWindow =
diff --git a/src/composables/use-window-scroll.js b/src/composables/use-window-scroll.js
index f131b14528..68c33c0dfe 100644
--- a/src/composables/use-window-scroll.js
+++ b/src/composables/use-window-scroll.js
@@ -1,7 +1,8 @@
 // code taken from Vueuse
 import throttle from 'lodash.throttle'
-import { defaultWindow } from '~/composables/window'
 import { ref } from '@nuxtjs/composition-api'
+
+import { defaultWindow } from '~/composables/window'
 import { useEventListener } from '~/composables/use-event-listener'
 
 /**
diff --git a/src/data/api-service.js b/src/data/api-service.js
index b9795e52dc..37d9645402 100644
--- a/src/data/api-service.js
+++ b/src/data/api-service.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+
 import { warn } from '~/utils/warn'
 import { AUDIO, IMAGE } from '~/constants/media'
 
diff --git a/src/data/media-service.js b/src/data/media-service.js
index 4e21095572..869584863c 100644
--- a/src/data/media-service.js
+++ b/src/data/media-service.js
@@ -1,5 +1,4 @@
 import ApiService from '~/data/api-service'
-
 import decodeMediaData from '~/utils/decode-media-data'
 
 /**
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
index 53726162f8..bba2e161df 100644
--- a/src/layouts/blank.vue
+++ b/src/layouts/blank.vue
@@ -8,10 +8,13 @@
 
 <script>
 import { defineComponent, useStore } from '@nuxtjs/composition-api'
+
 import iframeHeight from '~/mixins/iframe-height'
+
 import { NAV } from '~/constants/store-modules'
 
 import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
+
 import VMigrationNotice from '~/components/VMigrationNotice.vue'
 
 export default defineComponent({
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 282edbc6dc..9746e98466 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -18,8 +18,6 @@
   </div>
 </template>
 <script>
-import iframeHeight from '~/mixins/iframe-height'
-
 import {
   computed,
   provide,
@@ -27,11 +25,17 @@ import {
   useContext,
   watch,
 } from '@nuxtjs/composition-api'
-import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
-import { isMinScreen } from '~/composables/use-media-query'
-import { useMatchSearchRoutes } from '~/composables/use-match-routes'
+
 import { useScroll } from '~/composables/use-scroll'
 
+import { useMatchSearchRoutes } from '~/composables/use-match-routes'
+
+import { isMinScreen } from '~/composables/use-media-query'
+
+import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+
+import iframeHeight from '~/mixins/iframe-height'
+
 import VMigrationNotice from '~/components/VMigrationNotice.vue'
 import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
 import VHeader from '~/components/VHeader/VHeader.vue'
diff --git a/src/layouts/error.vue b/src/layouts/error.vue
index 6980bca626..96220cdc22 100644
--- a/src/layouts/error.vue
+++ b/src/layouts/error.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import VFourOhFour from '~/components/VFourOhFour.vue'
 
 const Error = defineComponent({
diff --git a/src/locales/scripts/create-wp-locale-list.js b/src/locales/scripts/create-wp-locale-list.js
index 341eba8625..d415a7545a 100644
--- a/src/locales/scripts/create-wp-locale-list.js
+++ b/src/locales/scripts/create-wp-locale-list.js
@@ -4,8 +4,10 @@ This script extracts data for locales available in GlotPress and translate.wp.or
  and saves it to `wp-locales-list.json`.
  **/
 
-const axios = require('axios')
 const fs = require('fs')
+
+const axios = require('axios')
+
 const { addFetchedTranslationStatus } = require('./get-translations-status.js')
 
 const base_url =
diff --git a/src/locales/scripts/get-translations.js b/src/locales/scripts/get-translations.js
index 2325ff74dc..67415b9180 100644
--- a/src/locales/scripts/get-translations.js
+++ b/src/locales/scripts/get-translations.js
@@ -4,7 +4,9 @@
  */
 const { writeFile } = require('fs/promises')
 const os = require('os')
+
 const axios = require('axios')
+
 const jed1xJsonToJson = require('./jed1x-json-to-json')
 const localeJSON = require('./wp-locales.json')
 
diff --git a/src/locales/scripts/get-validated-locales.js b/src/locales/scripts/get-validated-locales.js
index 3d0292cf21..40f2a19a1a 100644
--- a/src/locales/scripts/get-validated-locales.js
+++ b/src/locales/scripts/get-validated-locales.js
@@ -4,6 +4,7 @@ and saves lists of translated and untranslated locales with properties expected
 by Vue i18n.
  */
 const fs = require('fs')
+
 const localesList = require('./wp-locales.json')
 const { addFetchedTranslationStatus } = require('./get-translations-status')
 
diff --git a/src/locales/scripts/json-to-pot.js b/src/locales/scripts/json-to-pot.js
index 751392feab..bba6dc9d47 100644
--- a/src/locales/scripts/json-to-pot.js
+++ b/src/locales/scripts/json-to-pot.js
@@ -1,5 +1,7 @@
-const json = require('../en.json')
 const fs = require('fs')
+
+const json = require('../en.json')
+
 const { createPotFile } = require('./json-pot-helpers')
 
 const matchPotCreationDate = /^"POT-Creation-Date: .*\\n"$/gm
diff --git a/src/locales/scripts/parse-vue-files.js b/src/locales/scripts/parse-vue-files.js
index 38aacdf9fb..13c2be6dd5 100644
--- a/src/locales/scripts/parse-vue-files.js
+++ b/src/locales/scripts/parse-vue-files.js
@@ -3,6 +3,7 @@
 
 const fs = require('fs')
 const path = require('path')
+
 const glob = require('glob')
 
 const BASE_PATH = path.dirname(path.dirname(__dirname))
diff --git a/src/mixins/iframe-height.js b/src/mixins/iframe-height.js
index a6463ac744..25df78e909 100644
--- a/src/mixins/iframe-height.js
+++ b/src/mixins/iframe-height.js
@@ -1,4 +1,5 @@
 import debounce from 'lodash.debounce'
+
 import { sendWindowMessage } from '~/utils/send-message'
 
 /**
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 166594fc56..e83395ea4b 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -94,9 +94,10 @@
 </template>
 
 <script>
-import VLink from '~/components/VLink.vue'
 import { defineComponent } from '@nuxtjs/composition-api'
 
+import VLink from '~/components/VLink.vue'
+
 const AboutPage = defineComponent({
   name: 'AboutPage',
   components: { VLink },
diff --git a/src/pages/audio/_id.vue b/src/pages/audio/_id.vue
index be85ee806e..c781b28186 100644
--- a/src/pages/audio/_id.vue
+++ b/src/pages/audio/_id.vue
@@ -22,6 +22,7 @@
 
 <script>
 import { mapState } from 'vuex'
+
 import { FETCH_MEDIA_ITEM } from '~/constants/action-types'
 import iframeHeight from '~/mixins/iframe-height'
 import { AUDIO } from '~/constants/media'
diff --git a/src/pages/audio/index.vue b/src/pages/audio/index.vue
index adc3a3d7bc..f01f94b165 100644
--- a/src/pages/audio/index.vue
+++ b/src/pages/audio/index.vue
@@ -2,6 +2,7 @@
 
 <script>
 import { defineComponent } from '@vue/composition-api'
+
 import VFourOhFour from '~/components/VFourOhFour.vue'
 
 export default defineComponent({
diff --git a/src/pages/extension.vue b/src/pages/extension.vue
index f8e1112673..d0244a4220 100644
--- a/src/pages/extension.vue
+++ b/src/pages/extension.vue
@@ -66,12 +66,12 @@
 </template>
 
 <script>
-import ExtensionBrowsers from '~/components/ExtensionBrowsers'
-
 import feature1 from '~/assets/screenshots/extension_feat_1.png'
 import feature2 from '~/assets/screenshots/extension_feat_2.png'
 import feature3 from '~/assets/screenshots/extension_feat_3.png'
 
+import ExtensionBrowsers from '~/components/ExtensionBrowsers'
+
 const AboutPage = {
   name: 'about-page',
   components: { ExtensionBrowsers },
diff --git a/src/pages/image/_id.vue b/src/pages/image/_id.vue
index 36879bf3cd..0cef6e4e93 100644
--- a/src/pages/image/_id.vue
+++ b/src/pages/image/_id.vue
@@ -82,13 +82,18 @@
 <script>
 import axios from 'axios'
 import { mapActions, mapState } from 'vuex'
-import { FETCH_MEDIA_ITEM } from '~/constants/action-types'
-import { MEDIA, USAGE_DATA } from '~/constants/store-modules'
+
 import {
   DETAIL_PAGE_EVENTS,
   SEND_DETAIL_PAGE_EVENT,
 } from '~/constants/usage-data-analytics-types'
 
+import { MEDIA, USAGE_DATA } from '~/constants/store-modules'
+
+import { FETCH_MEDIA_ITEM } from '~/constants/action-types'
+
+import { IMAGE } from '~/constants/media'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VLink from '~/components/VLink.vue'
@@ -96,7 +101,6 @@ import VImageDetails from '~/components/VImageDetails/VImageDetails.vue'
 import VMediaReuse from '~/components/VMediaInfo/VMediaReuse.vue'
 import VRelatedImages from '~/components/VImageDetails/VRelatedImages.vue'
 import SketchFabViewer from '~/components/SketchFabViewer.vue'
-import { IMAGE } from '~/constants/media'
 
 const VImageDetailsPage = {
   name: 'VImageDetailsPage',
diff --git a/src/pages/image/index.vue b/src/pages/image/index.vue
index adc3a3d7bc..f01f94b165 100644
--- a/src/pages/image/index.vue
+++ b/src/pages/image/index.vue
@@ -2,6 +2,7 @@
 
 <script>
 import { defineComponent } from '@vue/composition-api'
+
 import VFourOhFour from '~/components/VFourOhFour.vue'
 
 export default defineComponent({
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 8a0fbf81d1..0d4b1fca75 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -129,21 +129,20 @@
 <script>
 import { ref, useContext, useRouter, useStore } from '@nuxtjs/composition-api'
 
-import { isMinScreen } from '~/composables/use-media-query'
-
-import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
-import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
+import { MEDIA, SEARCH } from '~/constants/store-modules'
+import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
+import { isMinScreen } from '~/composables/use-media-query'
 
+import OpenverseBrand from '~/assets/brand.svg?inline'
+import OpenverseLogo from '~/assets/logo.svg?inline'
 import imageInfo from '~/assets/homepage_images/image_info.json'
 
-import OpenverseLogo from '~/assets/logo.svg?inline'
-import OpenverseBrand from '~/assets/brand.svg?inline'
-import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
-import VSearchTypeRadio from '~/components/VContentSwitcher/VSearchTypeRadio.vue'
-import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
-import VLogoButton from '~/components/VHeader/VLogoButton.vue'
 import VLink from '~/components/VLink.vue'
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
+import VSearchTypeRadio from '~/components/VContentSwitcher/VSearchTypeRadio.vue'
+import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
 
 const HomePage = {
   name: 'home-page',
diff --git a/src/pages/meta-search.vue b/src/pages/meta-search.vue
index 4a94e114ee..40e05ec284 100644
--- a/src/pages/meta-search.vue
+++ b/src/pages/meta-search.vue
@@ -117,6 +117,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 15ad3916e6..ae0c2e6b37 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -29,6 +29,8 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex'
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal'
+import { inject } from '@nuxtjs/composition-api'
+
 import {
   FETCH_MEDIA,
   UPDATE_QUERY,
@@ -36,14 +38,12 @@ import {
 } from '~/constants/action-types'
 import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
 import { MEDIA, SEARCH } from '~/constants/store-modules'
-
-import { inject } from '@nuxtjs/composition-api'
 import { isMinScreen } from '~/composables/use-media-query.js'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
-import VScrollButton from '~/components/VScrollButton.vue'
 import VSearchGrid from '~/components/VSearchGrid.vue'
 import VSkipToContentContainer from '~/components/VSkipToContentContainer.vue'
+import VScrollButton from '~/components/VScrollButton.vue'
 
 const BrowsePage = {
   name: 'browse-page',
diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
index 8630a589d9..974bd279a4 100644
--- a/src/pages/search/audio.vue
+++ b/src/pages/search/audio.vue
@@ -29,15 +29,21 @@ import {
   useMeta,
   useStore,
 } from '@nuxtjs/composition-api'
+
 import { useLoadMore } from '~/composables/use-load-more'
+
 import { isMinScreen } from '~/composables/use-media-query'
+
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
-import { propTypes } from './search-page.types'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+
 import VLoadMore from '~/components/VLoadMore.vue'
+
 import VGridSkeleton from '~/components/VSkeleton/VGridSkeleton.vue'
 
+import { propTypes } from './search-page.types'
+
 const AudioSearch = defineComponent({
   name: 'AudioSearch',
   components: {
diff --git a/src/pages/search/image.vue b/src/pages/search/image.vue
index 29f3c2adde..b2277e44b3 100644
--- a/src/pages/search/image.vue
+++ b/src/pages/search/image.vue
@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import { propTypes } from '~/pages/search/search-page.types'
 import {
   useStore,
   computed,
@@ -16,6 +15,8 @@ import {
   useMeta,
   useContext,
 } from '@nuxtjs/composition-api'
+
+import { propTypes } from '~/pages/search/search-page.types'
 import { useLoadMore } from '~/composables/use-load-more'
 
 const ImageSearch = defineComponent({
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index 34d4c29531..73d4365b83 100644
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import { propTypes } from '~/pages/search/search-page.types'
 import {
   useMeta,
   useStore,
@@ -11,7 +10,10 @@ import {
   computed,
   useContext,
 } from '@nuxtjs/composition-api'
+
+import { propTypes } from '~/pages/search/search-page.types'
 import { useLoadMore } from '~/composables/use-load-more'
+
 import VAllResultsGrid from '~/components/VAllResultsGrid/VAllResultsGrid.vue'
 
 const SearchIndex = defineComponent({
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 15cdd05498..09d09f4c2e 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -145,8 +145,10 @@
 <script>
 import sortBy from 'lodash.sortby'
 import { mapState } from 'vuex'
+
 import { PROVIDER } from '~/constants/store-modules'
 import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
+
 import VLink from '~/components/VLink.vue'
 
 const SourcePage = {
diff --git a/src/store/provider.js b/src/store/provider.js
index 1e6a8c6b8c..22bed294c1 100644
--- a/src/store/provider.js
+++ b/src/store/provider.js
@@ -1,10 +1,11 @@
+import { capital } from 'case'
+
 import MediaProviderService from '~/data/media-provider-service'
 import { AUDIO, IMAGE } from '~/constants/media'
 import {
   FETCH_MEDIA_TYPE_PROVIDERS,
   FETCH_MEDIA_PROVIDERS,
 } from '~/constants/action-types'
-
 import {
   SET_PROVIDER_FETCH_ERROR,
   FETCH_MEDIA_PROVIDERS_END,
@@ -12,7 +13,6 @@ import {
   SET_MEDIA_PROVIDERS,
   SET_PROVIDERS_FILTERS,
 } from '~/constants/mutation-types'
-import { capital } from 'case'
 import { SEARCH } from '~/constants/store-modules'
 
 const AudioProviderService = MediaProviderService(AUDIO)
diff --git a/src/utils/search-query-transform.js b/src/utils/search-query-transform.js
index 3f764781af..c52c2aee96 100644
--- a/src/utils/search-query-transform.js
+++ b/src/utils/search-query-transform.js
@@ -1,8 +1,10 @@
 import clonedeep from 'lodash.clonedeep'
+
 import { mediaFilterKeys } from '~/store/search'
-import getParameterByName from './get-parameter-by-name'
 import { ALL_MEDIA } from '~/constants/media'
 
+import getParameterByName from './get-parameter-by-name'
+
 const filterPropertyMappings = {
   licenses: 'license',
   licenseTypes: 'license_type',
diff --git a/test/e2e/filters.spec.js b/test/e2e/filters.spec.js
index 3c8dc0d03a..0677a1fde4 100644
--- a/test/e2e/filters.spec.js
+++ b/test/e2e/filters.spec.js
@@ -1,4 +1,5 @@
 const { test, expect } = require('@playwright/test')
+
 const {
   assertCheckboxCheckedStatus,
   openFilters,
diff --git a/test/e2e/search-navigation.spec.js b/test/e2e/search-navigation.spec.js
index c2ea3139e2..b7dc7fec3a 100644
--- a/test/e2e/search-navigation.spec.js
+++ b/test/e2e/search-navigation.spec.js
@@ -1,4 +1,5 @@
 const { expect, test } = require('@playwright/test')
+
 const { mockAllSearch, openFilters } = require('./utils')
 
 test.beforeEach(async ({ context }) => {
diff --git a/test/e2e/search-query-client.spec.js b/test/e2e/search-query-client.spec.js
index ce0d376d97..55e15dfda9 100644
--- a/test/e2e/search-query-client.spec.js
+++ b/test/e2e/search-query-client.spec.js
@@ -1,4 +1,5 @@
 const { test, expect } = require('@playwright/test')
+
 const { mockAllSearch, changeContentType } = require('./utils')
 
 /**
diff --git a/test/e2e/search-query-server.spec.js b/test/e2e/search-query-server.spec.js
index e1cceb6249..003b72b5c7 100644
--- a/test/e2e/search-query-server.spec.js
+++ b/test/e2e/search-query-server.spec.js
@@ -1,4 +1,5 @@
 const { test, expect } = require('@playwright/test')
+
 const { mockAllSearch, openFilters } = require('./utils')
 const { currentContentType, assertCheckboxCheckedStatus } = require('./utils')
 
diff --git a/test/e2e/search-types.spec.js b/test/e2e/search-types.spec.js
index 0d6df559f8..51a59fe9c2 100644
--- a/test/e2e/search-types.spec.js
+++ b/test/e2e/search-types.spec.js
@@ -1,4 +1,5 @@
 const { test, expect } = require('@playwright/test')
+
 const { mockAllSearch, changeContentType } = require('./utils')
 
 /**
diff --git a/test/e2e/search.spec.js b/test/e2e/search.spec.js
index 920cf2ad87..128dbee173 100644
--- a/test/e2e/search.spec.js
+++ b/test/e2e/search.spec.js
@@ -7,6 +7,7 @@
  * On error: shows error message
  */
 const { expect, test } = require('@playwright/test')
+
 const { mockAllSearch } = require('./utils')
 
 test.beforeEach(async ({ context }) => {
diff --git a/test/unit/setup.js b/test/unit/setup.js
index 319341d03a..e1f287d943 100644
--- a/test/unit/setup.js
+++ b/test/unit/setup.js
@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import { env } from '~/utils/env'
 import { config } from '@vue/test-utils'
 
+import { env } from '~/utils/env'
+
 // Attach nuxt config to process
 for (const [key, value] of Object.entries(env)) {
   process.env[key] = value
diff --git a/test/unit/specs/components/AudioTrack/audio-track.spec.js b/test/unit/specs/components/AudioTrack/audio-track.spec.js
index 7a04b294f2..0cfe5350c2 100644
--- a/test/unit/specs/components/AudioTrack/audio-track.spec.js
+++ b/test/unit/specs/components/AudioTrack/audio-track.spec.js
@@ -1,13 +1,15 @@
-import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 import { render } from '@testing-library/vue'
 import Vuei18n from 'vue-i18n'
 import Vuex from 'vuex'
 
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+
 jest.mock('~/composables/use-browser-detection', () => ({
   useBrowserIsBlink: jest.fn(() => false),
 }))
 
 const enMessages = require('~/locales/en.json')
+
 const useVueI18n = (vue) => {
   vue.use(Vuei18n)
 
diff --git a/test/unit/specs/components/ContentReport/content-report-form.spec.js b/test/unit/specs/components/ContentReport/content-report-form.spec.js
index 57d30ee3f7..7cce0d3ebe 100644
--- a/test/unit/specs/components/ContentReport/content-report-form.spec.js
+++ b/test/unit/specs/components/ContentReport/content-report-form.spec.js
@@ -1,9 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/vue'
 import { createLocalVue } from '@vue/test-utils'
 import VueI18n from 'vue-i18n'
+
 import VContentReportForm from '~/components/VContentReport/VContentReportForm.vue'
 
 const messages = require('~/locales/en.json')
+
 const i18n = new VueI18n({
   locale: 'en',
   fallbackLocale: 'en',
diff --git a/test/unit/specs/components/ImageDetails/reuse-survey.spec.js b/test/unit/specs/components/ImageDetails/reuse-survey.spec.js
index 17d1cf2063..28586c6a50 100644
--- a/test/unit/specs/components/ImageDetails/reuse-survey.spec.js
+++ b/test/unit/specs/components/ImageDetails/reuse-survey.spec.js
@@ -1,12 +1,15 @@
-import ReuseSurvey from '~/components/ImageDetails/ReuseSurvey'
+import { mount } from '@vue/test-utils'
+
 import {
   DETAIL_PAGE_EVENTS,
   SEND_DETAIL_PAGE_EVENT,
 } from '~/constants/usage-data-analytics-types'
-import render from '../../../test-utils/render'
-import i18n from '../../../test-utils/i18n'
 import { USAGE_DATA } from '~/constants/store-modules'
-import { mount } from '@vue/test-utils'
+
+import ReuseSurvey from '~/components/ImageDetails/ReuseSurvey'
+
+import i18n from '../../../test-utils/i18n'
+import render from '../../../test-utils/render'
 
 describe('ImageAttribution', () => {
   let options = null
diff --git a/test/unit/specs/components/ImageDetails/v-copy-license.spec.js b/test/unit/specs/components/ImageDetails/v-copy-license.spec.js
index f1f5952fd9..1c75fe187e 100644
--- a/test/unit/specs/components/ImageDetails/v-copy-license.spec.js
+++ b/test/unit/specs/components/ImageDetails/v-copy-license.spec.js
@@ -1,11 +1,12 @@
-import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 import {
   DETAIL_PAGE_EVENTS,
   SEND_DETAIL_PAGE_EVENT,
 } from '~/constants/usage-data-analytics-types'
+import { USAGE_DATA } from '~/constants/store-modules'
+
+import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 
 import render from '../../../test-utils/render'
-import { USAGE_DATA } from '~/constants/store-modules'
 
 describe('VCopyLicense', () => {
   let options = null
diff --git a/test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js b/test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js
index 4ee55f414e..bd5be5b344 100644
--- a/test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js
+++ b/test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js
@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/vue'
+
 import { useMatchHomeRoute } from '~/composables/use-match-routes'
+
 import SearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 jest.mock('~/composables/use-match-routes', () => ({
diff --git a/test/unit/specs/components/VHeader/v-filter-button.spec.js b/test/unit/specs/components/VHeader/v-filter-button.spec.js
index 4f44db048c..9fd274170b 100644
--- a/test/unit/specs/components/VHeader/v-filter-button.spec.js
+++ b/test/unit/specs/components/VHeader/v-filter-button.spec.js
@@ -1,12 +1,13 @@
 import { render, screen } from '@testing-library/vue'
-
-import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueI18n from 'vue-i18n'
-import messages from '../../../../../src/locales/en.json'
 import { ref } from '@nuxtjs/composition-api'
 
+import VFilterButton from '~/components/VHeader/VFilterButton.vue'
+
+import messages from '../../../../../src/locales/en.json'
+
 describe('VFilterButton', () => {
   let options = {}
   let storeMock
diff --git a/test/unit/specs/components/VMediaTag/v-media-tag.spec.js b/test/unit/specs/components/VMediaTag/v-media-tag.spec.js
index c42fba03ab..4d4efc1c49 100644
--- a/test/unit/specs/components/VMediaTag/v-media-tag.spec.js
+++ b/test/unit/specs/components/VMediaTag/v-media-tag.spec.js
@@ -1,7 +1,9 @@
 import { RouterLinkStub } from '@vue/test-utils'
-import VMediaTag from '~/components/VMediaTag/VMediaTag'
+
 import render from '~/../test/unit/test-utils/render'
 
+import VMediaTag from '~/components/VMediaTag/VMediaTag'
+
 describe('VMediaTag', () => {
   let props = null
   let options = null
diff --git a/test/unit/specs/components/copy-button.spec.js b/test/unit/specs/components/copy-button.spec.js
index cdc69169b4..0662f3cd7a 100644
--- a/test/unit/specs/components/copy-button.spec.js
+++ b/test/unit/specs/components/copy-button.spec.js
@@ -1,4 +1,5 @@
 import CopyButton from '~/components/CopyButton'
+
 import render from '../../test-utils/render'
 
 describe('CopyButton', () => {
diff --git a/test/unit/specs/components/download-button.spec.js b/test/unit/specs/components/download-button.spec.js
index 25100a2a0b..1cd07364a4 100644
--- a/test/unit/specs/components/download-button.spec.js
+++ b/test/unit/specs/components/download-button.spec.js
@@ -1,11 +1,13 @@
-import DownloadButton from '~/components/DownloadButton'
-import render from '../../test-utils/render'
 import { mount } from '@vue/test-utils'
 import axios from 'axios'
 import MockAdapter from 'axios-mock-adapter'
 
 import local from '~/utils/local'
 
+import DownloadButton from '~/components/DownloadButton'
+
+import render from '../../test-utils/render'
+
 jest.mock('~/utils/local', () => ({
   get: jest.fn(),
   set: jest.fn(),
diff --git a/test/unit/specs/components/dropdown-button.spec.js b/test/unit/specs/components/dropdown-button.spec.js
index e3f987a284..3e82564fa0 100644
--- a/test/unit/specs/components/dropdown-button.spec.js
+++ b/test/unit/specs/components/dropdown-button.spec.js
@@ -1,8 +1,9 @@
 import Vue from 'vue'
-import DropdownButton from '~/components/DropdownButton'
 import { render, screen, fireEvent } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 
+import DropdownButton from '~/components/DropdownButton'
+
 const TestWrapper = Vue.component('TestWrapper', {
   components: { DropdownButton },
   data: () => ({
diff --git a/test/unit/specs/components/dropdown.spec.js b/test/unit/specs/components/dropdown.spec.js
index 35b3e95100..af05277dc8 100644
--- a/test/unit/specs/components/dropdown.spec.js
+++ b/test/unit/specs/components/dropdown.spec.js
@@ -1,6 +1,7 @@
-import Dropdown from '~/components/Dropdown'
 import { render, fireEvent } from '@testing-library/vue'
 
+import Dropdown from '~/components/Dropdown'
+
 describe('Dropdown', () => {
   let options = {}
   let props = null
diff --git a/test/unit/specs/components/filter-checklist.spec.js b/test/unit/specs/components/filter-checklist.spec.js
index c944c36a5c..170d5760bd 100644
--- a/test/unit/specs/components/filter-checklist.spec.js
+++ b/test/unit/specs/components/filter-checklist.spec.js
@@ -1,7 +1,8 @@
-import FilterChecklist from '~/components/VFilters/VFilterChecklist'
 import { createLocalVue } from '@vue/test-utils'
 import { fireEvent, render, screen } from '@testing-library/vue'
 
+import FilterChecklist from '~/components/VFilters/VFilterChecklist'
+
 describe('FilterChecklist', () => {
   let options = {}
   let props = null
diff --git a/test/unit/specs/components/filter-tag.spec.js b/test/unit/specs/components/filter-tag.spec.js
index c26fac5785..241dd56e7e 100644
--- a/test/unit/specs/components/filter-tag.spec.js
+++ b/test/unit/specs/components/filter-tag.spec.js
@@ -1,7 +1,8 @@
-import FilterTag from '~/components/VFilters/VFilterTag'
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 
+import FilterTag from '~/components/VFilters/VFilterTag'
+
 describe('FilterTag', () => {
   let options = {}
   let props = null
diff --git a/test/unit/specs/components/image-grid.spec.js b/test/unit/specs/components/image-grid.spec.js
index c7465fbc8a..6b58687afc 100644
--- a/test/unit/specs/components/image-grid.spec.js
+++ b/test/unit/specs/components/image-grid.spec.js
@@ -1,8 +1,10 @@
-import ImageGrid from '~/components/ImageGrid/ImageGrid'
 import { render, screen } from '@testing-library/vue'
 import VueI18n from 'vue-i18n'
+
 import messages from '~/locales/en.json'
 
+import ImageGrid from '~/components/ImageGrid/ImageGrid'
+
 const i18n = new VueI18n({
   locale: 'en',
   fallbackLocale: 'en',
diff --git a/test/unit/specs/components/loading-icon.spec.js b/test/unit/specs/components/loading-icon.spec.js
index 9e42b3014b..225b114d33 100644
--- a/test/unit/specs/components/loading-icon.spec.js
+++ b/test/unit/specs/components/loading-icon.spec.js
@@ -1,4 +1,5 @@
 import LoadingIcon from '~/components/LoadingIcon'
+
 import render from '../../test-utils/render'
 
 describe('LoadingIcon', () => {
diff --git a/test/unit/specs/components/related-audios.spec.js b/test/unit/specs/components/related-audios.spec.js
index 93ad1e48e6..3fcf3fca6c 100644
--- a/test/unit/specs/components/related-audios.spec.js
+++ b/test/unit/specs/components/related-audios.spec.js
@@ -1,9 +1,11 @@
-import VRelatedAudio from '~/components/VAudioDetails/VRelatedAudio.vue'
-import render from '../../test-utils/render'
 import { createLocalVue, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueI18n from 'vue-i18n'
 
+import VRelatedAudio from '~/components/VAudioDetails/VRelatedAudio.vue'
+
+import render from '../../test-utils/render'
+
 const audioResults = [{ id: 'audio1' }, { id: 'audio2' }]
 const serviceMock = {
   getRelatedMedia: jest.fn(() => Promise.resolve({ results: audioResults })),
diff --git a/test/unit/specs/components/related-images.spec.js b/test/unit/specs/components/related-images.spec.js
index 5e6d29f189..722e66456e 100644
--- a/test/unit/specs/components/related-images.spec.js
+++ b/test/unit/specs/components/related-images.spec.js
@@ -2,6 +2,7 @@ import Vuex from 'vuex'
 import VueI18n from 'vue-i18n'
 import { createLocalVue } from '@vue/test-utils'
 import { render, screen } from '@testing-library/vue'
+
 import VRelatedImages from '~/components/VImageDetails/VRelatedImages'
 
 const serviceMock = jest.fn(() =>
diff --git a/test/unit/specs/components/scroll-button.spec.js b/test/unit/specs/components/scroll-button.spec.js
index a22f690b28..e46370bfef 100644
--- a/test/unit/specs/components/scroll-button.spec.js
+++ b/test/unit/specs/components/scroll-button.spec.js
@@ -1,6 +1,7 @@
-import VScrollButton from '~/components/VScrollButton'
 import { render, screen } from '@testing-library/vue'
 
+import VScrollButton from '~/components/VScrollButton'
+
 describe('Scroll button', () => {
   it('should render a scroll button', () => {
     const { container } = render(VScrollButton)
diff --git a/test/unit/specs/components/search-grid-filter.spec.js b/test/unit/specs/components/search-grid-filter.spec.js
index 00877681b7..1dd09b052a 100644
--- a/test/unit/specs/components/search-grid-filter.spec.js
+++ b/test/unit/specs/components/search-grid-filter.spec.js
@@ -1,12 +1,14 @@
 import Vuex from 'vuex'
 import { fireEvent, render, screen } from '@testing-library/vue'
 import { createLocalVue } from '@vue/test-utils'
+import clonedeep from 'lodash.clonedeep'
+
 import { IMAGE } from '~/constants/media'
 import store from '~/store/search'
-import clonedeep from 'lodash.clonedeep'
-import SearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 import { FETCH_MEDIA } from '~/constants/action-types'
 
+import SearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
+
 const initialFilters = {
   licenseTypes: [
     {
diff --git a/test/unit/specs/components/search-grid.spec.js b/test/unit/specs/components/search-grid.spec.js
index acb4744a38..bf02946850 100644
--- a/test/unit/specs/components/search-grid.spec.js
+++ b/test/unit/specs/components/search-grid.spec.js
@@ -1,8 +1,9 @@
 import Vuex from 'vuex'
 import { render, screen } from '@testing-library/vue'
-import { IMAGE } from '~/constants/media'
 import { createLocalVue } from '@vue/test-utils'
 import VueI18n from 'vue-i18n'
+
+import { IMAGE } from '~/constants/media'
 import messages from '~/locales/en.json'
 
 import VSearchGrid from '~/components/VSearchGrid'
diff --git a/test/unit/specs/components/search-rating.spec.js b/test/unit/specs/components/search-rating.spec.js
index 81aba8f5ae..ac0c3c69d6 100644
--- a/test/unit/specs/components/search-rating.spec.js
+++ b/test/unit/specs/components/search-rating.spec.js
@@ -1,8 +1,10 @@
-import VSearchRating from '~/components/VSearchRating'
-import render from '../../test-utils/render'
 import { USAGE_DATA } from '~/constants/store-modules'
 import { SEND_SEARCH_RATING_EVENT } from '~/constants/usage-data-analytics-types'
 
+import VSearchRating from '~/components/VSearchRating'
+
+import render from '../../test-utils/render'
+
 describe('VSearchRating', () => {
   let options = {}
   let dispatchMock = null
diff --git a/test/unit/specs/components/v-button.spec.js b/test/unit/specs/components/v-button.spec.js
index 2d11723e9f..809834da38 100644
--- a/test/unit/specs/components/v-button.spec.js
+++ b/test/unit/specs/components/v-button.spec.js
@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/vue'
 
-import VButton from '~/components/VButton.vue'
 import { warn } from '~/utils/warn'
 
+import VButton from '~/components/VButton.vue'
+
 jest.mock('~/utils/warn', () => ({ warn: jest.fn() }))
 
 const nextTick = () => new Promise((r) => setTimeout(r, 0))
diff --git a/test/unit/specs/components/v-checkbox.spec.js b/test/unit/specs/components/v-checkbox.spec.js
index 2d5f4385d4..dfcb54b3d1 100644
--- a/test/unit/specs/components/v-checkbox.spec.js
+++ b/test/unit/specs/components/v-checkbox.spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { fireEvent, render, screen } from '@testing-library/vue'
+
 import VCheckbox from '~/components/VCheckbox/VCheckbox'
 import VLicense from '~/components/License/VLicense'
 
diff --git a/test/unit/specs/components/v-content-link.spec.js b/test/unit/specs/components/v-content-link.spec.js
index f52ed9e523..53df1c1144 100644
--- a/test/unit/specs/components/v-content-link.spec.js
+++ b/test/unit/specs/components/v-content-link.spec.js
@@ -1,8 +1,10 @@
-import VContentLink from '~/components/VContentLink/VContentLink.vue'
 import { render, screen } from '@testing-library/vue'
 import VueI18n from 'vue-i18n'
 
+import VContentLink from '~/components/VContentLink/VContentLink.vue'
+
 const enMessages = require('~/locales/en.json')
+
 const i18n = new VueI18n({
   locale: 'en',
   fallbackLocale: 'en',
diff --git a/test/unit/specs/components/v-item-group.spec.js b/test/unit/specs/components/v-item-group.spec.js
index bb16c4fdca..21759bd246 100644
--- a/test/unit/specs/components/v-item-group.spec.js
+++ b/test/unit/specs/components/v-item-group.spec.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import { ref } from '@nuxtjs/composition-api'
 import { render, screen } from '@testing-library/vue'
-import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
-import VItem from '~/components/VItemGroup/VItem.vue'
 import userEvent from '@testing-library/user-event'
+
 import { useI18n } from '~/composables/use-i18n'
 
+import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
+import VItem from '~/components/VItemGroup/VItem.vue'
+
 jest.mock('~/composables/use-i18n', () => ({
   useI18n: jest.fn(),
 }))
diff --git a/test/unit/specs/components/v-license.spec.js b/test/unit/specs/components/v-license.spec.js
index 72e7058fc1..f4383f71eb 100644
--- a/test/unit/specs/components/v-license.spec.js
+++ b/test/unit/specs/components/v-license.spec.js
@@ -1,6 +1,7 @@
-import VLicense from '~/components/License/VLicense'
 import { render, screen } from '@testing-library/vue'
 
+import VLicense from '~/components/License/VLicense'
+
 describe('VLicense', () => {
   let options = {
     props: {
diff --git a/test/unit/specs/components/v-link.spec.js b/test/unit/specs/components/v-link.spec.js
index e8758114e5..2e4d6f8bfd 100644
--- a/test/unit/specs/components/v-link.spec.js
+++ b/test/unit/specs/components/v-link.spec.js
@@ -1,8 +1,9 @@
 // eslint-disable vue/one-component-per-file
 import { fireEvent, render, screen } from '@testing-library/vue'
-import VLink from '~/components/VLink.vue'
 import Vue from 'vue'
 
+import VLink from '~/components/VLink.vue'
+
 const nuxtContextMock = {
   $nuxt: { context: { app: { localePath: jest.fn((v) => v) } } },
 }
diff --git a/test/unit/specs/components/v-logo-loader.spec.js b/test/unit/specs/components/v-logo-loader.spec.js
index 52d38e8e6b..d7ccfce08a 100644
--- a/test/unit/specs/components/v-logo-loader.spec.js
+++ b/test/unit/specs/components/v-logo-loader.spec.js
@@ -1,7 +1,9 @@
 import { render, screen } from '@testing-library/vue'
-import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+
 import { useReducedMotion } from '~/composables/use-media-query'
 
+import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
+
 jest.mock('~/utils/warn', () => ({
   warn: jest.fn(),
 }))
diff --git a/test/unit/specs/components/v-popover.spec.js b/test/unit/specs/components/v-popover.spec.js
index 63e110e407..828f936df5 100644
--- a/test/unit/specs/components/v-popover.spec.js
+++ b/test/unit/specs/components/v-popover.spec.js
@@ -1,11 +1,14 @@
 import Vue from 'vue'
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import VButton from '~/components/VButton.vue'
-import VPopover from '~/components/VPopover/VPopover.vue'
+
 import { noFocusableElementWarning } from '~/composables/use-focus-on-show'
+
 import { warn } from '~/utils/warn'
 
+import VButton from '~/components/VButton.vue'
+import VPopover from '~/components/VPopover/VPopover.vue'
+
 jest.mock('~/utils/warn', () => ({
   warn: jest.fn(),
 }))
diff --git a/test/unit/specs/components/v-search-results-title.spec.js b/test/unit/specs/components/v-search-results-title.spec.js
index aedc28f6ad..af546ccdb6 100644
--- a/test/unit/specs/components/v-search-results-title.spec.js
+++ b/test/unit/specs/components/v-search-results-title.spec.js
@@ -1,6 +1,7 @@
-import VSearchResultsTitle from '~/components/VSearchResultsTitle'
 import { render, screen } from '@testing-library/vue'
 
+import VSearchResultsTitle from '~/components/VSearchResultsTitle'
+
 describe('VSearchResultsTitle', () => {
   let options = {
     props: {
diff --git a/test/unit/specs/composables/use-get-locale-formatted-number.spec.js b/test/unit/specs/composables/use-get-locale-formatted-number.spec.js
index f2f27ec46a..264316744c 100644
--- a/test/unit/specs/composables/use-get-locale-formatted-number.spec.js
+++ b/test/unit/specs/composables/use-get-locale-formatted-number.spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import { render } from '@testing-library/vue'
 import VueI18n from 'vue-i18n'
-import messages from '~/locales/en.json'
 
+import messages from '~/locales/en.json'
 import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
 
 const TestWrapper = Vue.component('TestWrapper', {
diff --git a/test/unit/specs/composables/use-i18n-utilities.spec.js b/test/unit/specs/composables/use-i18n-utilities.spec.js
index 09a8244657..839cd6b957 100644
--- a/test/unit/specs/composables/use-i18n-utilities.spec.js
+++ b/test/unit/specs/composables/use-i18n-utilities.spec.js
@@ -1,4 +1,5 @@
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
+
 jest.mock('@nuxtjs/composition-api', () => ({
   useContext: () => ({
     i18n: {
diff --git a/test/unit/specs/pages/browse-page.spec.js b/test/unit/specs/pages/browse-page.spec.js
index 07510c5ca7..a9589975c1 100644
--- a/test/unit/specs/pages/browse-page.spec.js
+++ b/test/unit/specs/pages/browse-page.spec.js
@@ -1,9 +1,10 @@
-import SearchIndex from '~/pages/search.vue'
 import { render, screen } from '@testing-library/vue'
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import { ref } from '@nuxtjs/composition-api'
 
+import SearchIndex from '~/pages/search.vue'
+
 describe('SearchIndex', () => {
   let options
   let localVue
diff --git a/test/unit/specs/store/user.spec.js b/test/unit/specs/store/user.spec.js
index 0a4aba516c..0407bddb0d 100644
--- a/test/unit/specs/store/user.spec.js
+++ b/test/unit/specs/store/user.spec.js
@@ -1,6 +1,7 @@
-import * as user from '~/store/user'
 import { v4 as uuidv4 } from 'uuid'
 
+import * as user from '~/store/user'
+
 jest.mock('uuid', () => ({ v4: jest.fn() }))
 
 describe('user store', () => {
diff --git a/test/unit/specs/utils/search-query-transform.spec.js b/test/unit/specs/utils/search-query-transform.spec.js
index 1da5209d3c..f36658c619 100644
--- a/test/unit/specs/utils/search-query-transform.spec.js
+++ b/test/unit/specs/utils/search-query-transform.spec.js
@@ -1,4 +1,5 @@
 import clonedeep from 'lodash.clonedeep'
+
 import {
   filtersToQueryData,
   queryToFilterData,
diff --git a/test/unit/test-utils/render.js b/test/unit/test-utils/render.js
index 046bf2a0bf..defaf4049b 100644
--- a/test/unit/test-utils/render.js
+++ b/test/unit/test-utils/render.js
@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 import VueI18n from 'vue-i18n'
 import { shallowMount, createLocalVue } from '@vue/test-utils'
+
 import sampleStore from './sample-store'
 
 const localVue = createLocalVue()
@@ -8,6 +9,7 @@ localVue.use(Vuex)
 localVue.use(VueI18n)
 
 const messages = require('../../../src/locales/en.json')
+
 const i18n = new VueI18n({
   locale: 'en',
   fallbackLocale: 'en',
diff --git a/typings/vue/index.d.ts b/typings/vue/index.d.ts
index d9f24faa42..5596f90ef3 100644
--- a/typings/vue/index.d.ts
+++ b/typings/vue/index.d.ts
@@ -1,4 +1,5 @@
 declare module '*.vue' {
   import Vue from 'vue'
+
   export default Vue
 }