WebStorm the use of techniques

The contents of this article is to give us on how to use WebStorm collection (graphics), there is some reference value, a friend in need can refer to, I hope for your help.

19115310_8979b2ff23.png

1. Picture width and height prompt.

19115351_8113361c29.jpeg

Usually when you write HTML, I encountered img tag, is not to spend a great difficulty to know the width and height of the picture? WS directly show it to you.

2. Label reconstruction, rename the file, CSS and JS reconstruction reconstruction

2.1 Label reconstruction

If you want to 19115441_e51f86190c.pngread 19115511_5ac1fcd0ac.pnghow to do? In WS, you simply move the cursor

or

After pressing the shortcut keys allow reconstruction can easily turn it into a p tag.


2.2 File Rename

Style1.css you want to rename style2.css, but style1.css was a lot of html file references, how to do?
Using WS file renaming function, boldly rename it, it will automatically help you update all references. (Provided that your references are correct and in line with conventional)

2.3 CSS reconstruction

Also, if you want to move the inline style external CSS files, but also by reconstructing functions implemented. While you will not write the inline style in HTML in a production environment, but we are debugging for convenience, often we do so. So you finished debugging, will naturally use this feature.19115549_d21e3f01f5.jpeg

JS reconstruction also good to use. Including variables renaming, declarations upgrade so much more. WS I used to support the reconstruction of JS best IDE. Can you tell me what IDE support for the reconstruction of JS Yes, I went to relatively lower.

3. Support for the industry's latest technology

你安装 WS 后,你会发现它内置了对 SASS、NodeJS、CoffeeScript、Jade 的支持。
连 Emmet 都内置了,而且快捷键还是 Tab,太方便了。没有这个功能我都不想写 HTML 了。
如果它发现你的文件后缀是 .less/.scss/.sass 或者 .coffee,就会问你,是否需要把它们自动编译为 css 或 js。
如果它发现你有 NPM,会自动列出你安装过的 package,方便管理和升级。(这个貌似需要装 NodeJS 支持插件,我记不清是不是自带功能了。)

4. 可自定义代码格式化规则

虽然很多 IDE 都有格式化功能,但能自定义到 WS 这种程度的还没见过。

是否保留单行的 { }。

是否保留单行的function。

属性是否要对其。

冒号前后是否加空格。

……

5. 设置项是可搜索的(英文)

「这个 IDE 有这么多设置项,我要折腾好久啊!」
WS 考虑到了这一点,所以他的所有设置都是可搜索的,不会让你漫无目的地摸索,你想设置什么就搜什么。
想设置外观,就搜 appearance;
想设置快捷键,就搜 keymap;
想设置插件就搜 plugin。
当你进入 keymap,你还可以进行二级搜索,比如你想知道 format 功能的快捷键,就直接搜 format。
你甚至可以反过来,搜 Ctrl + L 这个快捷键对应的功能是什么。
P.S. WS 的快捷键是支持二次按键的。比如我把 Git add 的快捷键设置为 Alt+G & Alt + A,把 Git commit 设置为 Alt+G & Alt+C。这样的好处是不会让你无快捷键可设。

6. 再说说其他 IDE 也有的功能吧

6.1. Local version control. All of you are editing a local presence in WS, you can always revert to the version history.

19115709_205a783475.jpeg

But pay attention to the history of these are likely to be cleared.

6.2 can be combined with the Pomodoro Technique. There is a plug-in called Pomodoro-tm, there should be a lot of programmers like.

6.3 can be integrated with Redmine / Trello / Jira and so on.



Guess you like

Origin blog.51cto.com/14370425/2431121
Recommended