如何在WebStorm中配置导入？能否设置库导入在顶部、自定义模块在底部？

嘿，我来帮你搞定WebStorm里的导入配置和排序问题！

一、基础导入功能配置 #

WebStorm默认就自带实用的导入支持，但你可以根据习惯调整细节：

• 打开设置：用快捷键Ctrl+Alt+S（Windows/Linux）或Cmd+,（Mac），也可以通过顶部菜单栏的File > Settings（Windows/Linux）/WebStorm > Settings（Mac）进入。
• 定位到Editor > General > Auto Import：
  • 勾选Add unambiguous imports on the fly，输入未导入的模块时，IDE会自动帮你补全导入语句。
  • 开启Optimize imports on the fly，它会自动清理无用的导入，让代码保持整洁。
  • 如果你用TypeScript，别忘了同步检查Editor > General > Auto Import > TypeScript下的对应选项，确保配置适配TS项目。

二、自定义导入排序：库导入在上，自定义模块在下 #

这个需求完全可以实现，跟着步骤来：

1. 还是在设置界面，找到Editor > Code Style > JavaScript（TypeScript项目选TypeScript），切换到Imports标签页。
2. 在Import Layout区域，拖拽调整导入组的顺序：
   • 找到Node.js modules（对应moment、React这类第三方库），把它拖到最顶部。
   • 找到Relative imports或Project imports（对应你自己的components/...这类自定义模块），拖到最底部。
   • 要是需要更细分的规则，点击+按钮添加自定义分组，比如指定某个路径下的文件单独归为一类，再调整顺序。
3. 建议勾选Sort imports alphabetically within groups，同一组内的导入会按字母顺序排列，看起来更规整。
4. 点击Apply和OK保存配置，之后用快捷键Ctrl+Alt+O（Windows/Linux）或Cmd+Opt+O（Mac）触发优化导入，就能看到效果了。

配置后的导入示例：

import React from 'react';
import moment from 'moment';

import myModule from './components/myModule';
import utils from '../utils/helper';

内容的提问来源于stack exchange，提问作者J.Michael