You Are Still Using WebStorm?

Categories: Creation 2021-07-09

0. Beginning

It’s 2021, and you are still using WebStorm? Isn’t VSCode delicious? 😤

😂 Actually, I use both. I use VSCode when writing Demos or formatting documents, and use WebStorm when writing projects and reading source code. I think the two are more of a difference between IDE and Editor, and there is no need to compare them together; There is only one condition for what to use for coding, that is, you can use that tool super proficiently. The key is to improve your unique coding efficiency. It’s a bit like the view expressed in the sentence “A gentleman’s nature is not different, but he is good at using things”.

So where exactly is WebStorm better? I spent an afternoon this weekend writing an article to “reverse the wheel of history” and introduce to everyone “How to use the latest genuine version of WebStorm?”, “How to make WebStorm smooth and not laggy?”, and “Where are the fragrant parts of WebStorm?”. Replacing the word WebStorm with IntelliJ IDEA in the following article is also appropriate.

1. How to use the latest genuine version of WebStorm?

It is highly recommended to use the “WebStorm free for 30 days” welfare when you first use it, and then consider applying for the official version when you find it easy to use, to prevent unnecessary waste!

1. Pay for the personal version on the official website

Students with sufficient funds can go directly to the official website to check the personal version. The first year is $69 (a bit more expensive than before). If you don’t update, you can use it forever without renewing. At the same time, for the personal version, the official says it also supports commercial projects, just ensure that one person uses it. Domestic users can also go to Lizhi Digital to buy it more conveniently.

2. Apply for one year of use through open source projects

To be honest, JetBrains is really conscientious. It provides open source development license benefits, allowing everyone to use their software for free to make open source contributions. Generally, projects maintained for more than 3 months have a high probability of passing. You can enter the application from this entrance Free License Plan, or refer to this tutorial; in addition to open source applications, you can also try Academic License, User Group, Developer Event, Developer Recognition methods to obtain, but they “cannot be used for commercial projects”, please consider carefully.

2. How to make WebStorm smooth and not laggy?

Open the largest project xRender on my Mac, without plugging in, the actual startup effect screen recording mp4

1. Install a few commonly used plugins

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

Chinese Language Pack: Logically, students who code should default to all English, but after installation you will find many things that were “invisible” under English at a glance. I remembered that I forced myself to use English for all Apple products before, and I couldn’t bear it after insisting for 1 month. Although I could understand it, it took time for my brain to proxy translate. Looking back, why bother? However, students who read English like Chinese without reaction can ignore it (Wait until the day when the functions are proficient, you can actually turn off Chinese).
Coderpillr Theme: A super nice theme. I tried many before such as One Dark, Material Theme Ul, but I wasn’t very satisfied. Actually, I love Dracula Theme the most, but unfortunately it doesn’t look good here. Coderpillr, a niche one, happens to have a Dracula style, which wins my heart.
Key Promoter X: An artifact for shortcut key lovers, it will intelligently teach you to remember shortcut keys.
.ignore: Automatically prompt you which files can be ignored, saving the trouble of finding them one by one in new project scenarios.
WakaTime: Need to configure a little, you can install this plugin in all places where you code. It can count how long you have coded very conveniently. See official website for details.

For plugins, it is not recommended to install too many, just satisfy the use. Too cool ones affect performance instead. It is also recommended to disable a batch that you don’t use.

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.

When you are proficient in the above, it is highly recommended to log in to the account in the status bar in the lower right corner to synchronize, preventing settings loss. After using it for a while, you will find WebStorm slowly becoming fragrant.

3. Where are the fragrant parts of WebStorm?

1. The world’s best Git management tool

See who wrote this line of code: Also called git blame, shortcut key control+shift+b, or right-click “Annotate with Git Blame” on the code line number, such an effect will appear. At the same time, clicking the corresponding name will show the detailed record of that commit.
CR code changes before commit: It is highly recommended to keep this habit. Compare the changes before each commit. The shortcut key is command + 0. This diff comparison is super clear, and it is easy to find careless code. Such an effect. After confirming it is correct, command+k to fill in the commit record, command+shift+k to commit the code. After commit is completed, command+1 switch back to code development.
View all current commit records: Shortcut key control+shift+h can view all historical commit records. If you only want to view a file or a folder, select it, then shortcut key, or find “Show History” in git by right click.
View changes between current branch and trunk: This is what I think is the most useful place, also called “Life-saving operation”. For example, if there is a problem online, use it to compare all code changes between the online version and the previous version, or when you need to merge master before final CR is also very suitable. The shortcut key is control+shift+d, or right-click on the corresponding total folder to find “Compare with Branch” in git, you can see the following effect, and press F7 to see the next change point.

Tried famous Git management tools such as Tower, Sourcetree, Sublime Merge, Fork, etc., found sincerely inferior to it

2. Artifact for stable refactoring & optimizing code

Renaming files and variables will help modify all calls: Shortcut key is shift+f6, or directly right-click on the file or variable to find Refactor, all places will be automatically modified for you after modification.
After file modification location, references at the call site will also be automatically modified.
Before file deletion, it will detect whether the call is cleaned up: You can try command+delete on a file, it will prompt you where it is still in use.
Spelling errors, syntax errors, and inelegant code writing will have prompts: You can use option+enter to repair according to suggestions. Sometimes spelling errors may be proprietary words, you can save this word to the WebStorm dictionary.
Can extract a piece of code into a method for use: Find a piece of code that can be extracted into a method, select it, and then command+option+m to abstract the method and intelligently help you name the method.
Can be replaced to use Prettier as default formatting: This function can better maintain code format consistency with other colleagues in VSCode development scenarios, see settings demo.
Tell you which codes can be optimized: Especially the duplicate code prompt search tool is very good. Secretly @Nasa FR has optimizable code here.

3. Intelligent prompt is really strong

Show current package information: You can put the mouse on the corresponding imported package for a while, it will show the README of this package, saving the trouble of looking at how to use it:
Machine learning to prompt code: In the process of writing code, current WebStorm 2021 supports machine learning everyone’s code habits to optimize code prompt function, supports concise code prompts (VSCode sometimes has many unused prompts), after using for a while you will slowly discover it.

4. Trendy function Code With Me real-time debugging other people’s code

Recalling helping classmates troubleshoot code problems before, especially in scenarios where they don’t sit together, you need to ask him to add code permissions first, then clone the code, switch branches, npm i, and then tell you where the code might have problems. A lot of time is wasted here.
Sometimes Mac remote control might be used, but the experience here is very bad. Often it is lagging, dropping frames, slow reaction, feeling unable to move, let alone debugging code.
With this Code With Me (need to go to the plugin to enable if not enabled), directly share a url to you, it will automatically synchronize the other party’s code including installed dependencies to your WebStorm, and then when you modify locally, the other party’s computer will also be modified. Even trendier, you two can also chat about where the problem is via video conference, using almost native second-opening experience. You can learn more through official video.

Left is local WebStorm, right is collaborator's Code With Me, analogous to the effect of two computers collaborating

5. There are also many small surprise functions

Give you a clear node_modules: Many students using VSCode may be confused, my node_modules simply can’t find anything, but WebStorm is very clear. Here display can be better optimized, even making useless ones not appear, see instruction:

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.

觉得不错，请 Tw93 喝冰可乐 🥤