refactor(lint): added import rules

.eslintrc.cjs

@@ -7,15 +7,29 @@ module.exports = {
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     'plugin:vue/vue3-recommended',
-    'plugin:vue/vue3-recommended',
     '@vue/eslint-config-typescript/recommended',
     '@vue/eslint-config-prettier',
+    'plugin:import/recommended',
   ],
+
+  settings: {
+    'import/resolver': { typescript: { project: './tsconfig.app.json' } },
+  },
   env: {
     'vue/setup-compiler-macros': true,
   },
   rules: {
     'vue/multi-word-component-names': ['off'],
     'prettier/prettier': ['error'],
+    'import/no-duplicates': ['error', { considerQueryString: true }],
+    'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        ts: 'never',
+      },
+    ],
   },
 };

package.json

@@ -68,6 +68,7 @@
     "@types/qrcode": "^1.4.2",
     "@types/randombytes": "^2.0.0",
     "@types/uuid": "^8.3.4",
+    "@typescript-eslint/parser": "^5.32.0",
     "@vitejs/plugin-vue": "^2.2.2",
     "@vitejs/plugin-vue-jsx": "^1.3.7",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -77,6 +78,8 @@
     "c8": "^7.11.0",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.4.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-vue": "^8.2.0",
     "jsdom": "^19.0.0",
     "less": "^4.1.2",

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { layouts } from './layouts';
 import { computed } from 'vue';
 import { useRoute, RouterView } from 'vue-router';
-import { darkThemeOverrides, lightThemeOverrides } from './themes';
 import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
+import { darkThemeOverrides, lightThemeOverrides } from './themes';
+import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
 
 const route = useRoute();

src/layouts/base.layout.vue

@@ -4,14 +4,14 @@ import { h } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
-import SearchBar from '../components/SearchBar.vue';
 import { useStyleStore } from '@/stores/style.store';
-import HeroGradient from '../assets/hero-gradient.svg?component';
-import MenuLayout from '../components/MenuLayout.vue';
-import NavbarButtons from '../components/NavbarButtons.vue';
 import { config } from '@/config';
 import MenuIconItem from '@/components/MenuIconItem.vue';
 import type { ITool } from '@/tools/tool';
+import SearchBar from '../components/SearchBar.vue';
+import HeroGradient from '../assets/hero-gradient.svg?component';
+import MenuLayout from '../components/MenuLayout.vue';
+import NavbarButtons from '../components/NavbarButtons.vue';
 
 const themeVars = useThemeVars();
 const route = useRoute();

src/layouts/tool.layout.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
-import BaseLayout from './base.layout.vue';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { computed } from 'vue';
 import { useThemeVars } from 'naive-ui';
+import BaseLayout from './base.layout.vue';
 
 const route = useRoute();
 const theme = useThemeVars();

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
+// eslint-disable-next-line import/no-unresolved
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';
 

src/router.ts

@@ -1,5 +1,5 @@
-import { layouts } from './layouts/index';
 import { createRouter, createWebHistory } from 'vue-router';
+import { layouts } from './layouts/index';
 import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';

src/tools/case-converter/case-converter.vue

@@ -46,8 +46,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import InputCopyable from '../../components/InputCopyable.vue';
-
 import {
   camelCase,
   capitalCase,
@@ -61,6 +59,7 @@ import {
   sentenceCase,
   snakeCase,
 } from 'change-case';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 const input = ref('lorem ipsum dolor sit amet');
 </script>

src/tools/color-converter/color-converter.vue

@@ -36,12 +36,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { colord, extend } from 'colord';
-import InputCopyable from '../../components/InputCopyable.vue';
 
 import cmykPlugin from 'colord/plugins/cmyk';
 import hwbPlugin from 'colord/plugins/hwb';
 import namesPlugin from 'colord/plugins/names';
 import lchPlugin from 'colord/plugins/lch';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
 

src/tools/eta-calculator/eta-calculator.vue

@@ -51,7 +51,10 @@
 </template>
 
 <script setup lang="ts">
+// Duplicate issue with sub directory
+// eslint-disable-next-line import/no-duplicates
 import { addMilliseconds, formatRelative } from 'date-fns';
+// eslint-disable-next-line import/no-duplicates
 import { enGB } from 'date-fns/locale';
 import { computed, ref } from 'vue';
 import { formatMsDuration } from './eta-calculator.service';

src/tools/git-memo/git-memo.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import Memo from './git-memo.md';
 import { useThemeVars } from 'naive-ui';
+import Memo from './git-memo.md';
 
 const themeVars = useThemeVars();
 </script>

src/tools/integer-base-converter/integer-base-converter.vue

@@ -67,9 +67,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useStyleStore } from '@/stores/style.store';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';
-import { useStyleStore } from '@/stores/style.store';
 
 const styleStore = useStyleStore();
 

src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue

@@ -30,8 +30,8 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, computed } from 'vue';
-import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 import { randIntFromInterval } from '@/utils/random';
+import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 
 const paragraphs = ref(1);
 const sentences = ref([3, 8]);

src/tools/qr-code-generator/qr-code-generator.vue

@@ -32,9 +32,9 @@
 
 <script setup lang="ts">
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
-import { useQRCode } from './useQRCode';
 import { ref } from 'vue';
 import type { QRCodeErrorCorrectionLevel } from 'qrcode';
+import { useQRCode } from './useQRCode';
 
 const foreground = ref('#000000ff');
 const background = ref('#ffffffff');

src/tools/url-parser/url-parser.vue

@@ -29,8 +29,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { SubdirectoryArrowRightRound } from '@vicons/material';
-import InputCopyable from '../../components/InputCopyable.vue';
 import { useValidation } from '@/composable/validation';
+import InputCopyable from '../../components/InputCopyable.vue';
 
 const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
 const urlParsed = computed<URL | undefined>(() => {