WebStorm能否通过内置Optimise Imports将导入整理为单列列表？

Absolutely! You can totally configure WebStorm’s built-in Optimise Imports feature to format your import statements into a clean single-column list. Let me walk you through exactly how to set it up:

• First, open WebStorm’s settings: Hit Ctrl+Alt+S (Windows/Linux) or Cmd+, (Mac), or click File > Settings (Windows/Linux) / WebStorm > Settings (Mac) from the menu bar.
• Navigate to your language’s code style settings:
  • For JavaScript/TypeScript: Go to Editor > Code Style > JavaScript (or TypeScript) and switch to the Imports tab.
  • For other languages like Vue or React (JSX/TSX), you’ll find similar options under their respective code style sections—just look for the Imports tab.
• Adjust the import wrapping rules:
  • Look for the option labeled Wrap imports (or Import statements wrapping). Choose either Always or Chop down if long—both will force each imported item onto its own line.
  • If you want even short import lists to split into single lines, enable Wrap when typing reaches right margin and set the right margin to a low value (like 1), or just select Always for consistent results.
• Save your changes: Click Apply then OK to lock in the settings.

Now whenever you run Optimise Imports (use the shortcut Ctrl+Alt+O for Windows/Linux, Opt+Cmd+O for Mac, or go to Code > Optimise Imports), WebStorm will automatically rearrange your imports into the neat single-column format you want.

Here’s a quick example of how it works:

Current style (before optimisation):

import { useState, useEffect, useContext } from 'react';
import { Button, Input, Card } from '@mui/material';

Target style (after optimisation):

import {
  useState,
  useEffect,
  useContext
} from 'react';
import {
  Button,
  Input,
  Card
} from '@mui/material';

内容的提问来源于stack exchange，提问作者francium