refactor: organize the import format

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

src/components/AppFooter.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
+import registerGlobalComponents from 'src/plugins/global-components'
+import { router } from 'src/router'
 import AppFooter from './AppFooter.vue'
-import registerGlobalComponents from '../plugins/global-components'
-import { router } from '../router'
 
 describe('# AppFooter', () => {
   beforeEach(async () => {

src/components/AppLink.spec.ts

@@ -1,6 +1,6 @@
-import AppLink from './AppLink.vue'
-import { router } from '../router'
 import { flushPromises, mount } from '@vue/test-utils'
+import { router } from 'src/router'
+import AppLink from './AppLink.vue'
 
 describe('# AppLink', function () {
   beforeEach(async () => {

src/components/AppLink.vue

@@ -9,10 +9,9 @@
 </template>
 
 <script lang="ts">
-import type { RouteParams } from 'vue-router'
-import type { AppRouteNames } from '../router'
-
+import type { AppRouteNames } from 'src/router'
 import { defineComponent, PropType } from 'vue'
+import type { RouteParams } from 'vue-router'
 import { RouterLink } from 'vue-router'
 
 export default defineComponent({

src/components/AppNavigation.vue

@@ -32,13 +32,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import type { AppRouteNames } from 'src/router'
+import { user } from 'src/store/user'
+import { computed, defineComponent } from 'vue'
 import type { RouteParams } from 'vue-router'
 
-import type { AppRouteNames } from '../router'
-
-import { user } from '../store/user'
-
 interface NavLink {
   name: AppRouteNames
   params?: Partial<RouteParams>

src/components/AppPagination.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, toRefs } from 'vue'
-import { limit } from '../services'
+import { limit } from 'src/services'
+import { computed, defineComponent, toRefs } from 'vue'
 
 export default defineComponent({
   name: 'AppPagination',

src/components/ArticleDetail.vue

@@ -43,13 +43,11 @@
 <script lang="ts">
 import DOMPurify from 'dompurify'
 import md2html from 'marked'
+import { getArticle } from 'src/services/article/getArticle'
 import { computed, defineComponent, reactive } from 'vue'
 import { useRoute } from 'vue-router'
-
 import ArticleDetailMeta from './ArticleDetailMeta.vue'
 
-import { getArticle } from '../services/article/getArticle'
-
 export default defineComponent({
   name: 'ArticleDetail',
   components: {

src/components/ArticleDetailComments.vue

@@ -14,16 +14,13 @@
 </template>
 
 <script lang="ts">
+import { getCommentsByArticle } from 'src/services/comment/getComments'
+import { deleteComment } from 'src/services/comment/postComment'
+import { user } from 'src/store/user'
 import { computed, defineComponent, ref } from 'vue'
 import { useRoute } from 'vue-router'
-
-import ArticleDetailCommentsForm from './ArticleDetailCommentsForm.vue'
 import ArticleDetailComment from './ArticleDetailComment.vue'
-
-import { getCommentsByArticle } from '../services/comment/getComments'
-import { deleteComment } from '../services/comment/postComment'
-
-import { user } from '../store/user'
+import ArticleDetailCommentsForm from './ArticleDetailCommentsForm.vue'
 
 export default defineComponent({
   name: 'ArticleDetailComments',

src/components/ArticleDetailMeta.vue

@@ -60,16 +60,13 @@
 </template>
 
 <script lang="ts">
+import { useFavoriteArticle } from 'src/composable/useFavoriteArticle'
+import { useFollow } from 'src/composable/useFollowProfile'
+import { routerPush } from 'src/router'
+import { deleteArticle } from 'src/services/article/deleteArticle'
+import { checkAuthorization, user } from 'src/store/user'
 import { computed, defineComponent, PropType, toRefs } from 'vue'
 
-import { deleteArticle } from '../services/article/deleteArticle'
-
-import { useFavoriteArticle } from '../composable/useFavoriteArticle'
-import { useFollow } from '../composable/useFollowProfile'
-
-import { user, checkAuthorization } from '../store/user'
-import { routerPush } from '../router'
-
 export default defineComponent({
   name: 'ArticleDetailMeta',
   props: {

src/components/ArticlesList.vue

@@ -34,13 +34,11 @@
 </template>
 
 <script lang="ts">
+import { useArticles } from 'src/composable/useArticles'
 import { defineComponent } from 'vue'
-
-import ArticlesListNavigation from './ArticlesListNavigation.vue'
-import ArticlesListArticlePreview from './ArticlesListArticlePreview.vue'
 import AppPagination from './AppPagination.vue'
-
-import { useArticles } from '../composable/useArticles'
+import ArticlesListArticlePreview from './ArticlesListArticlePreview.vue'
+import ArticlesListNavigation from './ArticlesListNavigation.vue'
 
 export default defineComponent({
   name: 'ArticlesList',

src/components/ArticlesListArticlePreview.vue

@@ -50,8 +50,8 @@
 </template>
 
 <script lang="ts">
+import { useFavoriteArticle } from 'src/composable/useFavoriteArticle'
 import { computed, defineComponent, PropType } from 'vue'
-import { useFavoriteArticle } from '../composable/useFavoriteArticle'
 
 export default defineComponent({
   name: 'ArticlesListArticlePreview',

src/components/ArticlesListNavigation.vue

@@ -23,13 +23,11 @@
 </template>
 
 <script lang="ts">
+import type { ArticlesType } from 'src/composable/useArticles'
+import type { AppRouteNames } from 'src/router'
+import { isAuthorized } from 'src/store/user'
 import { computed, defineComponent } from 'vue'
 import type { RouteParams } from 'vue-router'
-import type { AppRouteNames } from '../router'
-
-import type { ArticlesType } from '../composable/useArticles'
-
-import { isAuthorized } from '../store/user'
 
 interface ArticlesListNavLink {
   name: ArticlesType

src/components/PopularTags.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useTags } from '../composable/useTags'
+import { useTags } from 'src/composable/useTags'
 
 export default defineComponent({
   name: 'PopularTags',

src/composable/useArticles.ts

@@ -1,16 +1,14 @@
-import { computed, ComputedRef, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import type { AppRouteNames } from '../router'
-
-import createAsyncProcess from '../utils/create-async-process'
-
+import type { AppRouteNames } from 'src/router'
 import {
   getArticles,
-  getFavoritedArticles,
-  getProfileArticles,
-  getFeeds,
   getArticlesByTag,
-} from '../services/article/getArticles'
+  getFavoritedArticles,
+  getFeeds,
+  getProfileArticles,
+} from 'src/services/article/getArticles'
+import createAsyncProcess from 'src/utils/create-async-process'
+import { computed, ComputedRef, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
 export function useArticles () {

src/composable/useFavoriteArticle.ts

@@ -1,12 +1,9 @@
+import { routerPush } from 'src/router'
+import { deleteFavoriteArticle, postFavoriteArticle } from 'src/services/article/favoriteArticle'
+import type { AuthorizationError } from 'src/types/error'
+import createAsyncProcess from 'src/utils/create-async-process'
+import type { Either } from 'src/utils/either'
 import { ComputedRef } from 'vue'
-import { routerPush } from '../router'
-
-import type { AuthorizationError } from '../types/error'
-
-import { deleteFavoriteArticle, postFavoriteArticle } from '../services/article/favoriteArticle'
-
-import type { Either } from '../utils/either'
-import createAsyncProcess from '../utils/create-async-process'
 
 interface useFavoriteArticleProps {
   isFavorited: ComputedRef<boolean>

src/composable/useFollowProfile.ts

@@ -1,12 +1,9 @@
+import { routerPush } from 'src/router'
+import { deleteFollowProfile, postFollowProfile } from 'src/services/profile/followProfile'
+import type { AuthorizationError } from 'src/types/error'
+import createAsyncProcess from 'src/utils/create-async-process'
+import type { Either } from 'src/utils/either'
 import type { ComputedRef } from 'vue'
-import { routerPush } from '../router'
-
-import type { AuthorizationError } from '../types/error'
-
-import type { Either } from '../utils/either'
-import createAsyncProcess from '../utils/create-async-process'
-
-import { postFollowProfile, deleteFollowProfile } from '../services/profile/followProfile'
 
 interface UseFollowProps {
   username: ComputedRef<string>

src/composable/useProfile.ts

@@ -1,7 +1,6 @@
+import { getProfile } from 'src/services/profile/getProfile'
 import { ComputedRef, ref, watch } from 'vue'
 
-import { getProfile } from '../services/profile/getProfile'
-
 interface UseProfileProps {
   username: ComputedRef<string>
 }

src/composable/useTags.ts

@@ -1,7 +1,6 @@
+import { getAllTags } from 'src/services/tag/getTags'
 import { ref } from 'vue'
 
-import { getAllTags } from '../services/tag/getTags'
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
 export function useTags () {
   const tags = ref<string[]>([])

src/pages/Article.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
+import { router } from 'src/router'
 import Article from './Article.vue'
-import { router } from '../router'
 
 describe('# Article', () => {
   beforeEach(async () => {

src/pages/Article.vue

@@ -29,11 +29,10 @@
 </template>
 
 <script lang="ts">
+import ArticleDetail from 'src/components/ArticleDetail.vue'
+import ArticleDetailComments from 'src/components/ArticleDetailComments.vue'
 import { defineComponent } from 'vue'
 
-import ArticleDetail from '../components/ArticleDetail.vue'
-import ArticleDetailComments from '../components/ArticleDetailComments.vue'
-
 export default defineComponent({
   name: 'ArticlePage',
   components: {

src/pages/EditArticle.vue

@@ -66,10 +66,10 @@
 </template>
 
 <script lang="ts">
+import { getArticle } from 'src/services/article/getArticle'
+import { postArticle, putArticle } from 'src/services/article/postArticle'
 import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getArticle } from '../services/article/getArticle'
-import { postArticle, putArticle } from '../services/article/postArticle'
 
 interface FormState {
   title: string;

src/pages/Home.vue

@@ -44,11 +44,10 @@
 </template>
 
 <script lang="ts">
+import ArticlesList from 'src/components/ArticlesList.vue'
+import PopularTags from 'src/components/PopularTags.vue'
 import { defineComponent } from 'vue'
 
-import ArticlesList from '../components/ArticlesList.vue'
-import PopularTags from '../components/PopularTags.vue'
-
 export default defineComponent({
   name: 'HomePage',
   components: {

src/pages/Login.vue

@@ -61,12 +61,10 @@
 </template>
 
 <script lang="ts">
+import { routerPush } from 'src/router'
+import { postLogin, PostLoginErrors, PostLoginForm } from 'src/services/auth/postLogin'
+import { updateUser } from 'src/store/user'
 import { defineComponent, reactive, ref } from 'vue'
-import { routerPush } from '../router'
-
-import { postLogin, PostLoginForm, PostLoginErrors } from '../services/auth/postLogin'
-
-import { updateUser } from '../store/user'
 
 export default defineComponent({
   name: 'LoginPage',

src/pages/Profile.vue

@@ -67,16 +67,13 @@
 </template>
 
 <script lang="ts">
+import ArticlesList from 'src/components/ArticlesList.vue'
+import { useFollow } from 'src/composable/useFollowProfile'
+import { useProfile } from 'src/composable/useProfile'
+import { checkAuthorization, user } from 'src/store/user'
 import { computed, defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 
-import ArticlesList from '../components/ArticlesList.vue'
-
-import { useProfile } from '../composable/useProfile'
-import { useFollow } from '../composable/useFollowProfile'
-
-import { user, checkAuthorization } from '../store/user'
-
 export default defineComponent({
   name: 'ProfilePage',
   components: {

src/pages/Register.vue

@@ -68,12 +68,10 @@
 </template>
 
 <script lang="ts">
+import { routerPush } from 'src/router'
+import { postRegister, PostRegisterErrors, PostRegisterForm } from 'src/services/auth/postRegister'
+import { updateUser } from 'src/store/user'
 import { defineComponent, reactive, ref } from 'vue'
-import { routerPush } from '../router'
-
-import { postRegister, PostRegisterForm, PostRegisterErrors } from '../services/auth/postRegister'
-
-import { updateUser } from '../store/user'
 
 export default defineComponent({
   name: 'RegisterPage',

src/pages/Settings.vue

@@ -74,12 +74,10 @@
 </template>
 
 <script lang="ts">
+import { routerPush } from 'src/router'
+import { putProfile, PutProfileForm } from 'src/services/profile/putProfile'
+import { checkAuthorization, updateUser, user } from 'src/store/user'
 import { computed, defineComponent, onMounted, reactive } from 'vue'
-import { routerPush } from '../router'
-
-import { putProfile, PutProfileForm } from '../services/profile/putProfile'
-
-import { user, checkAuthorization, updateUser } from '../store/user'
 
 export default defineComponent({
   name: 'SettingsPage',

src/plugins/global-components.ts

@@ -1,7 +1,6 @@
+import AppLink from 'src/components/AppLink.vue'
 import type { App } from 'vue'
 
-import AppLink from '../components/AppLink.vue'
-
 export default function registerGlobalComponents (app: App): void {
   app.component('AppLink', AppLink)
 }

src/plugins/set-authorization-token.ts

@@ -1,5 +1,5 @@
-import { request } from '../services'
-import storage from '../utils/storage'
+import { request } from 'src/services'
+import storage from 'src/utils/storage'
 
 export default function (): void {
   const token = storage.get<User>('user')?.token

src/services/article/favoriteArticle.ts

@@ -1,10 +1,8 @@
+import type { AuthorizationError } from 'src/types/error'
+import { Either, fail, success } from 'src/utils/either'
+import { mapAuthorizationResponse } from 'src/utils/map-checkable-response'
 import { request } from '../index'
 
-import type { AuthorizationError } from '../../types/error'
-
-import { Either, fail, success } from '../../utils/either'
-import { mapAuthorizationResponse } from '../../utils/map-checkable-response'
-
 export async function postFavoriteArticle (slug: string): Promise<Either<AuthorizationError, Article>> {
   const result1 = await request.checkablePost<ArticleResponse>(`/articles/${slug}/favorite`)
   const result2 = mapAuthorizationResponse<ArticleResponse>(result1)

src/services/auth/postLogin.ts

@@ -1,10 +1,8 @@
+import type { ValidationError } from 'src/types/error'
+import { Either, fail, success } from 'src/utils/either'
+import { mapValidationResponse } from 'src/utils/map-checkable-response'
 import { request } from '../index'
 
-import type { ValidationError } from '../../types/error'
-
-import { mapValidationResponse } from '../../utils/map-checkable-response'
-import { Either, fail, success } from '../../utils/either'
-
 export interface PostLoginForm {
   email: string
   password: string

src/services/auth/postRegister.ts

@@ -1,10 +1,8 @@
+import type { ValidationError } from 'src/types/error'
+import { Either, fail, success } from 'src/utils/either'
+import { mapValidationResponse } from 'src/utils/map-checkable-response'
 import { request } from '../index'
 
-import type { ValidationError } from '../../types/error'
-
-import { mapValidationResponse } from '../../utils/map-checkable-response'
-import { Either, fail, success } from '../../utils/either'
-
 export interface PostRegisterForm {
   email: string
   password: string

src/services/profile/followProfile.ts

@@ -1,10 +1,8 @@
-import type { AuthorizationError } from '../../types/error'
-
+import type { AuthorizationError } from 'src/types/error'
+import { Either, fail, success } from 'src/utils/either'
+import { mapAuthorizationResponse } from 'src/utils/map-checkable-response'
 import { request } from '../index'
 
-import { mapAuthorizationResponse } from '../../utils/map-checkable-response'
-import { Either, fail, success } from '../../utils/either'
-
 export async function postFollowProfile (username: string): Promise<Either<AuthorizationError, Profile>> {
   const result1 = await request.checkablePost<ProfileResponse>(`/profiles/${username}/follow`)
   const result2 = mapAuthorizationResponse<ProfileResponse>(result1)