• 前端开发利器webStorm


      这里推荐一个前端开发工具webStorm。用了大概快半年了,发现所有其他工具无出其右的。目前最新版本已经到4.0.2,半年前还是2.X

      相比aptana、dreamweaver、sublime和vim等我曾用过的,高端开发工具还是用这个顺手、智能。

      

      1、切身感受到的好处:

        1)灵活的默认快捷键。起初他的默认快捷键和常用的不太一样,感觉不适应(当然在setting->keymap中可以切换你常用编辑器的快捷键,如eclipse、vim、Mac OS等),但是用惯了发现设计的合理性,如撤销和前进,常用的编辑器都是ctrl+z和ctrl+y,而webstorm为ctrl+z和ctrl+shift+z。ctrl+shift+i查看函数定义信息、ctrl+alt+l格式化代码等等非常方便。

        2)更加智能的提示,区分浏览器内核,并智能加载自己写的类库;错误提示,如图html中图片路径写错,会智能红色智能提示;颜色试着在行数位置预览颜色并且能修改。等等,总之让前端开发从未这样智能过。

        3)不需要保存,当文件关闭后,再打开撤销和前进均不丢失。此处真的很好用。而以往的编辑器都是需要保存文件,并且关闭,再打开撤销和前进清空。

          4)丰富的插件。编辑器的强大之处就是插件的丰富和有序管理,webStorm做的不错。打开File->Settings...->Plugins中有丰富的常用捆绑在webStorm中的插件,还有很多外部custom插件,点击Browser repositiories...中寻找你想要的插件。不过没有找到类似ant这样的自动化脚本插件,有些遗憾。

    几个小技巧:a)ctrl+shift+i可以看到函数定义信息、F4为跳转到方法定义处,shift+F6局部变量统一改名等等方便的快捷键;

          b)如果某些脚本不想加入智能提示里面来。可在js文件上右键->Mark as Plain Text

          c)选中一个局部变量,然后shift+F6可在局部内部同意改名,当然此功能慎用,还是有一定风险性,在eclipse中写java此功能尚且不完善,此处更改局部变量可以用用。

        

      2、由于webStrom可以自己修改代码显示样式,并且可以导入导出,这里推荐这个风格,我觉得很舒服:http://www.cnblogs.com/jikey/archive/2010/12/30/1921530.html 

      由于上边文章设置在字体大小、代码颜色颜色、js注释风格不太符合我的风格,这里我做了小量调整:请点击这里下载

      怎样使用和编辑此风格:

        1)然后放入如下路径:

          XP:C:\Documents and Settings\Administrator\.WebIde40\config\colors

          win7: C:\Users\用户\(用户名)\.WebIde40\config\colors

        2)重启webStorm,打开  ->Settings...-> Editor->Colors & Fonts->Scheme name选中custom1

          3)如果想编辑,在Colors & Fonts子目录中进行个性化代码风格编辑,编辑完毕即可:

                             

          我当前的风格如下:

       

     

      3、webStorm的快捷键说明(来自于http://www.cnblogs.com/jikey):

    . ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R),目的是打开当前工程下任意目录的文件。
    . ctrl + j: 输出模板
    . ctrl + b: 跳到变量申明处
    . ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
    . ctrl + []: 匹配 {}[]
    . ctrl + F12: 可以显示当前文件的结构 
    . ctrl + x: 剪切(删除)行,不选中,直接剪切整个行,如果选中部分内容则剪切选中的内容
    . alt + left/right:标签切换
    . ctrl + r: 替换
    . ctrl + shift + up: 行移动
    . shift + alt + up: 块移动(if(){},while(){}语句块的移动)
    . ctrl + d: 行复制
    . ctrl + shift + ]/[: 选中块代码<table>....</table>
    . ctrl + / : 单行注释
    . ctrl + shift + / : 块注释
    . ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息(想象一下,如果在jquery的方法上查看详细信息,就直接可以看到实现代码了),如果是php,那当时还是function的详细信息 
    . ctrl + '-/+': 可以折叠项目中的任何代码块,包括htm中的任意nodetype=3的元素,function,或对象直接量等等。它不是选中折叠,而是自动识别折叠。
    . ctrl + '.': 折叠选中的代码的代码。
    . shift + esc: 当前激活的任意小窗口最小化,也可以是alt + '数字键',数字在小窗口标题栏上有显示。
    . alt + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下,要比aptana的给力一些,但还是不能完全显示prototype下面的方法名。
    . 如果是*.html页面,则在文件名下的导航栏某DOM结构上右键,可以全选当前DOM结构。
    . 项目中添加对jQuery的支持。File -> settings -> Javascript Libraries -> Add在files中添加路径,在documentations urls中添加文档支持。这里边需要注意一下的是,要添加原始未压缩的代码,*.min.js版的方法是不会被提示。添加完成后,右边菜单中还有一 download 按钮,单击之后,他会自动选择最新版的js库进行搜索,然后在弹出的列表中,再单击选择一个后,点击Download and Install之后,才会被下载。这块体验不是太好,没有checkbox,也没有radio,只是选中后整行变暗。 如果添加多个版本的jQuery,就可以直观的看到各个版本之间新方法的差别了。* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击,选择新添加的jQuery,使其对整个项目进行覆盖。也可以在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。  当然,并不是添加的越多越好,添加的多之后,在代码提示后会有数毫秒的延迟,需要谨慎选择最新版。

     

       ps:当然前端开发的话还是高低搭配不错,大型编辑器必然启动、快速运行稍差

          我这边一直用webStrom+editplus搭配,效率提高不少。工欲善其事,必先利其器,好的工具必然能事半功倍。

  • 相关阅读:
    【设计模式】责任者模式
    【Java工具方法】给集合按数量分组
    【Spring】非Spring IOC容器下获取Spring IOC上下文的环境
    【Java】模板方法模式
    【RabbitMQ】CentOS安装RabbitMQ,及简单的Java客户端连接
    【RabbitMQ】RabbitMQ的一些基础概念
    【Spring】简单的Spring AOP注解示例
    【Web】URI和URL,及URL的编码
    【加密】对称加密算法
    【Normal Form】数据库表结构设计所遵从的范式
  • 原文地址:https://www.cnblogs.com/withasi/p/2490015.html
Copyright © 2020-2023  润新知