refactor: use import/order eslint rule

.eslintrc

@@ -33,6 +33,26 @@
     "import/extensions": "off",
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "pathGroups": [
+          { "pattern": "@/**", "group": "internal", "position": "before" },
+          { "pattern": "#/**", "group": "internal", "position": "before" }
+        ],
+        "alphabetize": { "order": "asc", "caseInsensitive": true }
+      }
+    ],
 
     "vue/component-name-in-template-casing": ["error", "kebab-case"],
     "vue/max-attributes-per-line": "warn",

.lintstagedrc

@@ -1,7 +1,7 @@
 {
   "*.{js,ts}": ["eslint --fix", "prettier --write"],
   "*.scss": ["stylelint --fix", "prettier --write"],
-  "*.{vue,html}": ["stylelint --fix", "prettier --write", "eslint --fix"],
+  "*.{vue,html}": ["stylelint --fix", "eslint --fix", "prettier --write"],
   "{*.json,.*rc}": ["prettier --parser json --write"],
   "*.{yaml,yml}": ["prettier --parser yaml --write"],
   "*.md": ["prettier --write"]

package.json

@@ -18,6 +18,7 @@
     "lint:style:fix": "stylelint --fix '**/*.{css,scss,vue}'",
     "prettier": "prettier --check --ignore-unknown '**/*'",
     "prettier:fix": "prettier --write --ignore-unknown '**/*'",
+    "format": "yarn lint:style:fix && yarn lint:js:fix && yarn prettier:fix",
     "test": "vitest",
     "test:c": "vitest --run --coverage",
     "prepare": "husky install",

src/qComponents/QBreadcrumbs/QBreadcrumbs.test.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+
 import { QBreadcrumbs } from './index';
 
 describe('QBreadcrumbs', () => {

src/qComponents/QButton/src/QButton.vue

@@ -28,6 +28,7 @@ import { defineComponent, PropType, computed, inject } from 'vue';
 
 import { validateArray } from '@/qComponents/helpers';
 import type { QFormProvider } from '@/qComponents/QForm';
+
 import type { Nullable } from '#/helpers';
 
 import type {

src/qComponents/QCascader/src/QCascader.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts">
+import type { Instance } from '@popperjs/core';
 import {
   defineComponent,
   inject,
@@ -37,20 +38,19 @@ import {
   watch,
   nextTick
 } from 'vue';
-import type { Instance } from '@popperjs/core';
 
 import { isServer } from '@/qComponents/constants/isServer';
 import { randId } from '@/qComponents/helpers';
 import { useResizeListener } from '@/qComponents/hooks';
 import type { QFormProvider } from '@/qComponents/QForm';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
+
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
 import QCascaderDropdown from './QCascaderDropdown/QCascaderDropdown.vue';
 import QCascaderInput from './QCascaderInput/QCascaderInput.vue';
-import QCascaderTags from './QCascaderTags/QCascaderTags.vue';
 import type { QCascaderInputInstance } from './QCascaderInput/types';
-
+import QCascaderTags from './QCascaderTags/QCascaderTags.vue';
 import type {
   QCascaderPropModelValue,
   QCascaderPropOptions,

src/qComponents/QCascader/src/QCascaderColumn/QCascaderColumn.vue

@@ -38,11 +38,12 @@ import {
 } from 'vue';
 
 import { QScrollbar } from '@/qComponents/QScrollbar';
+
 import type { Nullable } from '#/helpers';
 
 import findAllLeaves from '../helpers/findAllLeaves';
-import QCascaderRow from '../QCascaderRow/QCascaderRow.vue';
 import type { QCascaderDropdownProvider } from '../QCascaderDropdown/types';
+import QCascaderRow from '../QCascaderRow/QCascaderRow.vue';
 import type { Option, QCascaderProvider } from '../types';
 
 import { getSibling } from './helpers';

src/qComponents/QCascader/src/QCascaderDropdown/QCascaderDropdown.vue

@@ -25,6 +25,7 @@
 </template>
 
 <script lang="ts">
+import { createPopper } from '@popperjs/core';
 import {
   defineComponent,
   inject,
@@ -34,9 +35,9 @@ import {
   onMounted,
   onUnmounted
 } from 'vue';
-import { createPopper } from '@popperjs/core';
 
 import { getConfig } from '@/qComponents/config';
+
 import type { Nullable } from '#/helpers';
 
 import QCascaderColumn from '../QCascaderColumn/QCascaderColumn.vue';

src/qComponents/QCascader/src/QCascaderInput/QCascaderInput.vue

@@ -26,11 +26,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, computed } from 'vue';
 import { isNumber, isEmpty } from 'lodash-es';
+import { defineComponent, inject, computed } from 'vue';
 
 import { t } from '@/qComponents/locale';
 import { QInput } from '@/qComponents/QInput';
+
 import type { Nullable } from '#/helpers';
 
 import findFullPath from '../helpers/findFullPath';

src/qComponents/QCascader/src/QCascaderRow/QCascaderRow.vue

@@ -34,6 +34,7 @@
 import { defineComponent, inject, computed, PropType } from 'vue';
 
 import { QCheckbox } from '@/qComponents/QCheckbox';
+
 import getChildStatuses from '../helpers/getChildStatuses';
 import type { QCascaderProvider } from '../types';
 

src/qComponents/QCascader/src/QCascaderTags/QCascaderTags.vue

@@ -32,6 +32,7 @@
 import { defineComponent, inject, computed } from 'vue';
 
 import { QTag } from '@/qComponents/QTag';
+
 import findFullPath from '../helpers/findFullPath';
 import type { QCascaderProvider } from '../types';
 

src/qComponents/QCascader/src/types.ts

@@ -1,5 +1,5 @@
-import type { Ref, ComputedRef } from 'vue';
 import type { Instance } from '@popperjs/core';
+import type { Ref, ComputedRef } from 'vue';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 

src/qComponents/QCheckbox/src/QCheckbox.vue

@@ -52,9 +52,10 @@
 <script lang="ts">
 import { computed, defineComponent, inject, watch, ref } from 'vue';
 
+import type { QCheckboxGroupProvider } from '@/qComponents/QCheckboxGroup';
 import type { QFormProvider } from '@/qComponents/QForm';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
-import type { QCheckboxGroupProvider } from '@/qComponents/QCheckboxGroup';
+
 import type { Nullable } from '#/helpers';
 
 import type { QCheckboxProps, QCheckboxInstance } from './types';

src/qComponents/QCheckboxGroup/src/QCheckboxGroup.vue

@@ -22,6 +22,7 @@ import {
 
 import { validateArray } from '@/qComponents/helpers';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
+
 import type { Nullable } from '#/helpers';
 
 import type {

src/qComponents/QCollapse/src/QCollapse.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, provide, watch, ref } from 'vue';
 import { uniqueId } from 'lodash-es';
+import { defineComponent, PropType, provide, watch, ref } from 'vue';
 
 import type {
   QCollapseProps,

src/qComponents/QCollapseItem/src/QCollapseItem.vue

@@ -37,6 +37,7 @@ import { defineComponent, inject, computed } from 'vue';
 
 import { randId } from '@/qComponents/helpers';
 import type { QCollapseProvider } from '@/qComponents/QCollapse';
+
 import QCollapseTransition from './QCollapseTransition.vue';
 import type { QCollapseItemProps, QCollapseItemInstance } from './types';
 

src/qComponents/QColorPicker/src/QColorAlphaSlider/QColorAlphaSlider.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script lang="ts">
+import { colord } from 'colord';
 import {
   defineComponent,
   ref,
@@ -28,12 +29,11 @@ import {
   nextTick
 } from 'vue';
 
-import { colord } from 'colord';
-
 import type { Nullable } from '#/helpers';
 
-import draggable from '../utils/draggable';
 import type { QPickerDropdownProvider } from '../QPickerDropdown';
+import draggable from '../utils/draggable';
+
 import type { QColorAlphaSliderInstance } from './types';
 
 export default defineComponent({

src/qComponents/QColorPicker/src/QColorHueSlider/QColorHueSlider.vue

@@ -29,8 +29,9 @@ import {
 
 import type { Nullable } from '#/helpers';
 
-import draggable from '../utils/draggable';
 import type { QPickerDropdownProvider } from '../QPickerDropdown';
+import draggable from '../utils/draggable';
+
 import type { QColorHueSliderInstance } from './types';
 
 export default defineComponent({

src/qComponents/QColorPicker/src/QColorPicker.vue

@@ -52,6 +52,9 @@
 </template>
 
 <script lang="ts">
+import { createPopper, Instance, Options } from '@popperjs/core';
+import { placements } from '@popperjs/core/lib/enums';
+import { colord } from 'colord';
 import {
   defineComponent,
   PropType,
@@ -62,15 +65,13 @@ import {
   nextTick,
   provide
 } from 'vue';
-import { createPopper, Instance, Options } from '@popperjs/core';
-import { placements } from '@popperjs/core/lib/enums';
-import { colord } from 'colord';
 
+import { getConfig } from '@/qComponents/config';
 import { isServer } from '@/qComponents/constants/isServer';
 import { validateArray } from '@/qComponents/helpers';
-import { getConfig } from '@/qComponents/config';
 import type { QFormProvider } from '@/qComponents/QForm';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
+
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
 import QPickerDropdown from './QPickerDropdown';

src/qComponents/QColorPicker/src/QColorSvpanel/QColorSvpanel.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts">
+import { colord } from 'colord';
 import {
   defineComponent,
   ref,
@@ -21,12 +22,12 @@ import {
   nextTick,
   inject
 } from 'vue';
-import { colord } from 'colord';
 
 import type { Nullable } from '#/helpers';
 
-import draggable from '../utils/draggable';
 import type { QPickerDropdownProvider } from '../QPickerDropdown';
+import draggable from '../utils/draggable';
+
 import type { QColorSvpanelInstance } from './types';
 
 export default defineComponent({

src/qComponents/QColorPicker/src/QPickerDropdown/QPickerDropdown.vue

@@ -51,6 +51,8 @@
 </template>
 
 <script lang="ts">
+import { colord } from 'colord';
+import type { HsvaColor } from 'colord';
 import {
   defineComponent,
   PropType,
@@ -62,21 +64,20 @@ import {
   onUnmounted,
   provide
 } from 'vue';
-import { colord } from 'colord';
-import type { HsvaColor } from 'colord';
 
-import { t } from '@/qComponents/locale';
 import { validateArray } from '@/qComponents/helpers';
+import { t } from '@/qComponents/locale';
 import { QButton } from '@/qComponents/QButton';
 import { QInput } from '@/qComponents/QInput';
+
 import type { Nillable, Nullable, UnwrappedInstance } from '#/helpers';
 
-import QColorSvpanel from '../QColorSvpanel';
 import QColorAlphaSlider from '../QColorAlphaSlider';
+import type { QColorAlphaSliderInstance } from '../QColorAlphaSlider';
 import QColorHueSlider from '../QColorHueSlider';
-import type { QColorSvpanelInstance } from '../QColorSvpanel';
 import type { QColorHueSliderInstance } from '../QColorHueSlider';
-import type { QColorAlphaSliderInstance } from '../QColorAlphaSlider';
+import type { QColorSvpanelInstance } from '../QColorSvpanel';
+import QColorSvpanel from '../QColorSvpanel';
 import type { QColorPickerProvider } from '../types';
 
 import type {

src/qComponents/QColorPicker/src/QPickerDropdown/types.ts

@@ -2,10 +2,10 @@ import type { Ref } from 'vue';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
-import type { ColorFormat } from '../types';
-import type { QColorSvpanelInstance } from '../QColorSvpanel';
-import type { QColorHueSliderInstance } from '../QColorHueSlider';
 import type { QColorAlphaSliderInstance } from '../QColorAlphaSlider';
+import type { QColorHueSliderInstance } from '../QColorHueSlider';
+import type { QColorSvpanelInstance } from '../QColorSvpanel';
+import type { ColorFormat } from '../types';
 
 export type QPickerDropdownPropColorFormat = ColorFormat;
 

src/qComponents/QColorPicker/src/types.ts

@@ -1,5 +1,5 @@
-import type { Ref, ComputedRef } from 'vue';
 import type { Placement, Options } from '@popperjs/core';
+import type { Ref, ComputedRef } from 'vue';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 

src/qComponents/QContextMenu/src/QContextMenu.vue

@@ -51,6 +51,12 @@
 </template>
 
 <script lang="ts">
+import {
+  createPopper as createPopperJs,
+  Instance,
+  Options,
+  Placement
+} from '@popperjs/core';
 import {
   defineComponent,
   computed,
@@ -60,16 +66,11 @@ import {
   onUnmounted,
   onBeforeUpdate
 } from 'vue';
-import {
-  createPopper as createPopperJs,
-  Instance,
-  Options,
-  Placement
-} from '@popperjs/core';
 
+import { getConfig } from '@/qComponents/config';
 import { isServer } from '@/qComponents/constants/isServer';
 import { validateArray } from '@/qComponents/helpers';
-import { getConfig } from '@/qComponents/config';
+
 import type { Nullable } from '#/helpers';
 
 import type {