Add rules for linting import order

.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': {

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'
 

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: {

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 =

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.

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: {

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({

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://') => {

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'

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 },

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

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.

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'
 

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'

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({

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.

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 },

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,

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 },

src/components/VContentReport/VContentReportForm.vue

@@ -105,19 +105,19 @@
 <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'
 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: {

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 },

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({

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({

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'

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 },