preface

Among the IDE tools used by front-end development students, there are two absolutely dominant ones: WebStorm and VSCode. These are the two main tools we recommend for beginners to get started, but this article is for Amway WebStorm, limitations are inevitable, please judge for yourself. Webstorm was developed by Jetbrains, a company founded in Prague, Czech republic, in 2000. The company is best known for IntelliJ IDEA, the world’s first Java IDE. Of course, the first IDE in the universe is who do not need me to say.









I means to wait for a Microsoft acquisition of JetBrains



Then Bytedance bought Microsoft

Functional comparison

Out of the box!

Webstorm VSCode
Code review Reliable, intelligent, developed its own Linter that can detect unused selectors, redundant logic, unprocessed promises, etc., and even teach you language Mainly rely on ESLint infinite possibilities (meaning not yet)
Version control Best git client to date A little better than the command line, a little better with plug-ins installed
Integrated version control Git reset — Hard result with Stash (Shelve) Install the plug-in
Code refactoring Rename variables in code and comments safely removed Install the plug-in
The plug-in Profit driven development, high quality official plug-ins Open source car!
The price Enterprises have purchased/previewed the version for free Nothing!
Development efficiency Slow start, fast development Start fast; It’s not fast to install a bunch of plug-ins

Code review

JetBrains made a set of Linter in the long-term development process, which I personally think is very useful. For example, it can check for unused variables in your code, which is supported by ESLint, but it can also check for unused selectors, redundant logic, and unused files or folders. For redundant logic, it mainly means redundant logic such as if (foo) return true else return false. WebStorm will tell you that if statement can be simplify, Add Redundant else statement because you already returned the Redundant else statement. The unprocessed Promise is that it will remind you if you forgot to await it. It also checks regular expressions. Like you to write a regular expression/(\ d |.) /, it will prompt you to change it to /[\d.]/. For VSCode, Linter capabilities are completely dependent on ESLint, and it can do what ESLint can do. From this point of view VSCode is an IDE with unlimited possibilities and unlimited future.

Version control











Integrated version control

WebStorm comes with a feature called LocalHistory. It basically looks like this.









Code refactoring

You won’t find Delete or Rename in the Primary file menu of WebStorm, they are grouped into the secondary menu called Refactor.









conclusion

So we can see that WebStorm hardly needs its own plugins, right out of the box. Of course, this doesn’t mean WebStorm doesn’t need plugins. WebStorm comes with over 50 plugins installed, including git support, Markdown support, and other basic things. The stability of these plugins is driven by the license money, whereas VSCode plugins are basically community plugins. Now that we’ve said so much, maybe some VSCode users will say, start VSCode once, a few seconds later, start WebStorm once, a minute later. If you install VSCode up to WebStorm level, it will take a few minutes to start VSCode.

So, when do you choose VSCode?

Here are a few lessons I’ve learned.

  • When all you need is a nodepad.exe
  • When you don’t have any money. Alas, I have been out of WebStorm subscription for 6 months.
  • When you think that 3 billion devices running Java are stupid and Java is some kind of virus


  • When you want to write a plug-in for your resume. Since WebStorm is Java and VSCode is Electron, it is of course easier for front-end programmers to develop VSCode plug-ins.
  • When you really need to develop remotely. I have to say that VSCode’s remote development is one of the features, including I’m dead 2 remote development experience is very good, in contrast, WebStorm does not recommend remote development because it does real-time code analysis and other things that require very high disk I/O performance. If you must develop remotely, you can use the Deployment plug-in for WebStorm to automatically upload the changes to SFTP and compile them remotely.
  • Or maybe you’re a loyal Vim user who likes to fiddle with the IDE. You will indeed have fun selecting plug-ins, in which case I suggest you use ArchLinux, you will be even happier.



    As a quick runaround, ArchLinux is a very modular operating system. Once you install it, you’ll find that you don’t even have a shell, just a package manager and a wired network driver, and then you can install it as you like, and then you can update and suspend it every day. Yeah, ArchLinux has only one release channel and does not provide version rollback options. By contrast, rolling updates every day rolling fried second, Windows, or can uninstall patches alone.

Start using WebStorm

  • Search everywhere: Shift Shift
  • Switch to the Files panel: Alt + 1
    • Quite a few multifunction panels can be opened by Alt + number.
    • Change Terminal to your favorite Shell
  • Back up your Settings
    • Sync to JetBrains account
    • Export it as a configuration file
  • Remote development
    • Since WebStorm analyzes code intensively, we don’t recommend remote development using magic like remote file systems. If you really need it, you can use Tools > Deployment for automatic product upload.
    • It is also for this reason that WebStorm automatically suggests that you add it to the exclusion list of anti-virus software to improve performance
  • The editor comes with shortcuts
    • Alt + Enter Indicates the repair suggestion
    • Ctrl + D makes the code double
    • Alt + Shift + drag to create a row of cursors
    • Alt + Shift + ArrowKeys move code

My shortcut key scheme

Not for everyone.

  • Move cursor to leftCtrl + Left
    • Move left to the next wordLeft
    • Move the cursor left and selectCtrl + Shift + Left
    • Move the cursor left to the next word and selectShift + Left
  • Same thing if WE move to the right.
  • Close the windowCtrl + W
    • Extension districtCtrl + Alt + WThis is a feature I rarely use
  • Switching windowCtrl + number key.Alt + arrow key
  • Move the windowAlt + .
  • Vertical split windowAlt + \.Alt + F24
  • Toggle between split WindowsAlt + [.Alt + ]
  • Refactor the codeAlt + ;.Alt + F24
  • Refactoring code using ESLintAlt + '

My plug-in scheme

WebStorm really doesn’t need a lot of plugins. I only installed 5 plugins, 3 of which were theme and appearance plugins.

  • Nyan Progress Bar


  • Rainbow Brackets


  • GitToolBox
    • Automatic Fetch, Inline Blame, Git state
  • Git Branch Cleaner
    • Automatically deletes fully merged branches that do not have Tracking Branch