Collection of WebStorm usage methods (pictures and texts)

This article brings you a collection of WebStorm usage methods (pictures and texts), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Picture width and height tips.

When you usually write HTML, when you encounter the img tag, do you have to spend a lot of effort to know the width and height of the image? WS is shown to you directly.

2. Tag Refactoring, File Renaming, CSS Refactoring and JS Refactoring

2.1 Tag Refactoring

If you What should I do if I want to change

<p>此处省略200行</p>

to

<p>此处省略200行</p>

? In WS, you only need to move the cursor to

or

and then press the reconstructed shortcut key to easily change it into a p tag.

2.2 File Renaming

You want to rename style1.css to style2.css, but style1.css is referenced by many html files, what should you do?
Use the file renaming function of WS and rename it boldly. It will automatically update all references for you. (provided that your references are correct and conform to the convention)

2.3 CSS Refactoring

In addition, if you want to move the inline style to an external CSS file, that is also But this is achieved through the reconstruction function. Although you would not write inline styles in HTML in a production environment, we often do this for convenience during debugging. After you finish debugging, you will naturally use this function.

(WS 8.0 to update this feature, see comments for details)
JS refactoring works great too. Including variable renaming, declaration promotion, etc. WS is the best IDE for JS refactoring I have ever used. Can you tell me which other IDE has good support for JS refactoring, and I will compare them.

3. Support for the latest technology in the industry

After you install WS, you will find that it has built-in support for SASS, NodeJS, CoffeeScript, Support from Jade.
Even Emmet is built-in, and the shortcut key is Tab, which is so convenient. Without this feature, I wouldn’t even want to write HTML.
If it finds that your file suffix is ​​.less/.scss/.sass or .coffee, it will ask you whether you need to automatically compile them into css or js.
If it finds that you have NPM, it will automatically list your installed packages to facilitate management and upgrades. (This seems to require installing the NodeJS support plug-in. I can’t remember if it comes with its own function.)

4. Customizable code formatting rules

Although many IDEs have formatting functions, I have never seen one that can be customized to the extent of WS.

Whether to retain single-line { }.

Whether to retain single-line functions.

Whether the attributes should be aligned.

Whether to add spaces before and after the colon.

……

##5. Setting items are searchable ( English)

"This IDE has so many settings, I have to fiddle with them for a long time!"

WS took this into consideration, so all his settings are searchable. It won't let you explore aimlessly, you can search for whatever you want to set up.
If you want to set the appearance, search for appearance;
If you want to set the shortcut key, search for keymap;
If you want to set the plug-in, search for plugin.
When you enter the keymap, you can also perform a secondary search. For example, if you want to know the shortcut key for the format function, just search for format directly.
You can even go the other way and search for the function corresponding to the Ctrl L shortcut key.
P.S. The shortcut keys of WS support double key presses. For example, I set the Git add shortcut key to Alt G & Alt A, and set the Git commit shortcut key to Alt G & Alt C. The advantage of this is that you won't have no shortcut keys to set.

6. Let’s talk about the functions that other IDEs also have

6.1. Local version control. All your edits in WS are stored locally, and you can restore to the historical version at any time.

But please note that these histories may be cleared.

6.2. Can be combined with the Pomodoro Technique. There is a plug-in called ​ Pomodoro-tm should be liked by many programmers.

6.3. Can be integrated with Redmine / Trello / Jira, etc.

6.4 File structure analysis. Just look at the picture.

JS file structure

##HTML file structure

##This function is suitable for large files Especially useful. There are too many good functions, and I will introduce them again when I have the opportunity.

The above is the detailed content of Collection of WebStorm usage methods (pictures and texts). For more information, please follow other related articles on the PHP Chinese website!