You Are Still Using WebStorm?

Categories: Creation 2021-07-09

0. Beginning

It’s 2021, and you’re still using WebStorm? Why not just stick with VS Code? 😤

😂 In practice, I use both. I use VS Code for quick demos or markdown editing, and WebStorm for full-scale projects and deep source code exploration. The difference is fundamentally between a dedicated IDE and an extensible editor — there’s no need for tribalism. The only thing that matters is mastering your tool of choice so it elevates your development velocity. As the ancient saying goes: “A wise person isn’t born with superior talents; they are simply adept at using tools.”

So where does WebStorm actually pull ahead? I spent a weekend afternoon making the case for it, covering how to get a genuine license, how to keep it silky smooth without lag, and where its deep IDE features truly excel. Everything here applies equally to IntelliJ IDEA.

1. How to get a genuine WebStorm license

I strongly recommend starting with WebStorm’s 30-day free trial. Put it through its paces first, and only purchase once it proves its value in your daily workflow.

1. Purchase a personal license

Developers with the budget can head straight to JetBrains for a personal license. The first year is $69 (with perpetual fallback licensing if you choose not to renew). JetBrains confirms that personal licenses are fully permitted for commercial projects, as long as only you use it.

2. Apply for a free open source license

To be fair, JetBrains is genuinely developer-friendly. They offer free open-source development licenses for maintainers whose projects have been active for at least three months. You can apply directly through their Free License Plan. JetBrains also offers licenses for students, academic institutions, and user groups.

2. Keeping WebStorm silky smooth and lag-free

Opening xRender on battery power — see the screen recording

1. Essential plugins

Press Command + , to open Preferences, navigate to Plugins, and search for:

Chinese Language Pack: Developers typically default to English, but having menus in your native language occasionally reveals settings you otherwise glazed over. If you read English effortlessly, skip it.
Coderpillr Theme: A crisp, gorgeous dark theme inspired by Dracula with excellent syntax contrast.
Key Promoter X: A lifesaver for shortcut lovers that displays keyboard shortcut equivalents whenever you click a menu action.
.ignore: Auto-suggests file ignore rules, saving you from writing .gitignore patterns manually.
WakaTime: Automatically tracks coding time across all your projects. See the official site for setup.

Don’t overdo plugins: keep only what you actively use. Fancy visual gimmicks only slow down the IDE.

2. Modify text size

There are mainly 3 common places to modify, which can be configured according to personal preferences (screenshot explanation):

First is the appearance font, the default is a bit small, suggest .ApplesystemUIFont 16;
Second is the editor font, recommend JetBrains Meno 20, line height 1.16, do not ligature;
Third is the console font, recommend JetBrains Meno 18, line height 1.14, tighter, do not ligature;

3. Disable unused plugins

Continue in the installed Tab in the plugin, uncheck the ones you think you don’t use to disable a batch that may not be used, reduce memory usage. I disabled a lot, among which “Code With Me” can be turned off if not used. You can see more room for optimization in “Help -> Diagnostic Tools -> Analyze Plugin Memory” see. Selectively refer to the following:

4. Set the default memory larger

Current memory usage can be seen in the bottom bar. If not, you can right-click the bottom bar to choose open, or turn off some unused status displays (1)
Find “Help -> Change Memory Settings” (2) in the top menu bar. M1 is awesome and can stay unchanged, others update to 4096 is enough (3).

5. Remember and set common shortcut keys

It is recommended to start from here, open a local front-end project with Git release records to test, and familiarize yourself with it once. It is recommended to check “Show F1, F2, etc. keys on Touch Bar” in “Settings -> Keymap”. Because normal software buries operation actions inside the menu to maximize the main editing area, causing inability to see and get, thus not thinking of using it. Remembering shortcut keys can allow you to use 50% more trendy functions than ordinary users without thinking about it.

Some commonly used easy-to-use shortcut keys, it is recommended to force yourself to use more until your muscles remember:

  ## Find and Replace Operations
  shift press twice        // Search everywhere, searching files, functions, code is very convenient
  command + f              // Search current page
  command + shift + f      // Global search field
  command + r              // Replace current document
  command + shift + r      // Global replace field
  ## View Display
  command + 1              // Show/Hide left file tree
  command + 0              // Show current code to be committed, used for diff before commit
  command + 9              // Show all current history commit records
  command + 7              // Show current file structure, especially convenient when looking at Class
  command + up arrow       // Jump to navigation bar
  ## Code Operations
  command + option + l     // Format code (common)
  shift + f6               // Rename file, tag, variable name
  f2, shift + f2           // Switch to previous/next highlight error position
  shift + enter            // No matter where, automatically jump to the next line
  option + enter           // Warning code quickly gives automatic correction
  command + click          // Jump to code call position
  command + delete         // Delete current line, command + x is also okay
  command + d              // Copy and add a new line of the same code
  command + w              // Close current file tab
  command + /              // Comment line code
  command + b              // Jump to variable declaration
  command + shift + c      // Copy file path
  command + shift + [ ]    // Quick switch tabs, very useful
  command + shift + u      // Case auto convert
  command + shift + /      // Comment block code
  command + shift + +/-    // Expand/Collapse currently selected code block
  command + shift + v      // Select paste from clipboard
  ## git Operations
  command + k              // Fill in code commit record
  command + option + k     // Commit code
  command + option + z     // Undo current code changes
  command + d              // Select two files to compare, acting as folder diff tool

Find “Keymap in Settings”, perform operation text “Search”, set a few useful custom shortcut keys. I am used to using control+shift which is vertically aligned on the left, you can also set your own handy ones:
- Open Recent: Set to control+shift+r or more handy command+e, recent can quickly open history developed projects
- Open..: Set to control+shift+o , open is used to open new projects, later use command+e more to quick start
- Close Project: Set to control+shift+w , used to close the WebStrom window of the current project
- Terminal: Set to control+shift+i, iterm used to open the command line window, this command is used a lot
- Annotate: Set to control+shift+b, blame can show the development record of each line of the current file code
- Show History: Set to control+shift+h, history can show all commit change records of the current file
- Pull Code: Set to control+shift+p, pull the latest git code of the current branch
- Compare with Branch: Set to control+shift+d, diff can compare the current file/folder (select the file tree on the left) with the history branch, an artifact for troubleshooting online problems
- Toggle Presentation Mode: Set to command+option+control+v, view is particularly suitable for code demonstration and sharing with others
- Toggle Distraction Free Mode: Set to command+option+control+m, mute is particularly suitable when you want to code quietly
Students who are not used to using shortcut keys at the beginning can use Right Click more on the top menu bar, on the editor, on the bottom status bar, on the left navigation file tree. You can discover many new things, use Key Promoter X to assist memory

6. Advanced settings that may not be used

If the setting is usually not stuck, but after the Webstorm built-in terminal npm i, especially the problem of unresponsiveness caused by super many changes in node_modules file index (good computers generally don’t), you can try the advanced settings I have debugged many times here.

Find “Help -> Edit Custom Properties” in the top menu, open idea.properties file, edit as follows:

  idea.cycle.buffer.size=4096
  idea.max.intellisense.filesize=50

Continue in “Help -> Edit Custom VM Options” open webstorm.vmoptions file, edit as follows:

-ea
-server
-Xms2048m
-Xmx8888m
-Xss16m
-XX:MaxMetaspaceSize=2G
-XX:MetaspaceSize=1G
-XX:ConcGCThreads=8
-XX:ParallelGCThreads=8
-XX:NewRatio=2
-XX:ReservedCodeCacheSize=1024m
-XX:+AlwaysPreTouch
-XX:+UseG1GC
-XX:+DoEscapeAnalysis
-XX:+TieredCompilationUseG1GC
-XX:SoftRefLRUPolicyMSPerMB=50
-XX:+UnlockExperimentalVMOptions
-Dsun.io.useCanonPrefixCache=false
-Djava.net.preferIPv4Stack=true
-Dsun.io.useCanonCaches=false
-XX:LargePageSizeInBytes=1024m
-XX:+UseCodeCacheFlushing
-XX:+DisableExplicitGC
-XX:+ExplicitGCInvokesConcurrent
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled
-XX:CMSInitiatingOccupancyFraction=60
-XX:+CMSParallelRemarkEnabled
-XX:+UseAdaptiveGCBoundary
-XX:+UseSplitVerifier
-XX:CompileThreshold=10000
-XX:+OptimizeStringConcat
-XX:+UseStringCache
-XX:+UseFastAccessorMethods
-XX:+UnlockDiagnosticVMOptions
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-Djdk.attach.allowAttachSelf=true
-Dkotlinx.coroutines.debug=off
-Djdk.module.illegalAccess.silent=true
-XX:+UseCompressedOops
-Dfile.encoding=UTF-8
-XX:CICompilerCount=2
-Xverify:none

Finally find “File -> Invalidate Caches..” in the top menu bar, and then restart WebStrom, try npm i again to install huge dependencies should not be stuck.

Once you’ve tuned these settings, make sure to log into your JetBrains account via the status bar in the bottom-right corner to sync your preferences to the cloud. Give it a few days, and you’ll really start to appreciate what a full-fledged IDE brings to the table.

3. Where WebStorm Truly Shines

1. Superior built-in Git tools

Inline Git blame: Press Control + Shift + B (or right-click line numbers -> “Annotate with Git Blame”) to reveal commit details inline (preview). Clicking a committer’s name pulls up the complete commit diff.
Review diffs before committing: Form the habit of reviewing every change before committing. Press Command + 0 to review diffs side-by-side with crystalline clarity (preview), then Command + K to write the commit message.
Branch comparison & history: Press Control + Shift + H for file history, or Control + Shift + D (“Compare with Branch”) to diff your active branch against master before creating a pull request. Press F7 to jump through changes sequentially.

After trying Tower, SourceTree, Sublime Merge, and Fork, WebStorm's diff viewer still wins hands down

2. Rock-solid code refactoring and optimization

Safe renaming across the entire project: Press Shift + F6 on any variable, function, or file to rename it across all call sites automatically.
Move files safely: Dragging a file updates all relative import paths across the codebase without breaking builds.
Safe delete: Press Command + Delete and WebStorm verifies whether the target symbol is still referenced anywhere before deleting.
Instant intention fixes: Press Option + Enter on warnings or lint errors to apply automated fixes or add custom dictionary terms.
Extract function / variable: Highlight any block and press Command + Option + M to extract it cleanly into a helper function.
Prettier integration: Seamlessly delegates formatting to Prettier so formatting matches teammate environments.
Duplicate code detection: Highlights copy-pasted blocks and suggests abstractions.

3. Intelligent code completion

Hover package info: Hover over any dependency in package.json to view its README directly without switching to a browser:
Machine-learning powered suggestions: WebStorm adapts code completion ranking to your habits, serving concise, high-probability completions without cluttering the menu.

<img src=”https://cdn.tw93.fun/blog/upic/taxCxd.jpg” width=”800/>

4. Code With Me: Real-time collaborative debugging

Helping teammates troubleshoot remote code used to mean granting repo access, cloning, switching branches, running npm install, and trying to reproduce the bug — burning 30 minutes before seeing line one.
Screen-sharing tools like macOS Screen Sharing often stutter with sluggish latency.
Code With Me lets a teammate generate a join link. You jump straight into their live development session with your local keybindings, synchronized terminal access, and optional voice chat. Learn more in the official overview video.

Local WebStorm on the left, remote collaborator on the right via Code With Me

5. Thoughtful developer conveniences

A cleaner node_modules: In VS Code, node_modules is often an overwhelming flat sea of thousands of packages. WebStorm organizes dependencies with clear hierarchy so you can actually find what you need:

Left is WebStorm, right is VSCode (but can be solved by Node Modules Context Menu this niche plugin)
Unique presentation mode and focus mode, can be opened by custom shortcut key command+option+control+v, or found in “View -> Appearance -> Enter Presentation Mode” (can go to Settings -> Appearance -> set presentation mode font to 28 at the bottom), saving the embarrassment of unclear code below during presentation; use custom shortcut key command+option+control+v to enter distraction-free mode, or “View -> Appearance -> Enter Distraction Free Mode” to code seriously, which is also very clear.

First is presentation mode, second is distraction-free mode

Back to the beginning, improving operation efficiency does not care which tool you use, but cares which tool you are proficient in. At the same time, it is highly recommended that for the software you use commonly, slowly get yourself used to using shortcut keys, and gradually detach from the mouse, interesting things will happen.

❤️ 支持作者