From d9f8746438691807a6e7da9ef0081632f5b31c81 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Sun, 11 Jun 2023 18:37:40 +0100
Subject: [PATCH] Consistent extension usage in imports (#1171)

---
 .eslintrc.js                                 | 11 ++++++++
 app.vue                                      |  2 +-
 components/ui/FileInput.vue                  |  2 +-
 components/ui/ModalConfirm.vue               |  4 +--
 components/ui/ModalCreation.vue              |  4 +--
 components/ui/ModalModeration.vue            |  8 +++---
 components/ui/ModalReport.vue                |  6 ++---
 components/ui/ModalTransfer.vue              |  4 +--
 components/ui/ProjectCard.vue                |  8 +++---
 components/ui/ProjectPublishingChecklist.vue |  2 +-
 components/ui/VersionFilterControl.vue       |  2 +-
 components/ui/search/SearchFilter.vue        |  2 +-
 helpers/fileUtils.js                         |  2 +-
 helpers/highlight.js                         |  2 +-
 layouts/default.vue                          |  6 ++---
 package.json                                 |  2 ++
 pages/[type]/[id].vue                        | 28 ++++++++++----------
 pages/[type]/[id]/changelog.vue              |  6 ++---
 pages/[type]/[id]/gallery.vue                |  8 +++---
 pages/[type]/[id]/index.vue                  |  2 +-
 pages/[type]/[id]/settings/description.vue   |  4 +--
 pages/[type]/[id]/settings/index.vue         |  6 ++---
 pages/[type]/[id]/settings/members.vue       |  6 ++---
 pages/[type]/[id]/settings/tags.vue          |  2 +-
 pages/[type]/[id]/version/[version].vue      | 28 ++++++++++----------
 pages/[type]/[id]/versions.vue               | 12 ++++-----
 pages/dashboard.vue                          |  4 +--
 pages/dashboard/revenue/index.vue            |  2 +-
 pages/index.vue                              |  4 +--
 pages/legal.vue                              |  4 +--
 pages/moderation.vue                         | 12 ++++-----
 pages/notifications.vue                      |  6 ++---
 pages/search/[searchProjectType].vue         | 10 +++----
 pages/settings.vue                           |  4 +--
 pages/settings/account.vue                   |  4 +--
 pages/settings/follows.vue                   |  2 +-
 pages/settings/monetization.vue              |  2 +-
 pages/user/[id].vue                          | 18 ++++++-------
 pnpm-lock.yaml                               |  6 +++++
 39 files changed, 133 insertions(+), 114 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index feb2388a..c766c81f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,10 +9,21 @@ module.exports = {
     '@nuxtjs/eslint-config-typescript',
     'plugin:prettier/recommended', // Integrate Prettier into ESLint
     'prettier', // Disable unnecessary ESLint rules in the presence of Prettier
+    'plugin:import/recommended',
+    'plugin:import/typescript',
   ],
   rules: {
     'no-console': 'off',
     'vue/no-v-html': 'off',
     'vue/multi-word-component-names': 'off',
+    'import/extensions': ['error', 'always', { ignorePackages: true }],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: true,
+    },
   },
 }
diff --git a/app.vue b/app.vue
index 78ee6e8a..7b8ef22a 100644
--- a/app.vue
+++ b/app.vue
@@ -6,6 +6,6 @@
   </NuxtLayout>
 </template>
 <script setup lang="ts">
-import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator'
+import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
 import Notifications from '~/components/ui/Notifications.vue'
 </script>
diff --git a/components/ui/FileInput.vue b/components/ui/FileInput.vue
index 509e508f..e0722ec8 100644
--- a/components/ui/FileInput.vue
+++ b/components/ui/FileInput.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { fileIsValid } from '~/helpers/fileUtils'
+import { fileIsValid } from '~/helpers/fileUtils.js'
 
 export default {
   components: {},
diff --git a/components/ui/ModalConfirm.vue b/components/ui/ModalConfirm.vue
index a5b3e208..d9c2a88b 100644
--- a/components/ui/ModalConfirm.vue
+++ b/components/ui/ModalConfirm.vue
@@ -36,8 +36,8 @@
 <script>
 import CrossIcon from '~/assets/images/utils/x.svg'
 import TrashIcon from '~/assets/images/utils/trash.svg'
-import Modal from '~/components/ui/Modal'
-import { renderString } from '~/helpers/parse'
+import Modal from '~/components/ui/Modal.vue'
+import { renderString } from '~/helpers/parse.js'
 
 export default {
   components: {
diff --git a/components/ui/ModalCreation.vue b/components/ui/ModalCreation.vue
index eaf6efa4..66bb40a7 100644
--- a/components/ui/ModalCreation.vue
+++ b/components/ui/ModalCreation.vue
@@ -66,8 +66,8 @@
 <script>
 import CrossIcon from '~/assets/images/utils/x.svg'
 import CheckIcon from '~/assets/images/utils/right-arrow.svg'
-import Modal from '~/components/ui/Modal'
-import Chips from '~/components/ui/Chips'
+import Modal from '~/components/ui/Modal.vue'
+import Chips from '~/components/ui/Chips.vue'
 
 export default {
   components: {
diff --git a/components/ui/ModalModeration.vue b/components/ui/ModalModeration.vue
index 15d93125..95a8f580 100644
--- a/components/ui/ModalModeration.vue
+++ b/components/ui/ModalModeration.vue
@@ -57,11 +57,11 @@
 <script>
 import TrashIcon from '~/assets/images/utils/trash.svg'
 import CrossIcon from '~/assets/images/utils/x.svg'
-import Modal from '~/components/ui/Modal'
-import Chips from '~/components/ui/Chips'
-import Badge from '~/components/ui/Badge'
+import Modal from '~/components/ui/Modal.vue'
+import Chips from '~/components/ui/Chips.vue'
+import Badge from '~/components/ui/Badge.vue'
 import CheckIcon from '~/assets/images/utils/check.svg'
-import { renderString } from '~/helpers/parse'
+import { renderString } from '~/helpers/parse.js'
 
 export default {
   components: {
diff --git a/components/ui/ModalReport.vue b/components/ui/ModalReport.vue
index 3febfb05..e5231044 100644
--- a/components/ui/ModalReport.vue
+++ b/components/ui/ModalReport.vue
@@ -60,9 +60,9 @@
 import { Multiselect } from 'vue-multiselect'
 import CrossIcon from '~/assets/images/utils/x.svg'
 import CheckIcon from '~/assets/images/utils/check.svg'
-import Modal from '~/components/ui/Modal'
-import Chips from '~/components/ui/Chips'
-import { renderString } from '~/helpers/parse'
+import Modal from '~/components/ui/Modal.vue'
+import Chips from '~/components/ui/Chips.vue'
+import { renderString } from '~/helpers/parse.js'
 
 export default {
   components: {
diff --git a/components/ui/ModalTransfer.vue b/components/ui/ModalTransfer.vue
index 3f208f89..5f066716 100644
--- a/components/ui/ModalTransfer.vue
+++ b/components/ui/ModalTransfer.vue
@@ -76,8 +76,8 @@
 import CrossIcon from '~/assets/images/utils/x.svg'
 import TransferIcon from '~/assets/images/utils/transfer.svg'
 import SettingsIcon from '~/assets/images/utils/settings.svg'
-import Modal from '~/components/ui/Modal'
-import Checkbox from '~/components/ui/Checkbox'
+import Modal from '~/components/ui/Modal.vue'
+import Checkbox from '~/components/ui/Checkbox.vue'
 
 export default {
   components: {
diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
index d7a87a70..d550a77e 100644
--- a/components/ui/ProjectCard.vue
+++ b/components/ui/ProjectCard.vue
@@ -89,15 +89,15 @@
 </template>
 
 <script>
-import Categories from '~/components/ui/search/Categories'
-import Badge from '~/components/ui/Badge'
-import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator'
+import Categories from '~/components/ui/search/Categories.vue'
+import Badge from '~/components/ui/Badge.vue'
+import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import EditIcon from '~/assets/images/utils/updated.svg'
 import DownloadIcon from '~/assets/images/utils/download.svg'
 import HeartIcon from '~/assets/images/utils/heart.svg'
-import Avatar from '~/components/ui/Avatar'
+import Avatar from '~/components/ui/Avatar.vue'
 
 export default {
   components: {
diff --git a/components/ui/ProjectPublishingChecklist.vue b/components/ui/ProjectPublishingChecklist.vue
index 00b35104..7d333acc 100644
--- a/components/ui/ProjectPublishingChecklist.vue
+++ b/components/ui/ProjectPublishingChecklist.vue
@@ -107,7 +107,7 @@ import RequiredIcon from '~/assets/images/utils/asterisk.svg'
 import SuggestionIcon from '~/assets/images/utils/lightbulb.svg'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg'
 import SendIcon from '~/assets/images/utils/send.svg'
-import Checkbox from '~/components/ui/Checkbox'
+import Checkbox from '~/components/ui/Checkbox.vue'
 
 export default {
   components: {
diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue
index b69abf08..2a905ad6 100644
--- a/components/ui/VersionFilterControl.vue
+++ b/components/ui/VersionFilterControl.vue
@@ -85,7 +85,7 @@
 
 <script setup>
 import { Multiselect } from 'vue-multiselect'
-import Checkbox from '~/components/ui/Checkbox'
+import Checkbox from '~/components/ui/Checkbox.vue'
 import ClearIcon from '~/assets/images/utils/clear.svg'
 
 const props = defineProps({
diff --git a/components/ui/search/SearchFilter.vue b/components/ui/search/SearchFilter.vue
index 089349b5..e3f2c98a 100644
--- a/components/ui/search/SearchFilter.vue
+++ b/components/ui/search/SearchFilter.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Checkbox from '~/components/ui/Checkbox'
+import Checkbox from '~/components/ui/Checkbox.vue'
 
 export default {
   components: {
diff --git a/helpers/fileUtils.js b/helpers/fileUtils.js
index 643f2566..1607b837 100644
--- a/helpers/fileUtils.js
+++ b/helpers/fileUtils.js
@@ -1,4 +1,4 @@
-import { formatBytes } from '~/plugins/shorthands'
+import { formatBytes } from '~/plugins/shorthands.js'
 
 export const fileIsValid = (file, validationOptions) => {
   const { maxSize, alertOnInvalid } = validationOptions
diff --git a/helpers/highlight.js b/helpers/highlight.js
index 3115e6dd..3a393394 100644
--- a/helpers/highlight.js
+++ b/helpers/highlight.js
@@ -15,7 +15,7 @@ import ini from 'highlight.js/lib/languages/ini'
 import yaml from 'highlight.js/lib/languages/yaml'
 import xml from 'highlight.js/lib/languages/xml'
 import properties from 'highlight.js/lib/languages/properties'
-import { md, configuredXss } from '~/helpers/parse'
+import { md, configuredXss } from '~/helpers/parse.js'
 
 /* REGISTRATION */
 // Scripting
diff --git a/layouts/default.vue b/layouts/default.vue
index c48f773f..cd91ad16 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -353,9 +353,9 @@ import HeartIcon from '~/assets/images/utils/heart.svg'
 import ChartIcon from '~/assets/images/utils/chart.svg'
 
 import GitHubIcon from '~/assets/images/utils/github.svg'
-import NavRow from '~/components/ui/NavRow'
-import ModalCreation from '~/components/ui/ModalCreation'
-import Avatar from '~/components/ui/Avatar'
+import NavRow from '~/components/ui/NavRow.vue'
+import ModalCreation from '~/components/ui/ModalCreation.vue'
+import Avatar from '~/components/ui/Avatar.vue'
 
 const auth = await useAuth()
 const user = await useUser()
diff --git a/package.json b/package.json
index a13da4ac..113d8ad5 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
     "@typescript-eslint/parser": "^5.59.8",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.14.1",
     "nuxt": "^3.5.3",
diff --git a/pages/[type]/[id].vue b/pages/[type]/[id].vue
index 30fab726..c6685cd9 100644
--- a/pages/[type]/[id].vue
+++ b/pages/[type]/[id].vue
@@ -715,19 +715,19 @@ import UnknownIcon from '~/assets/images/utils/unknown-donation.svg'
 import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
 import EyeIcon from '~/assets/images/utils/eye.svg'
 import BoxIcon from '~/assets/images/utils/box.svg'
-import Promotion from '~/components/ads/Promotion'
-import Badge from '~/components/ui/Badge'
-import Categories from '~/components/ui/search/Categories'
-import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator'
-import Modal from '~/components/ui/Modal'
-import ModalReport from '~/components/ui/ModalReport'
-import ModalModeration from '~/components/ui/ModalModeration'
-import NavRow from '~/components/ui/NavRow'
-import CopyCode from '~/components/ui/CopyCode'
-import Avatar from '~/components/ui/Avatar'
-import NavStack from '~/components/ui/NavStack'
-import NavStackItem from '~/components/ui/NavStackItem'
-import ProjectPublishingChecklist from '~/components/ui/ProjectPublishingChecklist'
+import Promotion from '~/components/ads/Promotion.vue'
+import Badge from '~/components/ui/Badge.vue'
+import Categories from '~/components/ui/search/Categories.vue'
+import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
+import Modal from '~/components/ui/Modal.vue'
+import ModalReport from '~/components/ui/ModalReport.vue'
+import ModalModeration from '~/components/ui/ModalModeration.vue'
+import NavRow from '~/components/ui/NavRow.vue'
+import CopyCode from '~/components/ui/CopyCode.vue'
+import Avatar from '~/components/ui/Avatar.vue'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
+import ProjectPublishingChecklist from '~/components/ui/ProjectPublishingChecklist.vue'
 import SettingsIcon from '~/assets/images/utils/settings.svg'
 import UsersIcon from '~/assets/images/utils/users.svg'
 import CategoriesIcon from '~/assets/images/utils/tags.svg'
@@ -739,7 +739,7 @@ import VersionIcon from '~/assets/images/utils/version.svg'
 import CrossIcon from '~/assets/images/utils/x.svg'
 import EditIcon from '~/assets/images/utils/edit.svg'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import { renderString } from '~/helpers/parse'
+import { renderString } from '~/helpers/parse.js'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 
 const data = useNuxtApp()
diff --git a/pages/[type]/[id]/changelog.vue b/pages/[type]/[id]/changelog.vue
index 340ddd1f..71ead266 100644
--- a/pages/[type]/[id]/changelog.vue
+++ b/pages/[type]/[id]/changelog.vue
@@ -75,9 +75,9 @@
 </template>
 <script setup>
 import DownloadIcon from '~/assets/images/utils/download.svg'
-import { renderHighlightedString } from '~/helpers/highlight'
-import VersionFilterControl from '~/components/ui/VersionFilterControl'
-import Pagination from '~/components/ui/Pagination'
+import { renderHighlightedString } from '~/helpers/highlight.js'
+import VersionFilterControl from '~/components/ui/VersionFilterControl.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 const props = defineProps({
   project: {
diff --git a/pages/[type]/[id]/gallery.vue b/pages/[type]/[id]/gallery.vue
index 8fd9cd07..ed7692f9 100644
--- a/pages/[type]/[id]/gallery.vue
+++ b/pages/[type]/[id]/gallery.vue
@@ -294,10 +294,10 @@ import InfoIcon from '~/assets/images/utils/info.svg'
 import ImageIcon from '~/assets/images/utils/image.svg'
 import TransferIcon from '~/assets/images/utils/transfer.svg'
 
-import FileInput from '~/components/ui/FileInput'
-import DropArea from '~/components/ui/DropArea'
-import ModalConfirm from '~/components/ui/ModalConfirm'
-import Modal from '~/components/ui/Modal'
+import FileInput from '~/components/ui/FileInput.vue'
+import DropArea from '~/components/ui/DropArea.vue'
+import ModalConfirm from '~/components/ui/ModalConfirm.vue'
+import Modal from '~/components/ui/Modal.vue'
 
 export default defineNuxtComponent({
   components: {
diff --git a/pages/[type]/[id]/index.vue b/pages/[type]/[id]/index.vue
index 6245df1a..48e2b82c 100644
--- a/pages/[type]/[id]/index.vue
+++ b/pages/[type]/[id]/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { renderHighlightedString } from '~/helpers/highlight'
+import { renderHighlightedString } from '~/helpers/highlight.js'
 
 export default defineNuxtComponent({
   props: {
diff --git a/pages/[type]/[id]/settings/description.vue b/pages/[type]/[id]/settings/description.vue
index 95053394..d53eb801 100644
--- a/pages/[type]/[id]/settings/description.vue
+++ b/pages/[type]/[id]/settings/description.vue
@@ -50,9 +50,9 @@
 </template>
 
 <script>
-import Chips from '~/components/ui/Chips'
+import Chips from '~/components/ui/Chips.vue'
 import SaveIcon from '~/assets/images/utils/save.svg'
-import { renderHighlightedString } from '~/helpers/highlight'
+import { renderHighlightedString } from '~/helpers/highlight.js'
 
 export default defineNuxtComponent({
   components: {
diff --git a/pages/[type]/[id]/settings/index.vue b/pages/[type]/[id]/settings/index.vue
index 3653d60a..d1a22c9f 100644
--- a/pages/[type]/[id]/settings/index.vue
+++ b/pages/[type]/[id]/settings/index.vue
@@ -236,9 +236,9 @@
 
 <script>
 import { Multiselect } from 'vue-multiselect'
-import Avatar from '~/components/ui/Avatar'
-import ModalConfirm from '~/components/ui/ModalConfirm'
-import FileInput from '~/components/ui/FileInput'
+import Avatar from '~/components/ui/Avatar.vue'
+import ModalConfirm from '~/components/ui/ModalConfirm.vue'
+import FileInput from '~/components/ui/FileInput.vue'
 
 import UploadIcon from '~/assets/images/utils/upload.svg'
 import SaveIcon from '~/assets/images/utils/save.svg'
diff --git a/pages/[type]/[id]/settings/members.vue b/pages/[type]/[id]/settings/members.vue
index fa5af740..e341858c 100644
--- a/pages/[type]/[id]/settings/members.vue
+++ b/pages/[type]/[id]/settings/members.vue
@@ -218,15 +218,15 @@
 </template>
 
 <script>
-import Checkbox from '~/components/ui/Checkbox'
-import Badge from '~/components/ui/Badge'
+import Checkbox from '~/components/ui/Checkbox.vue'
+import Badge from '~/components/ui/Badge.vue'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg'
 import SaveIcon from '~/assets/images/utils/save.svg'
 import TransferIcon from '~/assets/images/utils/transfer.svg'
 import UserPlusIcon from '~/assets/images/utils/user-plus.svg'
 import UserRemoveIcon from '~/assets/images/utils/user-x.svg'
-import Avatar from '~/components/ui/Avatar'
+import Avatar from '~/components/ui/Avatar.vue'
 
 export default defineNuxtComponent({
   components: {
diff --git a/pages/[type]/[id]/settings/tags.vue b/pages/[type]/[id]/settings/tags.vue
index 1193751c..a80cea1c 100644
--- a/pages/[type]/[id]/settings/tags.vue
+++ b/pages/[type]/[id]/settings/tags.vue
@@ -107,7 +107,7 @@
 </template>
 
 <script>
-import Checkbox from '~/components/ui/Checkbox'
+import Checkbox from '~/components/ui/Checkbox.vue'
 import StarIcon from '~/assets/images/utils/star.svg'
 import SaveIcon from '~/assets/images/utils/save.svg'
 
diff --git a/pages/[type]/[id]/version/[version].vue b/pages/[type]/[id]/version/[version].vue
index 5db61d80..e2d7eefe 100644
--- a/pages/[type]/[id]/version/[version].vue
+++ b/pages/[type]/[id]/version/[version].vue
@@ -669,21 +669,21 @@
 </template>
 <script>
 import { Multiselect } from 'vue-multiselect'
-import { acceptFileFromProjectType } from '~/helpers/fileUtils'
-import { inferVersionInfo } from '~/helpers/infer'
-import { createDataPackVersion } from '~/helpers/package'
-import { renderHighlightedString } from '~/helpers/highlight'
+import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
+import { inferVersionInfo } from '~/helpers/infer.js'
+import { createDataPackVersion } from '~/helpers/package.js'
+import { renderHighlightedString } from '~/helpers/highlight.js'
 
-import Avatar from '~/components/ui/Avatar'
-import Badge from '~/components/ui/Badge'
-import Breadcrumbs from '~/components/ui/Breadcrumbs'
-import CopyCode from '~/components/ui/CopyCode'
-import Categories from '~/components/ui/search/Categories'
-import ModalConfirm from '~/components/ui/ModalConfirm'
-import ModalReport from '~/components/ui/ModalReport'
-import Chips from '~/components/ui/Chips'
-import Checkbox from '~/components/ui/Checkbox'
-import FileInput from '~/components/ui/FileInput'
+import Avatar from '~/components/ui/Avatar.vue'
+import Badge from '~/components/ui/Badge.vue'
+import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import CopyCode from '~/components/ui/CopyCode.vue'
+import Categories from '~/components/ui/search/Categories.vue'
+import ModalConfirm from '~/components/ui/ModalConfirm.vue'
+import ModalReport from '~/components/ui/ModalReport.vue'
+import Chips from '~/components/ui/Chips.vue'
+import Checkbox from '~/components/ui/Checkbox.vue'
+import FileInput from '~/components/ui/FileInput.vue'
 
 import FileIcon from '~/assets/images/utils/file.svg'
 import TrashIcon from '~/assets/images/utils/trash.svg'
diff --git a/pages/[type]/[id]/versions.vue b/pages/[type]/[id]/versions.vue
index 7435a650..0e598777 100644
--- a/pages/[type]/[id]/versions.vue
+++ b/pages/[type]/[id]/versions.vue
@@ -104,15 +104,15 @@
   </div>
 </template>
 <script setup>
-import { acceptFileFromProjectType } from '~/helpers/fileUtils'
+import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 import DownloadIcon from '~/assets/images/utils/download.svg'
 import UploadIcon from '~/assets/images/utils/upload.svg'
 import InfoIcon from '~/assets/images/utils/info.svg'
-import VersionBadge from '~/components/ui/Badge'
-import FileInput from '~/components/ui/FileInput'
-import DropArea from '~/components/ui/DropArea'
-import Pagination from '~/components/ui/Pagination'
-import VersionFilterControl from '~/components/ui/VersionFilterControl'
+import VersionBadge from '~/components/ui/Badge.vue'
+import FileInput from '~/components/ui/FileInput.vue'
+import DropArea from '~/components/ui/DropArea.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+import VersionFilterControl from '~/components/ui/VersionFilterControl.vue'
 
 const props = defineProps({
   project: {
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 364fca17..91099283 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -25,8 +25,8 @@
   </div>
 </template>
 <script setup>
-import NavStack from '~/components/ui/NavStack'
-import NavStackItem from '~/components/ui/NavStackItem'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 import DashboardIcon from '~/assets/images/utils/dashboard.svg'
 import CurrencyIcon from '~/assets/images/utils/currency.svg'
diff --git a/pages/dashboard/revenue/index.vue b/pages/dashboard/revenue/index.vue
index 5b28cd26..43479ef0 100644
--- a/pages/dashboard/revenue/index.vue
+++ b/pages/dashboard/revenue/index.vue
@@ -94,7 +94,7 @@
 import TransferIcon from '~/assets/images/utils/transfer.svg'
 import SettingsIcon from '~/assets/images/utils/settings.svg'
 import HistoryIcon from '~/assets/images/utils/history.svg'
-import ModalTransfer from '~/components/ui/ModalTransfer'
+import ModalTransfer from '~/components/ui/ModalTransfer.vue'
 
 export default defineNuxtComponent({
   components: { TransferIcon, SettingsIcon, HistoryIcon, ModalTransfer },
diff --git a/pages/index.vue b/pages/index.vue
index 358a4acd..40920f96 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -523,8 +523,8 @@ import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import ModrinthIcon from '~/assets/images/logo.svg'
 import PrismLauncherLogo from '~/assets/images/external/prism.svg'
 import ATLauncherLogo from '~/assets/images/external/atlauncher.svg'
-import Avatar from '~/components/ui/Avatar'
-import ProjectCard from '~/components/ui/ProjectCard'
+import Avatar from '~/components/ui/Avatar.vue'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
 import homepageProjects from '~/generated/homepage.json'
 
 const searchQuery = ref('better')
diff --git a/pages/legal.vue b/pages/legal.vue
index 45a28d60..9aab5bb9 100644
--- a/pages/legal.vue
+++ b/pages/legal.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script setup>
-import NavStack from '~/components/ui/NavStack'
-import NavStackItem from '~/components/ui/NavStackItem'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 import TermsIcon from '~/assets/images/utils/heart-handshake.svg'
 import PrivacyIcon from '~/assets/images/utils/lock.svg'
diff --git a/pages/moderation.vue b/pages/moderation.vue
index ef59af04..90fce33f 100644
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -107,8 +107,8 @@
 </template>
 
 <script>
-import ProjectCard from '~/components/ui/ProjectCard'
-import Badge from '~/components/ui/Badge'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import Badge from '~/components/ui/Badge.vue'
 
 import CheckIcon from '~/assets/images/utils/check.svg'
 import UnlistIcon from '~/assets/images/utils/eye-off.svg'
@@ -116,10 +116,10 @@ import CrossIcon from '~/assets/images/utils/x.svg'
 import TrashIcon from '~/assets/images/utils/trash.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import Security from '~/assets/images/illustrations/security.svg'
-import NavStack from '~/components/ui/NavStack'
-import NavStackItem from '~/components/ui/NavStackItem'
-import ModalModeration from '~/components/ui/ModalModeration'
-import { renderHighlightedString } from '~/helpers/highlight'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
+import ModalModeration from '~/components/ui/ModalModeration.vue'
+import { renderHighlightedString } from '~/helpers/highlight.js'
 
 export default defineNuxtComponent({
   components: {
diff --git a/pages/notifications.vue b/pages/notifications.vue
index c2255c74..3baf5065 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -87,9 +87,9 @@ import ClearIcon from '~/assets/images/utils/clear.svg'
 import SettingsIcon from '~/assets/images/utils/settings.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg'
-import NavStack from '~/components/ui/NavStack'
-import NavStackItem from '~/components/ui/NavStackItem'
-import { renderString } from '~/helpers/parse'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
+import { renderString } from '~/helpers/parse.js'
 
 export default defineNuxtComponent({
   components: {
diff --git a/pages/search/[searchProjectType].vue b/pages/search/[searchProjectType].vue
index b562bbeb..e471e1ed 100644
--- a/pages/search/[searchProjectType].vue
+++ b/pages/search/[searchProjectType].vue
@@ -343,11 +343,11 @@
 </template>
 <script>
 import { Multiselect } from 'vue-multiselect'
-import ProjectCard from '~/components/ui/ProjectCard'
-import Pagination from '~/components/ui/Pagination'
-import SearchFilter from '~/components/ui/search/SearchFilter'
-import Checkbox from '~/components/ui/Checkbox'
-import LogoAnimated from '~/components/brand/LogoAnimated'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+import SearchFilter from '~/components/ui/search/SearchFilter.vue'
+import Checkbox from '~/components/ui/Checkbox.vue'
+import LogoAnimated from '~/components/brand/LogoAnimated.vue'
 
 import ClientIcon from '~/assets/images/categories/client.svg'
 import ServerIcon from '~/assets/images/categories/server.svg'
diff --git a/pages/settings.vue b/pages/settings.vue
index fb823c53..24bbd625 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -28,8 +28,8 @@
   </div>
 </template>
 <script setup>
-import NavStack from '~/components/ui/NavStack'
-import NavStackItem from '~/components/ui/NavStackItem'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
 
 import PaintbrushIcon from '~/assets/images/utils/paintbrush.svg'
 import UserIcon from '~/assets/images/utils/user.svg'
diff --git a/pages/settings/account.vue b/pages/settings/account.vue
index 0e4cea8a..af45c0ba 100644
--- a/pages/settings/account.vue
+++ b/pages/settings/account.vue
@@ -135,8 +135,8 @@
 </template>
 
 <script>
-import ModalConfirm from '~/components/ui/ModalConfirm'
-import Modal from '~/components/ui/Modal'
+import ModalConfirm from '~/components/ui/ModalConfirm.vue'
+import Modal from '~/components/ui/Modal.vue'
 
 import CrossIcon from '~/assets/images/utils/x.svg'
 import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
diff --git a/pages/settings/follows.vue b/pages/settings/follows.vue
index 849800ef..091e33ef 100644
--- a/pages/settings/follows.vue
+++ b/pages/settings/follows.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup>
-import ProjectCard from '~/components/ui/ProjectCard'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
 
 import HeartIcon from '~/assets/images/utils/heart.svg'
 import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg'
diff --git a/pages/settings/monetization.vue b/pages/settings/monetization.vue
index 7538944e..7b4e663c 100644
--- a/pages/settings/monetization.vue
+++ b/pages/settings/monetization.vue
@@ -91,7 +91,7 @@
 
 <script>
 import { Multiselect } from 'vue-multiselect'
-import Chips from '~/components/ui/Chips'
+import Chips from '~/components/ui/Chips.vue'
 import SaveIcon from '~/assets/images/utils/save.svg'
 import TrashIcon from '~/assets/images/utils/trash.svg'
 import EditIcon from '~/assets/images/utils/edit.svg'
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 11cd9a02..ea2f320e 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -238,9 +238,9 @@
   </div>
 </template>
 <script setup>
-import ProjectCard from '~/components/ui/ProjectCard'
-import Badge from '~/components/ui/Badge'
-import Promotion from '~/components/ads/Promotion'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import Badge from '~/components/ui/Badge.vue'
+import Promotion from '~/components/ads/Promotion.vue'
 
 import GitHubIcon from '~/assets/images/utils/github.svg'
 import ReportIcon from '~/assets/images/utils/report.svg'
@@ -257,12 +257,12 @@ import GridIcon from '~/assets/images/utils/grid.svg'
 import ListIcon from '~/assets/images/utils/list.svg'
 import ImageIcon from '~/assets/images/utils/image.svg'
 import UploadIcon from '~/assets/images/utils/upload.svg'
-import FileInput from '~/components/ui/FileInput'
-import ModalReport from '~/components/ui/ModalReport'
-import ModalCreation from '~/components/ui/ModalCreation'
-import NavRow from '~/components/ui/NavRow'
-import CopyCode from '~/components/ui/CopyCode'
-import Avatar from '~/components/ui/Avatar'
+import FileInput from '~/components/ui/FileInput.vue'
+import ModalReport from '~/components/ui/ModalReport.vue'
+import ModalCreation from '~/components/ui/ModalCreation.vue'
+import NavRow from '~/components/ui/NavRow.vue'
+import CopyCode from '~/components/ui/CopyCode.vue'
+import Avatar from '~/components/ui/Avatar.vue'
 
 const data = useNuxtApp()
 const route = useRoute()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dfdf16df..664c7afa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,6 +52,12 @@ devDependencies:
   eslint-config-prettier:
     specifier: ^8.8.0
     version: 8.8.0(eslint@8.42.0)
+  eslint-import-resolver-typescript:
+    specifier: ^3.5.5
+    version: 3.5.5(@typescript-eslint/parser@5.59.9)(eslint-plugin-import@2.27.5)(eslint@8.42.0)
+  eslint-plugin-import:
+    specifier: ^2.27.5
+    version: 2.27.5(@typescript-eslint/parser@5.59.9)(eslint-import-resolver-typescript@3.5.5)(eslint@8.42.0)
   eslint-plugin-prettier:
     specifier: ^4.2.1
     version: 4.2.1(eslint-config-prettier@8.8.0)(eslint@8.42.0)(prettier@2.8.8)