Ling,

You’re still using WebStorm in 2021? Doesn’t VSCode smell good? 😤

In fact, we use 😂. VSCode is used when writing Demo or formatting documents, and WebStorm is used when writing projects and reading source code. I think the two are more the difference between IDE and Editor, and it is not necessary to put them together. The only condition for typing is that you are super skilled with the tool. The point is to improve your unique typing efficiency, which is a bit like the expression “a good man is a good man”.

So what’s more interesting about WebStorm? Spent the afternoon over the weekend writing a “historical reverse wheel” to explain how to use the latest legitimate version of WebStorm? “How do I make WebStorm work?” “And” What smells so good about WebStorm?” IntelliJ IDEA is also appropriate for WebStorm.

How to use WebStorm’s latest legal version?

It is highly recommended that “use it” for initial useWebStorm 30 daysFree “benefits, wait until feel good to consider to apply for the official version, to prevent unnecessary waste!

1. Go to the official purchase of personal version at your own expense

The student that fund allows can go up official website to buy individual version directly, 59 dollars of the first year, after year is renewed meeting cheap quite a few (59->47->35), if do not update, still can use all the time go down do not renew fee. At the same time for the personal version of the official said the same support for commercial projects, only need to ensure that a person can use.

2. Apply for one year’s use through the open source project

To be fair, JetBrains has been very conscientious in providing open source development license benefits, which allow people to make open source contributions with their software for free. You can apply for the free license program at this portal, or refer to this tutorial; In addition to open source applications, you can also try academic licenses, user groups, developer events, and developer approvals, but all are “not for commercial use”.

To sum up, if funds allow to buy a personal official version, some close to use open source projects. At the same time, it is not recommended to use Taobao to buy their own mailbox authorized education version or use IDE-eval-Resetter plug-in to delay the trial period of the gray area way to develop commercial projects.

How to make WebStorm easy to use?




Open the biggest project on my MacxRender, the actual starting effect in the case of no pluggingRecord the screen mp4

1. Install several commonly used plug-ins

Direct command +, open Settings, find plugin, copy and search for plugins in the plugin market:

  1. Chinese language pack: If you want to program in English by default, you will find a lot of things you can’t see in English before. I remember that I forced my whole apple family to use English before, and I couldn’t stand it after 1 month. Although I could understand it, I needed time for proxy translation. Why should I do it in retrospect? But look at English, such as look at Chinese without reaction of students can be ignored (wait until which day after the functional proficiency can also be turned off Chinese).
  2. Coderpillr Theme: Super beautiful a Theme, before trying a lot of such as One Dark, Material Theme Ul are not very satisfied, in fact, favorite Dracula Theme, but unfortunately here is not good, just Coderpillr this minority is Dracula style, deep in my heart.
  3. Key Promoter X: I want you to remember the Key Promoter.
  4. .ignore: Automatically prompts you which files can be ignored, eliminating the problem of finding new project scenarios one by one
  5. WakaTime: You need to configure it a little bit. You can install this plugin on all the places where you have been typing code, and you can see how long you have been typing. See the website for details.

For plug-ins, it is not recommended to install too many, to meet the use, too cool but affect performance, but also recommended to disable a batch of you do not use.

2. Change the text size

There are three common places to modify, which can also be configured according to personal preferences (screenshot description) :

  • One is the appearance of the font, default some small, suggested.ApplesystemUIFont16.
  • The second is the editor font, recommendedJetBrains Meno20, line height 1.16, not conjoined;
  • Three is the console font, recommendedJetBrains Meno18, row height 1.14, compact, do not join;

3. Disable unused plug-ins

Continue With the plugins installed Tab, uncheck the boxes that you think you don’t need to remove a batch that may not be used to reduce the use of memory, I have disabled many of them, among which “Code With Me” can also be turned off, you can go to “Help -> Diagnostic Tools -> Analyze plug-in memory” to see more optimized space. Optional reference is as follows:

4. Set the default memory size to larger

  1. The current occupied memory can be seen in the bottom bar, if not, you can right-click the bottom bar and choose to open, you can also turn off some unused state display.
  2. Go to the top menu bar and go to “Help -> Change Memory Settings” (2). If the M1 is awesome, you can still do it and update the others to 4096 (3).

Remember and set the common shortcut keys

It is recommended to start from here and open the local front-end project with Git publishing record to test, so as to get familiar with it. It is recommended to select “display F1, F2 and other keys on Touch Bar” in “Settings -> Keyboard Mapping”. Since the normal software is buried in the menu to maximize the main editing area, so you can’t see what you want to use, remember that shortcuts can allow you to use up to 50% more power flow functions than the average user.

  1. Commonly used some easy to use shortcut keys, it is recommended to force the use of the muscle to remember:

    ## Find the replace operationShift twice // Search anywhere, Command + f // Search the current page command + shift + f // global search field command + r // replace the current document command + shift + r // global replacement field
## View displayDiff command + 9 // Show the current history of all commit records command + 7 // show the structure of the current file, Especially handy when looking at classes. Command + up arrow // Go to the navigation bar
## Code operationShift + f6 // rename files, tags, and variables f2, shift + f2 // Switch to the next highlight error position shift + enter // whatever the position is, Command + click // jump to the code call location command + delete // delete the current line, Command + x can also be command + d // copy a new line of the same code command + w // close the current file TAB command + // comment line of code command + b // jump to variable declaration command Command + shift + [] // switch tabs quickly, Very useful command + shift + U // Case autotransfer command + shift +/ / comment block code command + shift + +/- // expand/collapse the currently selected block of code command + shift + V // Select paste from the clipboard
## git operationCommand + d // Select the two files to compare, Act as a folder diff toolCopy the code

  2. Go to “Keyboard Mapping in Settings,” use the action text “Search,” and set up a few useful custom shortcuts, which I like to use vertically aligned on the leftcontrol+shift, you can also set your own handy:

    • Open recentlySet as the:control+shift+rOr better yetcommand+e, and recent allows you to quickly open a historically developed project
    • Open..Set as the:control+shift+o, open is used to open a new project, more latercommand+eQuick start
    • Close the projectSet as the:control+shift+wTo close the WebStrom window for the current project
    • terminalSet as the:control+shift+iThe itermOpen a command line window. This command is used a lot
    • annotationsSet as the:control+shift+b, blame displays development records for each line of code in the current file
    • Display historical commit recordsSet as the:control+shift+h, history displays all committed changes to the current file
    • Pull the codeSet as the:control+shift+pPull the latest Git code for the current branch
    • Compare to branchSet as the:control+shift+d, diff can compare the current file/folder (select the file tree on the left) to the historical branch, which is an excellent tool for troubleshooting online problems
    • Switching demo modeSet as the:command+option+control+v, view is especially good for code demonstrations and sharing with others
    • Change the DND modeSet as the:command+option+control+mMute Is especially good when you want to type code in silence

  3. If you are not used to using shortcut keys at first, you can use them in the top menu bar, in the editor, in the bottom status bar, and in the left navigation file treeRight clickWe can find a lot of new toys through Key Promoter X to facilitate memory

6. Advanced Settings that you may not need

If the Settings don’t work normally, but after Webstorm comes with NPM I, especially if the node_modules index is not responsive due to too many changes (good computers don’t), you can try the advanced Settings that I have been debugging many times.

From the top menu, go to “Help -> Edit Custom Properties”, open the idea.properties file and edit as follows:

idea.cycle.buffer.size=4096
idea.max.intellisense.filesize=50
Copy the code

Continue to open the webstorm.vmoptions file by going to Help > Edit Custom VM Options 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
Copy the code

Finally, go to the top menu bar and find “File -> Clear Cache..” After restarting WebStrom, try NPM I to install a large number of dependencies, which should not be stuck.

Once you’ve done that, it’s recommended to log in to the status bar in the lower right corner and sync your account to prevent Settings from getting lost. After a while, you’ll see WebStorm start to smell better.

3. Where is the aroma of WebStorm?

Git is the best management tool in the world

  1. To see who put the blame on this line of code: control+ Shift + B, or right click “Use Git blame” on the number of lines of code to create this effect, and click on the name to see a detailed account of the time it was submitted.

  2. CR code changes before submission: It is highly recommended to keep this habit, and make a comparison and change before each submission. The shortcut key is Command + 0, which is super clear and easy to find careless code. In this way, after confirming the correctness, command+k fills in the submission record and command+shift+ K submits the code. Once the commit is complete, Command +1 switches back to code development.

  3. Check all current commit records: The Control + Shift + H shortcut key allows you to check all commit history records. If you want to check a file or folder, select the shortcut key and go to “Show History” in Git.

  4. To view the current branch and trunk changes: This is where I find the most useful, also known as the “lifesaver”. For example, if there is a problem online, it is useful to compare all the code changes from the online version to the previous version, or if you need to merge the master with the final CR. The shortcut key is Control + Shift + D. Or right click on the corresponding master folder and go to “Compare to branches” in Git to see the following effect, and press F7 to see the next change point.



    I’ve tried some well-known Git management tools like Tower, Sourcetree, Sublime Merge, Fork, and so on

2. Safe refactoring & code optimization

  1. Renaming files and variables will help you change all calls: shift+ F6 is the shortcut key, or you can right-click on files or variables and find refactoring, and everything will be changed automatically.

  2. After the file changes the location, it also automatically changes the reference at the call.

  3. Before deleting a file, the call will be checked to see if it is clean: try using command+delete on a file and it will tell you where it is still in use.

  4. Misspellings, grammatical errors, and inelegant code will be notified: Option + carriage return can be used to fix the misspellings as suggested. Sometimes the misspellings may be a word, which can be stored in the WebStorm dictionary.

  5. To distil a piece of code into a method: Find a piece of code that can be distil into a method, select it, and then command+ Option + M abstracts the method and names it intelligently for you.

  6. “Prettier” can be used as the default format: this function can better maintain the same code format as other colleagues in VSCode development scenarios, see the setting demo.

  7. Shows you what code can be optimized: In particular, the tip finder for repetitive code is great. Here at @NASA FR, there is code to optimize.

3. Smart tips are really strong

  1. Display current package information: You can place the mouse over the corresponding imported package for a moment and display the README for that package, saving you the time to see how to use it:

  2. Machine learning to prompt code: while writing code, WebStorm 2021 currently supports machine learning of everyone’s code habits to optimize code hints and support concise code hints (VSCode sometimes has a lot of unnecessary hints). You’ll see that over time.

Code With Me enables you to debug other people’s codes in real time

  1. Remember when you were trying to troubleshoot code problems with your classmates, especially when you were not sitting together, you had to ask them to add code permissions first, then clone the code, cut the branch, NPM I, and then tell you where the code might be wrong, which wasted a lot of time.

  2. Sometimes I can use a Mac remote control, but the experience here is not good, a lot of times it is slow frame drop reaction, the feeling of hard to move, let alone to debug the code.

  3. With this Code With Me, if you share a URL With them, they will automatically synchronize their Code, including their installed dependencies, to your WebStorm, and when you modify it locally, they will also change it. Even more trendy, you and Your friend can chat via video conferencing, using an almost native experience. You can learn more via the official video.

    On the left is the local WebStorm, and on the right is the helper’s Code With Me, which is analogous to the synergistic effect of two computers

5. It’s also a surprise

  1. To give you a clear node_modules: Probably a lot of VSCode users are confused, my node_modules can’t find anything at all, but WebStorm is clear:



    WebStorm on the left, VSCode on the right (although this can be solved by the Node Modules Context Menu plugin)

  2. Unique presentation mode and focus mode, can be opened through the custom shortcut key Command + Option + Control + V, or in the “view -> appearance -> enter the presentation mode” to find (can go to the Settings -> appearance -> the bottom of the presentation mode font set to 28), save the demo code below the embarrassment of not clear; Use the custom shortcut key Command + Option + Control + V to enter the DND mode, you can also “View -> Appearance -> enter the focus mode” carefully typed code, is also very clear.



    First in demo mode, second in DND mode

Back to the beginning, improving operation efficiency does not care which tool you use, but which tool you are skilled, at the same time, I suggest that people for their commonly used software, slowly let yourself get used to using shortcut keys, and gradually out of the mouse, there will be interesting things happen.