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 left
Ctrl + Left
- Move left to the next word
Left
- Move the cursor left and select
Ctrl + Shift + Left
- Move the cursor left to the next word and select
Shift + Left
- Move left to the next word
- Same thing if WE move to the right.
- Close the window
Ctrl + W
- Extension district
Ctrl + Alt + W
This is a feature I rarely use
- Extension district
- Switching window
Ctrl + number key
.Alt + arrow key
- Move the window
Alt + .
- Vertical split window
Alt + \
.Alt + F24
- Toggle between split Windows
Alt + [
.Alt + ]
- Refactor the code
Alt + ;
.Alt + F24
- Refactoring code using ESLint
Alt + '
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