如何配置WebStorm使其自动导入lodash/fp模块的函数？

Great question! I’ve dealt with this exact frustration when working with lodash/fp in WebStorm—those missing right-click import options can slow down your workflow. Here’s how to configure the IDE to recognize lodash/fp modules and enable those handy auto-imports:

Step 1: Add the lodash-fp Library to WebStorm #

WebStorm needs to know about lodash/fp’s type definitions to offer accurate auto-import suggestions:

• Open WebStorm Settings (File > Settings on Windows/Linux, WebStorm > Settings on Mac)
• Navigate to Languages & Frameworks > JavaScript > Libraries
• Click the Download button, search for lodash-fp in the pop-up modal, select it, and click Download and Install
• Ensure the lodash-fp library is checked (enabled) for your project in the Libraries list

Step 2: Adjust Auto-Import Settings #

Make sure WebStorm isn’t excluding lodash/fp from its import suggestions:

• In Settings, go to Editor > General > Auto Import > JavaScript
• Under Exclude from import and completion, check if lodash or lodash/fp is listed—if so, remove them
• Optional: If you prefer imports to automatically appear at the top of your file, enable Add imports to top of file and adjust the placement settings to your liking

Step 3: Confirm lodash/fp is Installed in Your Project #

WebStorm relies on your project’s dependencies to detect available modules:

• Run this command in your project root to install lodash/fp if you haven’t already:

  npm install lodash/fp
  # Or for yarn users:
  yarn add lodash/fp
  

• Refresh your project in WebStorm (right-click the project root > Refresh) to ensure the IDE picks up the new dependency

Step 4: Test the Auto-Import #

You should now see the right-click import option working:

• Delete your existing imports for map, flatten, etc.
• Type map in your code, right-click it, and you’ll see an option like Import 'map' from 'lodash/fp' in the context menu
• Pro tip: Use the Alt+Enter shortcut instead of right-clicking for even faster access to import options

After these steps, your lodash/fp code will get proper auto-import support, making it easier to work with flows like this:

import map from "lodash/fp/map";
import flatten from "lodash/fp/flatten";
import sortBy from "lodash/fp/sortBy";
import flow from "lodash/fp/flow";

flow(
  map(x => [x, x*2]),
  flatten,
  sortBy(x => x)
)([1, 2, 3]);

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