preface

Recently, I found that my colleagues and friends use VsCode a lot. I also know why Webstorm is so good and some people will use Vscode research. There are several reasons why people don’t like WebStorm:

  • Collect money
  • Many functions, miscellaneous
  • heavy

I have encountered these problems myself when using WebStorm, and have come up with some solutions, which I will share with you today.

How do I get Jetbrains

First of all, or taobao dafa, down to a few dollars, to a dozen dollars. Either use the registration machine to generate a registration code or use your student account to apply for a license for you.

Personally, I don’t recommend this way, one is the experience will not be very good, and the other is that everyone is doing development, or a little awareness of intellectual property rights will be better.

Another method is to rely on the company, if the company buys, will generally generate the license service on its own server, ask the company for a license server address, fill in can. Like this:

If you are a student, you can use your student account toThe official hereThe license is valid for one year.

You don’t think a year is very short, how many programmers have a year? After 5 years, it may no longer be a front-line soldier, but the most used software may be Power Point. A year is enough time to get started on one or two techniques and make a project. Come on!

The last and most recommended way is to apply with your own Github projectHere,. Fill in the project information and personal information is OK. Note: There must be a 3 month submission record.

For the above two methods of application, you will receive an email response within 1 to 2 weeks.

My personal recommendation is to create a repository of blogs on Github and commit to it every time you write a post. There are several benefits: one is to force yourself to write more articles, the other is to earn a green dot on Github, and the last is to keep the project active and apply for a Jetbrains license.

I have one myself:

Theme & Font

The theme and font are probably the ones you’re most interested in, but we’re going to force the Material UI’s Darker theme and Atom Material Icons.

First, command +, open the Settings, find the Plugins, and install the Material UI and Atom Material Icons.

Then go to Tools -> Material Themes -> Material Themes Choosers to choose your favorite theme. Darker themes are recommended for personal comparison.

interface

Let’s first take a look at what WebStorm’s interface layout is all about. Let’s start with this one:

This one on the left, this code navigation bar, it’s not very useful

The right-hand side is mostly used for running, debug, commit, and very little else

One of the best features is Search Every. The shortcut is to double click shift: Shift-shift, which is the Mac OS’s Spot Light feature. Files, functions, variables, and operations can be found as long as they are defined.

So many shortcut keys, as long as remember this shortcut key can be a shuttle.

For example, if I want to commit the code, but I can’t find the button, I can search for Git commit. The second action below is commit.

On the left, we have the familiar file tree.

I don’t know why Jetbrains doesn’t automatically locate the file that is currently open. For example, if you open file A, but file B is highlighted in the tree, you need to click on the blob to locate the current file.

Pull Requests can be connected to the PR feature on Github, but if you’re writing corporate and personal projects, this feature isn’t useful for you. Structure and Favorites are used very little, so I won’t go into that.

The following interface features more features, and more Git operations, the rest of the look at what is going on. For example, TODO detects //TODO ina project, Problems detects TSLint or ESLint errors ina project, and Terminal is the Terminal.

Git

Git operation is a heavyweight feature in Jetbrains and almost kills any Git client on the market. Open Git below to see the panel.

In the middle is the history of Git, and on the right you can see the contents of the corresponding modified files.

For branch management, click on main (my current branch) in the lower right corner:

Each branch has its own push, update(pull), diff, rename, and checkout operations.

When you want to commit, you can use command + k to commit:

Just focus on the diff changes in green, the commit message in red, and the pre-commit actions on the right. Generally speaking, the most popular ones are Amend Commit, Analyze Code, Check TODO and Optimize imports.

Push can use Command + shift + K to push the code.

Of course, Jetbrains won’t let you push to the far end right away. You can choose which remote branch you want to push to. The default is the remote with the same name. You can also rename it or push to another remote branch. Of course, this feature should be used by few people.

Before push, you need to select which repository to push to. The default is Origin. If you have two repositories to maintain, click Origin and click Define Remote to set up another remote repository. I don’t use it very often, I’ve only used it once or twice, but it’s really cool.

Local History

In addition to Git looking up changes to files, Jetbrains also has a Local History feature that keeps track of changes to your files.

Although it looks like Git History, this is actually a local cached record maintained by Jetbrains itself, which has nothing to do with Git, and can sometimes be a life-saver.

refactoring

Refactoring is simple, in terms of title alone, because Jetbrains’ file dependencies and indexing are so good.

As long as you use the Refactor function, take off directly from Wuhu, who uses who knows. The two functions I often use are Rename and Move File.

Another common function, for example, if you define A variable foo in file A and want to Move it to file B, you can select that variable, right-click Refactor, and Move to another file.

All imports are updated together.

At first, I was afraid to use this feature because I was always afraid that something might not be fixed for me. But after using it for a while, it smells good, and let’s just say it’s a lot easier to rename with Jetbrains than it is to rename myself.

Run & Debug

In principle, there would be no run button on the front end, as we would normally run it at NPM run dev on the command line. Like VsCode, WebStorm provides a run button in package.json:

It runs with a single click and generates a running configuration file.

Select a different run profile and click the Run button to run. What the hell, you might say? This works great when you are running test cases: click on the run button of the test case to get a configuration file.

This configuration file can be filled with parameters and Settings such as –watch, or env=test.

WebStorm also has a powerful debug system.

I believe this row of buttons is familiar to all of you. They are step over, step into, Force step into, and step out

On the far right is Evaluate Expression, another amazing feature of the Jetbrains family that allows you to perform some simple calculations right now:

You can also set conditional breakpoints at breakpoints, which are commonly used in for loops and if statements

Stop at I === 5:

The new Version of WebStorm will also have straight test coverage.

On the right panel, you can see the file test coverage of the current directory for the entire project, and even Istanbul is in tears.

Docker

To use Docker in Webstorm, double-click Shift and enter “services” to bring up the “Services” panel. Select “Docker Connection” and click “OK” to connect to your local Docker.

MySQL iAMge has a problem on M1 computer

Create the container.

Mirror and container are clear.

The database

There are many database clients out there, such as Mysql Workbench, Navigator, etc. Jetbrains still provides its own database client plug-in.

Note: It is better to install The Database Tools and SQL for Webstorm. The Database Navigator is available in the Beggar version (free).

Once installed, open the database on the right and create a connection.

Set Host, port, account, and password.

Add a table at will.

Operating databases has never been so silky.

The most Amazing is that the code can directly and database linkage, I TMD direct absolutely.

More and more

Having said all this, I just said some simple functions of WebStorm, and more fun gameplay is waiting for you to explore. For example, recently found the Jetbrains chat room.

I feel like the time is near when you can code and be a host.

VsCode vs WebStorm

Finally, let me tell you my opinion about VsCode and WebStorm, which is purely subjective. I gave up VsCode in 2018. The trigger was that there was a conflict between two plug-ins. After watching many issues, I abandoned VsCode directly.

I used to want to use a simple editor configured to look like an IDE, give me what I develop what, plug-ins a load. Later, I was tired and felt the time was not worth it.

Also, I came to think that when you start to develop a real product, development is a very serious matter. You have to keep the knife sharp. You can’t just sharpen the knife or compare which one is better while I’m cooking.

I can also say some other bad points of VsCode, and THIS is I think VsCode is difficult to correct some of the points, I hope you rational view:

There are too many plug-ins. More means comparison, so spend a lot of time looking at the README to figure out which plug-ins offer which features and whether they are appropriate for you or not.

The plug-in is free. Free means quality is not guaranteed, it looks like free, but it’s a waste of time comparing plugins, rummaging through features, and resolving plugin conflicts.

Too many repetitive wheels, too many small groups trying to get a piece of the plugin market. So there are a lot of similar plugins. For example, if you search for less, you will see: Sass/Less/Typescript/Jade/Compile relation – Superhero, Beautify the CSS/Sass/SCSS/lessmichelemelluso code – beautifier, Easy Less, Less intellsense. Which one should I choose? Both big and complete, but also small and beautiful. They all look good on their own, but when they’re put together, they can’t help but conflict and redundancy.

Overall, the VsCode plug-in ecosystem is thriving, but it’s a double-edged sword. If you are the master of VsCode and have all kinds of plugins (like the Vim masters of the past), then I have to call you big brother. If you can’t play 6, try WebStorm.