# You Are Still Using WebStorm? > What makes WebStorm worth using over VS Code in 2021? I spent an afternoon writing this comprehensive guide covering how to obtain a genuine license, how to optimize WebStorm for blazing speed on macOS, and where its IDE features truly shine. - Published: 2021-07-09 - Author: Tw93 - HTML: https://tw93.fun/en/2021-07-09/webstorm.html - Chinese original: https://tw93.fun/2021-07-09/webstorm.md - All posts: https://tw93.fun/en/posts.md --- ## 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](https://www.jetbrains.com/zh-cn/store/#personal). The first year is $69 (with perpetual fallback licensing if you choose not to renew). [JetBrains confirms](https://sales.jetbrains.com/hc/en-gb/articles/207241015-Can-I-use-my-personal-license-for-commercial-development-) 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](https://www.jetbrains.com/zh-cn/community/opensource/#support). 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: 1. **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. 2. **Coderpillr Theme**: A crisp, gorgeous dark theme inspired by Dracula with excellent syntax contrast. 3. **Key Promoter X**: A lifesaver for shortcut lovers that displays keyboard shortcut equivalents whenever you click a menu action. 4. **.ignore**: Auto-suggests file ignore rules, saving you from writing `.gitignore` patterns manually. 5. **WakaTime**: Automatically tracks coding time across all your projects. See the [official site](https://wakatime.com/) 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](https://cdn.tw93.fun/blog/upic/rdJGpL.jpg)): - 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](https://gw.alipayobjects.com/zos/k/kl/BWA11F.gif). Selectively refer to the following: ### 4. Set the default memory larger 1. 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) 2. 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**. 1. **Some commonly used easy-to-use shortcut keys, it is recommended to force yourself to use more until your muscles remember:** ```shell ## 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 ``` 2. **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 3. **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: ```shell idea.cycle.buffer.size=4096 idea.max.intellisense.filesize=50 ``` Continue in "Help -> Edit Custom VM Options" open `webstorm.vmoptions` file, edit as follows: ```shell -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](https://gw.alipayobjects.com/zos/k/vz/NfBNKx.jpg) 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 1. **Inline Git blame**: Press `Control + Shift + B` (or right-click line numbers -> "Annotate with Git Blame") to reveal commit details inline ([preview](https://gw.alipayobjects.com/zos/k/xy/MRsvfR.jpg)). Clicking a committer's name pulls up the [complete commit diff](https://gw.alipayobjects.com/zos/k/my/2OhCIv.jpg). 2. **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](https://gw.alipayobjects.com/zos/k/ge/YnE72Q.jpg)), then `Command + K` to write the commit message. 3. **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 1. **Safe renaming across the entire project**: Press `Shift + F6` on any variable, function, or file to rename it across all call sites automatically. 2. **Move files safely**: Dragging a file updates all relative `import` paths across the codebase without breaking builds. 3. **Safe delete**: Press `Command + Delete` and WebStorm verifies whether the target symbol is still referenced anywhere before deleting. 4. **Instant intention fixes**: Press `Option + Enter` on warnings or lint errors to apply automated fixes or add custom dictionary terms. 5. **Extract function / variable**: Highlight any block and press `Command + Option + M` to extract it cleanly into a helper function. 6. **Prettier integration**: Seamlessly delegates formatting to Prettier so formatting matches teammate environments. 7. **Duplicate code detection**: Highlights copy-pasted blocks and suggests abstractions. ### 3. Intelligent code completion 1. **Hover package info**: Hover over any dependency in `package.json` to view its README directly without switching to a browser: 2. **Machine-learning powered suggestions**: WebStorm adapts code completion ranking to your habits, serving concise, high-probability completions without cluttering the menu.

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

### 5. Thoughtful developer conveniences 1. **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)


2. **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**.