当前位置: 首页 > 常用软件 > 前端开发利器 —— WebStorm

前端开发利器 —— WebStorm

关键词:WebStorm   时间:2017-09-21      来源:VPS之家    点击:

    最近一直在自学前端开发,在把基础知识学习完之后,便想动手去写一个静态页面。前面刚开始使用的一直是dreamweaver。但在实际进行前端开发的时候觉着dreamweaver有许多不便之处(dreamweaver爱好者勿喷)。

直到一个专业做前端开发的朋友向我推荐了webstorm。瞬间便爱上了webstorm。下面给大家说一下webstorm有哪些过人之处呢

    1、图片宽高提示

    WebStorm
 
    平时在做前端开发时,一个页面中会碰见很多图片,如果我们在写img标签时能清楚的看见每个图片的宽高,岂不是太爽了?这一点Webstrom便可以实现。

    2、标签重构、文件重命名、 CSS 重构以及 JS 重构

    2.1、标签重构

    WebStorm

    如上图所示,我想把div换成p标签,这个该怎么办呢?直接使用标签重构快捷键shift+f6 并将鼠标光标移到到<div> 或者 </div> 然后再进行修改,你会惊奇的发现另一个标签也会随之而变化。可谓十分方便。

    2.2、文件重命名

    如果我们想把名为a.css的名字改成b.css 但a.css里面的样式文件被很多html文件引用了,如果要一个个改的话,是不是很麻烦呢?确实很耗费时间。这时如果使用Webstrom的文件重命名功能,改名字这件小事变得轻而易举了。Webstrom会自动帮你更新所有引用。

    2.3、CSS 重构

    WebStorm
    大家都知道css的引入方式有4种,分别是行内式、嵌入式、导入式、链接式。如果我们想把内联的 style 样式移动到外部的css文件中,我们便可以使用Webstrom的css重构功能,十分强大。

    3、Webstrom的代码定位能力,能轻松将光标定位到变量/属性/方法的定义处,对阅读代码非常有用。

    WebStorm

    4、丰富的插件资源,你可以去webstormw官网下载你需要的插件,可以满足不同开发层次人的需要。

    5、代码实时保存功能

    以前还没有进行前端开发时,看见程序猿每写一个代码都会自动的去按Ctrl+S 关于这一点我没有说这是不好的习惯,不过在使用Webstrom进行前端开发,我们便可以解放Ctrl+S了。Webstrom自带的代码实时保存可谓大块人心,不用再担心代码忘记保存了。

    6、对业界的支持

    Webstrom内置了对 SASS、NodeJS、CoffeeScript、Jade 的支持。连 Emmet 都内置了,而且快捷键还是 Tab,太方便了。如果它发现你的文件后缀是 .less/.scss/.sass 或者 .coffee,会提示你,是否需要把它们自动编译为 css 或 js。如果它发现你有 NPM,会自动列出你安装过的 package,方便管理和升级。

    7、自定义代码格式化规则

    虽然很多代码编辑器都支持自定义设置,但Webstrom无疑是其中的娇娇这,Webstrom可以定义到冒号前后是否需要加空格,太他妈强大了。

    关于Webstrom的优势还有很多,先列举以上几点。当然这些只是个人的看法,其他的编辑器sublime、hbuilder也十分好用。

本文链接:http://www.kyvps.com/ruanjian/3407.html"WebStorm"转载请注明出处。

百度新闻 百度地图 谷歌地图
Copyright© 2010-2020 VPS之家 免费VPS VPS技术 IDC服务商