原本想等我们的前端大神F来编辑发布这个IDE的。奈何大神至今还在忙活,只有本尊先来操刀了,后面F有空再来补充完善吧!

WebStorm 是 Jetbrains 公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与 IntelliJ IDEA 同源,继承了IntelliJ IDEA 强大的 JS 部分的功能。

下面引用知乎答主方应杭对WebStorm的一些功能介绍,希望对大家有所帮助。

对过眼神,有TA就够了
——某前端攻城狮如是说

WebStorm 为前端而生,专门为 JS 开发做了很多优化,有许多令前端工程师眼前一亮的地方,我十分喜欢这款 IDE。下面讲下我觉得非常有用的几个功能(绝大部分是官方发行版本自带的功能)。

1. 图片宽高提示。

<img src=”https://pic4.zhimg.com/8345475b687c83a71e0564419b0ac733_b.jpg” data-rawwidth=”635″ data-rawheight=”141″ class=”origin_image zh-lightbox-thumb” width=”635″ data-original=”https://pic4.zhimg.com/8345475b687c83a71e0564419b0ac733_r.jpg”>

平时你在写 HTML 时,遇到 img 标签时,是不是要费好大劲去知道图片的宽高?WS 直接展示给你了。
2. 标签重构、文件重命名、 CSS 重构以及 JS 重构

2.1 标签重构
如果你想把

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

改为

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

要怎么办?在 WS 里,你只需将光标移到 <div> 或者 </div>,让后按重构的快捷键就可以轻松地把它变为 p 标签。

2.2 文件重命名
你想把 style1.css 重命名为 style2.css,但是 style1.css 被很多 html 文件引用了,怎么办?
使用 WS 的文件重命名功能,大胆地重命名吧,它会自动帮你更新所有引用。(前提是你的引用是正确且符合常规的)

2.3 CSS 重构
另外,如果你想把内联的 style 移到外部 CSS 文件里,也是可是通过重构功能实现的。虽然在生产环境下你不会在 HTML 里写内联 style 的,但我们调试时为了方便,会经常这么做。等你调试完了,自然会用到这个功能。

&amp;amp;amp;lt;img src=”https://pic4.zhimg.com/91b67865b3314f4b5c135204b0dd923f_b.jpg” data-rawwidth=”427″ data-rawheight=”366″ class=”origin_image zh-lightbox-thumb” width=”427″ data-original=”https://pic4.zhimg.com/91b67865b3314f4b5c135204b0dd923f_r.jpg”&amp;amp;amp;gt;

(WS 8.0 以更新此功能,详见评论)
JS 重构也很好用。包括变量重命名、声明提升等等等等。WS 是我用过的对 JS 重构支持最好的 IDE。你可以告诉我还有什么 IDE 对 JS 重构支持不错,我去比较下。
3. 对业界最新技术的支持
你安装 WS 后,你会发现它内置了对 SASS、NodeJS、CoffeeScript、Jade 的支持。
连 Emmet 都内置了,而且快捷键还是 Tab,太方便了。没有这个功能我都不想写 HTML 了。
如果它发现你的文件后缀是 .less/.scss/.sass 或者 .coffee,就会问你,是否需要把它们自动编译为 css 或 js。
如果它发现你有 NPM,会自动列出你安装过的 package,方便管理和升级。(这个貌似需要装 NodeJS 支持插件,我记不清是不是自带功能了。)

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

  • 是否保留单行的 { }。
  • 是否保留单行的function。
  • 属性是否要对其。
  • 冒号前后是否加空格。
  • ……
&amp;amp;amp;lt;img src=”https://pic2.zhimg.com/6d1f1bfa75bb9080e2f9ad345ed5f87d_b.jpg” data-rawwidth=”1247″ data-rawheight=”811″ class=”origin_image zh-lightbox-thumb” width=”1247″ data-original=”https://pic2.zhimg.com/6d1f1bfa75bb9080e2f9ad345ed5f87d_r.jpg”&amp;amp;amp;gt;

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. 本地版本控制。你在 WS 里所有的编辑都被存在本地了,你随时可以还原到历史版本。

&amp;amp;amp;lt;img src=”https://pic2.zhimg.com/679f2c4dcbed3eb1657af15d34573871_b.jpg” data-rawwidth=”207″ data-rawheight=”348″ class=”content_image” width=”207″&amp;amp;amp;gt;

不过要注意这些历史有可能被清除。
6.2. 能与番茄工作法结合。有个插件叫 Pomodoro-tm,应该有不少程序员喜欢。
6.3. 能与 Redmine / Trello / Jira 等集成。

&amp;amp;amp;lt;img src=”https://pic3.zhimg.com/f9c8c66f406a7b5c1971a0e79caac906_b.jpg” data-rawwidth=”121″ data-rawheight=”361″ class=”content_image” width=”121″&amp;amp;amp;gt;

6.4 文件结构分析。直接看图。
JS 文件结构

&amp;amp;amp;lt;img src=”https://pic1.zhimg.com/333420c2a952c5472b617799e5e933cc_b.jpg” data-rawwidth=”292″ data-rawheight=”298″ class=”content_image” width=”292″&amp;amp;amp;gt;

HTML 文件结构

&amp;amp;amp;lt;img src=”https://pic1.zhimg.com/f49156d43dce9b0a42cad7627622abdc_b.jpg” data-rawwidth=”290″ data-rawheight=”333″ class=”content_image” width=”290″&amp;amp;amp;gt;

这个功能对于大文件特别有用。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源