Consistent extension usage in imports (#1171)

2023-06-11 18:37:40 +01:00
parent 20d1c4d242
commit d9f8746438
39 changed files with 133 additions and 114 deletions
--- 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,
+    },
  },
 }
--- 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>
--- 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: {},
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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({
--- 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: {
--- 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
--- 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
--- 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()
--- 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",
--- 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()
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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'
--- 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: {
--- 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'

--- 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'
--- 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: {
--- 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'
--- 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 },
--- 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')
--- 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'
--- 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: {
--- 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: {
--- 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'
--- 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'
--- 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'
--- 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'
--- 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'
--- 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()
--- 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)