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.
Open the webstore settings dialog box, find the live edit option, and select enable live editing.
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 )
Create a new HTML file in webstorm, then right-click in the page and select debug option.
At this point, webstorm will start the default browser and activate itJBBrowser plug-in.
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:
As shown in the figure, we can start the built-in server in three ways or through shortcut keys. This will open in the browser
http://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:
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:
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,
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:
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 order
File→setting→language and frameworks->Node.js and NPM!
Where the second arrow points, i.e
sources 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,
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.e
sources 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.
When you are ready, repeat the first and second steps. Click the button indicated by the arrow in the figure.
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.
After using and saving the changed configuration, if not unexpected, in the
External LibrariesThe library we just added will appear.
At this time, the intelligent prompt can be used.
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 press
CTRL+DShortcut, and the diff tool of webstorm is called.
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:
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.
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 button
Test 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.