Webstorm, phpstorm, idea, etc

Time:2021-5-11

summary

This article is used to record the tips of using jetbrain series tools. Unless otherwise specified, these techniques are common and cross platform in webstorm, phpstorm and idea.

Implementation steps of live edit function and browser synchronization

Live edit is a refresh free function, which can capture page changes (CSS, HTML, JS changes), and then automatically refresh the browser, which improves the efficiency of development. It’s a great feature. The only drawback is that it needs to be installedJBPlug in to the browser, for the browser can not install the plug-in, the function is chicken ribs.

  1. Open the webstore settings dialog box, find the live edit option, and select enable live editing.
    Webstorm, phpstorm, idea, etc

  2. Open Chrome browser, enter chrome online store, search JetBrains ide suport extension. Click the “add to chrome” button to install the extension to chrome. At this time, a JB icon will appear on the Chrome browser toolbar. Note (sometimes it may not be found in the online store. I have provided an address here:https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji )

  3. Create a new HTML file in webstorm, then right-click in the page and select debug option.Webstorm, phpstorm, idea, etc

  4. At this point, webstorm will start the default browser and activate itJBBrowser plug-in.Webstorm, phpstorm, idea, etc

  5. Go back to the webstorm editor, try to modify the contents of the page, and then open the browser to see if the page has automatically refreshed. If the configuration is correct, the browser will refresh as soon as the code is changed, which is the holy weapon of refactoring development.

Failure of webstorm built in server

By default, we can directly run the local HTML page, which will open port 64432 to run our page. In this way, we don’t need to configure the complicated background environment, but also can simply test some pages that need the cooperation of the server. The way to start the service is as follows:Webstorm, phpstorm, idea, etc

As shown in the figure, we can start the built-in server in three ways or through shortcut keys. This will open in the browserhttp://localhost:63342/projectName/*.htmlSuch a page. But it was configured oncesftpAs a result, the built-in service cannot be started. The reason is that webstom will publish the project as a project in SFTP. The published URL is specified by the web server root URL. As shown in the figure:
Webstorm, phpstorm, idea, etc

So every time we run the page in the project, we want to run it through the built-in server, but the connection opened in the browser is the URL specified by the red line in the figure. So we can leave it blank and tell the browser not to use itsftpInstead, use the URL generated by the built-in server( Perfect)

Nodejs is set in webstorm to prompt intelligently.

This is my question in the SF problem community, and the questions can be seenhttp://segmentfault.com/q/1010000002447282. By default. The nodejs script we wrote will not prompt intelligently, as shown in the figure:
Webstorm, phpstorm, idea, etc
In the figure is a nodejs server program. When we let the server listen to the port, the only prompts shown below are from ecmasrip. So how to turn it on?

The first step,File → setting → language and frameworks → JavaScript → libraries → check the library to be used, i.e. (node.js v0.10.24 core modules)
Webstorm, phpstorm, idea, etc
Second, edit the item you just checked. Select the item and click the Edit button on the right. The IDE will pop up a window, as shown below:
Webstorm, phpstorm, idea, etc
If the part pointed by the previous arrow already exists automatically, we don’t need to configure other options. Just exit the edit window and save the configuration. If there is no accident, the intelligent prompt can be used. What if the part pointed to by the arrow is empty? Don’t worry. Let’s just configure. Also open in the following orderFile→setting→language and frameworks->Node.js and NPM!
Picture description
Where the second arrow points, i.esources of Node.js Core ModulesThere may be two situations when pointing to. The first is as shown in the figure above, which shows that the core module has been installed. The other ishttp://segmentfault.com/q/1010000002447282The situation shown in the question,
Webstorm, phpstorm, idea, etc
If this is the case, click the configure button to download the source code. After downloading, do not make any other changes, save the configuration and exit.
If it is the first case, i.esources of Node.js Core ModulesThe following options are not empty, but the source code is not downloaded, so you have to download it manuallyNodejs source codeAfter downloading, you get an archive package. Decompress it and put it in the directory where nodejs is installed.Webstorm, phpstorm, idea, etc

When you are ready, repeat the first and second steps. Click the button indicated by the arrow in the figure.Webstorm, phpstorm, idea, etc
Because the source code of nodejs is not a single JS file. So select the attach directories option. Finally, just download the good source code to add to the directory.

Webstorm, phpstorm, idea, etc

After using and saving the changed configuration, if not unexpected, in theExternal LibrariesThe library we just added will appear.
Webstorm, phpstorm, idea, etc
At this time, the intelligent prompt can be used.Webstorm, phpstorm, idea, etc
In addition, we can also hold down the CTRL key and click the selected method to see its source code implementation. OK, to sum up, the configuration is quite troublesome. And in the future, the principle of intelligent prompt is similar to the example.

How to quickly compare the differences between two files

This is also a very common function. Sometimes if you want to compare the similarities and differences between two files, but you don’t want to use SVN or other diff tools, webstorm will come in handy. It’s also very easy to use. Select two files and pressCTRL+DShortcut, and the diff tool of webstorm is called.
Webstorm, phpstorm, idea, etc

Configuring SFTP with webstorm

Before configuring SFTP, you need to confirm that your Linux has been configured with SSH. For the configuration of SSH, please refer to my article:http://segmentfault.com/blog/liangyi/1190000002492828

If it has been installed, it can be configured directly. The configuration process is as follows:Tools->Deployment->ConfigurationAfter that, a configuration dialog box will pop up. As shown in the figure:
Webstorm, phpstorm, idea, etc
Note that SFTP must be selected instead of FTP and FTPS. It is better to select the IP address name of the corresponding server for the configuration item of name. Then there are various configurations.
Webstorm, phpstorm, idea, etc

There is one thing to pay attention to when configuring. If the web server root URL is set, it will result in the above. This causes the static server of webstorm to point to this URL address.

After filling in, click the test buttonTest SFTP connectionFor the first time, you will be asked to confirm and verify some information. If it’s not unexpected, then it can be connected correctly.

After the dynamometer test, we can import the projects on the server to the local area, so that the local area does not need to configure some complex environment, but only provides a quiet coding environment.
Webstorm, phpstorm, idea, etc

Recommended Today

Mongodb aggregate

  https://www.cnblogs.com/wt7018/p/11929359.html Mongodb aggregate   1、 Foundation 1. What is aggregation? Aggregation is an aggregation pipeline based on data processing. Each document passes through a pipeline composed of multiple stagesIt can group and filter the pipelines in each stage, and then output the corresponding results after a series of processing DB. Set name. Aggregate ({pipeline: […]