WebStorm Settings

It's already 2022, and you're still using WebStorm? Isn't VSCode better? 😤

It's already 2022, and you're still using WebStorm? Isn't VSCode better? 😤

😂 Actually, I use both. I use VSCode for writing demos or formatting documents, and I use WebStorm for projects and reading source code. I think the difference between the two is more about IDE versus Editor, so comparing them isn't very necessary; the only condition for coding tools is that you can use them super proficiently, and the key is to improve your unique coding efficiency, similar to the saying "A gentleman's nature is not different, but he is good at using tools."

So where exactly is WebStorm better? I spent an afternoon this weekend writing an article to introduce everyone to "How to get the latest official version of WebStorm?" "How to make WebStorm run smoothly?" and "What are the advantages of WebStorm?" The following article will also be suitable if you replace the word WebStorm with IntelliJ IDEA.

# 1. How to get the latest official version of WebStorm?#

I highly recommend taking advantage of the "30 days free trial of WebStorm" when you first start using it. Only consider applying for the official version once you find it useful to avoid unnecessary waste!

# 1. Buy the personal version officially at your own expense#

If your budget allows, you can directly purchase the personal version from the official website. The first year is $59, and subsequent renewals will be much cheaper (59->47->35). If you don't update, you can continue using it without renewal. Additionally, the personal version officially states that it also supports commercial projects, as long as it's used by one person.

# 2. Apply for a year of usage through open source projects#

To be honest, JetBrains is really generous, offering open source development licenses that allow everyone to use their software for open source contributions for free. Generally, projects maintained for over 3 months are likely to be approved. You can apply through this entry Free License Program and refer to this tutorial; aside from open source applications, you can also try academic licenses, user groups, developer events, and developer recognition methods to obtain licenses, but all of these "cannot be used for commercial projects," so please use them with caution.

In summary, if your budget allows, buy the personal official version; if you're tight on budget, use the open source project option. At the same time, I do not recommend buying educational versions authorized to your own email from Taobao or using the ide-eval-resetter plugin to delay the trial period for developing company projects.

# 2. How to make WebStorm run smoothly?#

Install a few commonly used plugins

Directly open settings with command + ,, find plugins, copy and search for installation in the plugin marketplace:

Chinese Language Pack: To be honest, programmers should default to English, but after installation, you will immediately notice many things that were "invisible" in English. I remember forcing myself to use all Apple products in English, and after a month, I couldn't stand it anymore. Although I could understand it, it took time to mentally translate. Looking back, why bother? However, those who can read English as easily as Chinese can ignore this (once you become proficient in the features, you can actually turn off Chinese).
Coderpillr Theme: A super beautiful theme. I have tried many like One Dark and Material Theme Ul but was not satisfied. I actually love the Dracula Theme, but unfortunately, it doesn't look good here. Coderpillr, which has a niche style similar to Dracula, is just to my liking.
Key Promoter X: A must-have for shortcut key enthusiasts, it will intelligently teach you to remember shortcut keys.
.ignore: Automatically prompts you which files can be ignored, saving you the trouble of finding them one by one in new project scenarios.
WakaTime: Requires a little configuration, but you can install this plugin in all your coding environments, which can easily track how long you've been coding. For details, see the official website.

For plugins, I do not recommend installing too many; just meet your usage needs. Too flashy plugins can actually affect performance, and it's also advisable to disable a batch of plugins you don't use.

# 2. Modify font size#

There are mainly 3 common places to modify, but you can also configure according to personal preference (screenshot explanation):

First is the appearance font, which is a bit small by default; I recommend setting .ApplesystemUIFont to 16;
Second is the editor font, recommended to be JetBrains Meno at 20, line height 1.16, do not use a connected style;
Third is the console font, recommended to be JetBrains Meno at 18, line height 1.14, a bit more compact, do not use a connected style;

# 3. Disable unused plugins#

Continue in the installed tab of plugins, uncheck and disable those you think you won't use to reduce memory usage. I have disabled many, including "Code With Me," which can also be turned off. You can go to "Help -> Diagnostic Tools -> Analyze Plugin Memory" to see more optimization space, selectively refer to the following:

# 4. Increase default memory settings#

You can see the current memory usage at the bottom bar. If not, you can right-click the bottom bar to open it, and you can also close some unused status displays (1).
Find "Help -> Change Memory Settings" (2) in the top menu bar. M1 is very powerful and can run without issues; for others, just update to 4096 (3).

# 5. Remember and set common shortcuts#

I suggest starting from here. Open a front-end project with Git release records locally to test and familiarize yourself. In "Settings -> Keymap," check "Show F1, F2, etc. keys on the Touch Bar." Since normal software hides operational actions in the menu to maximize the main editing area, this leads to a lack of visibility and makes it hard to think of using them. Remembering shortcut keys can allow you to use 50% more trendy features than ordinary users in situations you didn't think of.

Some commonly used and useful shortcut keys that I recommend forcing yourself to use until they become second nature:

  ## Find and replace operations
  shift pressed twice         // Search anywhere, very convenient for searching files, functions, and code
  command + f                 // Search the 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 the left file tree
  command + 0                 // Show current code to be committed for pre-commit diff
  command + 9                 // Show all historical commits
  command + 7                 // Show the structure of the current file, especially useful when viewing classes
  command + up arrow          // Jump to the navigation bar
  ## Code operations
  command + option + l        // Format code (commonly used)
  shift + f6                  // Rename files, tags, variable names
  f2, shift + f2              // Switch to the next/previous highlighted error location
  shift + enter               // Automatically jump to the next line regardless of position
  option + enter              // Quickly provide automatic fixes for warning codes
  command + click             // Jump to the code calling location
  command + delete            // Delete the current line; command + x also works
  command + d                 // Copy and add a new line of the same code
  command + w                 // Close the current file tab
  command + /                 // Comment out line of code
  command + b                 // Jump to variable declaration
  command + shift + c         // Copy the file path
  command + shift + [ ]       // Quickly switch tabs, very useful
  command + shift + u         // Automatically change case
  command + shift + /         // Comment out block of code
  command + shift + +/-       // Expand/collapse the currently selected code block
  command + shift + v         // Select and paste from the clipboard
  ## Git operations
  command + k                 // Fill in code commit records
  command + option + k        // Commit code
  command + option + z        // Undo current code changes
  command + d                 // Select two files for comparison, acting as a folder diff tool

Find "Keymap in Settings," perform a text "search," and set a few useful custom shortcuts. I prefer using the left vertical alignment control+shift, but you can set whatever is comfortable for you:
- Open Recent: Set to control+shift+r or a more convenient command+e, recent can quickly open previously developed projects
- Open..: Set to control+shift+o, open is used to open new projects, later more usage of command+e for quick launch
- Close Project: Set to control+shift+w, used to close the current WebStorm window
- Terminal: Set to control+shift+i, iterm is used to open the command line window, which is used a lot
- Annotate: Set to control+shift+b, blame can show the development records of each line of code in the current file
- Show Historical Commit Records: Set to control+shift+h, history can show all commit changes in the current file
- Pull Code: Set to control+shift+p, pull the latest git code for the current branch
- Compare with Branch: Set to control+shift+d, diff can compare the current file/folder (select from the left file tree) with the historical branch, which is simply a lifesaver for troubleshooting online issues
- Toggle Presentation Mode: Set to command+option+control+v, view is especially suitable for code demonstrations and sharing with others
- Toggle Do Not Disturb Mode: Set to command+option+control+m, mute is especially suitable when you want to code quietly
For those who are not used to using shortcut keys at first, you can use right-click more on the top menu bar, in the editor, on the bottom status bar, and on the left navigation file tree to discover many new features, assisted by Key Promoter X for memory.

# 6. Advanced settings that may not be used#

If the settings are usually smooth, but after running npm i in the built-in terminal of WebStorm, especially if the index of the node_modules file changes too much and causes unresponsiveness (good computers generally won't), you can try the advanced settings that I have debugged many times.

In the top menu, find "Help -> Edit Custom Properties," open the idea.properties file, and edit as follows:

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

Continue in "Help -> Edit Custom VM Options" to open the webstorm.vmoptions file and edit as follows:

  -ea
  -server
  -Xms2048m
  -Xmx8192m
  -Xss16m
  -XX:MaxMetaspaceSize=2G
  -XX:MetaspaceSize=1G
  -XX:ConcGCThreads=8
  -XX:ParallelGCThreads=8
  -XX:NewRatio=2
  -XX:ReservedCodeCacheSize=240m
  -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=256m
  -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, then restart WebStorm, and try running npm i to install a large number of dependencies; it should not lag anymore.

Once you are familiar with the above, I highly recommend logging in to your account in the lower right corner of the status bar for synchronization to prevent loss of settings. After using it for a while, you will find that WebStorm gradually becomes better.

# 3. What are the advantages of WebStorm?#

# 1. The best Git management tool in the world#

See who wrote this line of code: Also known as git blame, the shortcut key is control+shift+b, or right-click on the line number and select "Annotate with Git Blame," and you will see this effect. You can also click on the corresponding name with the mouse to see the detailed record of that commit.
CR code changes before committing: I highly recommend maintaining this habit of comparing changes before each commit. The shortcut key is command + 0, and this diff comparison is super clear, making it easy to spot careless code. This effect allows you to confirm accuracy before command+k to fill in the commit record, and command+shift+k to commit the code. After committing, use command+1 to return to code development.
View all current commit records: The shortcut key control+shift+h allows you to view all historical commit records. If you only want to see a specific file or folder, select it and use the shortcut key, or right-click to find "Show History" in git.
View changes between the current branch and the main branch: This is what I find most useful, also known as "life-saving operation." For example, if an issue arises online, you can compare all code changes between the online version and the previous version, or it is also suitable for final CR before merging with master. The shortcut key is control+shift+d, or right-click on the corresponding folder and find "Compare with Branch" in git to see the following effect. You can press F7 to view the next change point. I have tried well-known Git management tools like Tower, Sourcetree, Sublime Merge, Fork, etc., and found that they really can't compare to it.

# 2. A stable tool for refactoring & optimizing code#

Renaming files or variables will help modify all calls: The shortcut key is shift+f6, or you can directly right-click on the file or variable to find refactor; after changing, all places will be automatically modified.
When the file's location is modified, it will also automatically change the references in the calling places.
Before deleting a file, it will check if the calls are cleaned up: You can try on a file with command+delete, and it will prompt you where it is still in use.
Spelling errors, syntax errors, and poorly written code will be prompted: You can use option+enter to fix according to suggestions; sometimes, spelling errors may be custom words, and you can store this word in the WebStorm dictionary.
You can extract a block of code into a method: Find a block of code that can be extracted into a method, select it, and then use command+option+m to abstract the method and intelligently help you name it.
You can replace it with Prettier as the default formatter: This feature can better maintain code format consistency with colleagues developing in VSCode. See settings demonstration.
It tells you which code can be optimized: Especially the tool for finding duplicate code is quite good. Here I secretly @NaSa FR for the optimizable code.

# 3. Intelligent prompting is really strong#

Display current package information: You can hover the mouse over the corresponding imported package for a while, and it will display the README of this package, saving you the trouble of looking up how to use it:
Machine learning to prompt code: During the coding process, WebStorm 2021 supports machine learning to optimize code prompt functions based on everyone's coding habits, supporting concise code prompts (VSCode sometimes has many prompts that are not useful). After using it for a while, you will gradually discover this.

# 4. Trendy feature Code With Me for real-time debugging of others' code#

I recall previously troubleshooting code issues for classmates, especially in scenarios where we weren't sitting together. You would first need to grant them code permissions, then clone the code, switch branches, run npm i, and then tell you where the code might have issues, wasting a lot of time.

Sometimes, you might use Mac for remote control, but the experience here is very poor; often, it lags and drops frames, making it difficult to debug code.

With Code With Me (which needs to be enabled in the plugins), the other party can directly share a URL with you, automatically syncing their code and installed dependencies to your WebStorm. When you modify it locally, the other person's computer will also update. Even trendier, you can have a video conference to discuss issues, providing an almost native instant opening experience. You can learn more through the official video. The left side is the local WebStorm, and the right side is the collaborator's Code With Me, illustrating the collaborative effect of two computers.

# 5. There are many surprising features#

Provides a clear view of node_modules: Many VSCode users may be confused about not being able to find anything in their node_modules, but WebStorm is very clear. It shows that it can be optimized better, even allowing useless items not to appear. See explanation:
The left side is WebStorm, and the right side is VSCode (although this can be resolved through the Node Modules Context Menu plugin).
Unique presentation mode and focus mode, which can be opened through the custom shortcut command+option+control+v, or found in "View -> Appearance -> Enter Presentation Mode" (you can set the presentation mode font size to 28 in settings -> appearance -> at the bottom). This avoids the awkwardness of not being able to see the code clearly during presentations; using the custom shortcut command+option+control+v to enter Do Not Disturb mode is also very clear for serious coding. The first is presentation mode, and the second is Do Not Disturb mode.

Returning to the beginning, improving operational efficiency does not depend on which tool you use, but on how proficient you are with that tool. I also highly recommend that everyone gradually get used to using shortcut keys for the software they commonly use and gradually move away from the mouse; interesting things will happen.