Split single import statement into multiple lines for formatting

[Shyam-Chen]

Since we have automatic sorting, could we also implement line-by-line sorting? Anyone else had this idea? I think it would make things look neater. If I use unplugin-auto-import, it will make it difficult for me to search.

Input:

import { XBreadcrumb, XButton, XCheckbox, XDeleteConfirmation, XPanel, XRadioGroup, XTable, XTextField, XTooltip } from '@x/ui';
import { eachDayOfInterval, format, getISOWeek, nextSaturday, nextSunday, previousSaturday, previousSunday, setWeek } from 'date-fns';
import { custom, email, literal, minLength, minValue, nullish, number, object, string } from 'valibot';
import type { ComputedRef, InputHTMLAttributes, Ref, VNode, WritableComputedRef } from 'vue';
import { computed, inject, nextTick, onMounted, ref, toRef, watch, watchEffect } from 'vue';

Ouput:

import {
  XBreadcrumb,
  XButton,
  XCheckbox,
  XDeleteConfirmation,
  XPanel,
  XRadioGroup,
  XTable,
  XTextField,
  XTooltip,
} from '@x/ui';
import {
  eachDayOfInterval,
  format,
  getISOWeek,
  nextSaturday,
  nextSunday,
  previousSaturday,
  previousSunday,
  setWeek,
} from 'date-fns';
import {
  custom,
  email,
  literal,
  minLength,
  minValue,
  nullish,
  number,
  object,
  string,
} from 'valibot';
import type {
  ComputedRef,
  InputHTMLAttributes,
  Ref,
  VNode,
  WritableComputedRef,
} from 'vue';
import {
  computed,
  inject,
  nextTick,
  onMounted,
  ref,
  toRef,
  watch,
  watchEffect,
} from 'vue';

Expect:

import { XBreadcrumb, XButton, XCheckbox, XDeleteConfirmation } from '@x/ui';
import { XPanel, XRadioGroup, XTable, XTextField, XTooltip } from '@x/ui';
import { eachDayOfInterval, format, getISOWeek, nextSaturday } from 'date-fns';
import { nextSunday, previousSaturday, previousSunday } from 'date-fns';
import { setWeek } from 'date-fns';
import { custom, email, literal, minLength, minValue, nullish } from 'valibot';
import { number, object, string } from 'valibot';
import type { ComputedRef, InputHTMLAttributes, Ref, VNode } from 'vue';
import type { WritableComputedRef } from 'vue';
import { computed, inject, nextTick, onMounted, ref, toRef, watch } from 'vue';
import { watchEffect } from 'vue';

[ematipico]

The title misled me. For a moment I thought you were suggesting an import sorter. Lol

[hilja]

Each import has a cost, although small but they add up. Would’t this achieve the same result?

import {
  XBreadcrumb, XButton, XCheckbox, XDeleteConfirmation,
  XPanel, XRadioGroup, XTable, XTextField, XTooltip
} from '@x/ui';

[Shyam-Chen]

I'm referencing Rust, but if we proceed this way, it will conflict with the Object syntax.

use hyper::{server::conn::http1, service::service_fn, Method, Request, Response, StatusCode};
// to
use hyper::server::conn::http1;
use hyper::service::service_fn;
use hyper::{Method, Request, Response, StatusCode};

// This is quite similar to Rust, except it seems to clash with `Object` syntax?
import {
  XBreadcrumb, XButton, XCheckbox, XDeleteConfirmation,
  XPanel, XRadioGroup, XTable, XTextField, XTooltip,
} from '@x/ui';

const myObject = {
  id: 10,
  title: 'HP Pavilion 15-DK1056WM',
  description: 'HP Pavilion 15-DK1056WM Gaming...',
  price: 1099,
  discountPercentage: 6.18,
  rating: 4.43,
  stock: 89,
  brand: 'HP Pavilion',
  category: 'laptops',
  thumbnail: 'https://cdn.dummyjson.com/product-images/10/thumbnail.jpeg',
};

It seems that the majority of users prefer this type?

import {
  XBreadcrumb,
  XButton,
  XCheckbox,
  XDeleteConfirmation,
  XPanel,
  XRadioGroup,
  XTable,
  XTextField,
  XTooltip,
} from '@x/ui';

---

In Rust:

Input:

use hyper::{body::Frame, server::conn::http1, service::service_fn, Method, Request, Response, StatusCode};

use hyper::{
    server::conn::http1,
    service::service_fn,
    Method,
    Request,
    Response,
    StatusCode,
};

Output:

use hyper::{
    body::Frame, server::conn::http1, service::service_fn, Method, Request, Response, StatusCode,
};

use hyper::{server::conn::http1, service::service_fn, Method, Request, Response, StatusCode};

[ematipico]

We can't compare the object syntax, it has way more quirks and checks compared to import statements.