目录:

前言

由于很多人现在使用的是dw工具开发前端,dw在拖拽页面时代确实是一个不可代替的编辑器,但是随着页面开发的复杂,尤其是jQuery的兴起之后,dw慢慢满足不了当下的前端开发需求,尤其是对js的支持,一直停滞不前,所以今天有必要为大家介绍两款新式的编辑器。
另外编辑器没有最好的,只有最合适的,只有在合适的场景下选择全靠的编辑器。另外还是个人使用习惯,我并不排斥Editplus,Vim等优秀的编辑器,但在此文只做这两个的分享。
所谓新式的具备了以下的特点:

  • 支持新的插件或前端相关技术。
  • 友好的用户体验或干净清爽的界面。
  • 要么功能特别强大,要么占用资源十分小。

经过多次的尝试,最后感觉以下两种是适合以上的标准。

 

一. Webstorm

1. 优点

webstorm的优点确实不少,另外Idea, phpstorm, webstorm是同一家公司的,对应:javaer, phper, 前端er,请选择适合自己的编辑器。
  • 对新技术支持比较完善。比如支持nodejs, emmet, html5, jslint, less, sass, coffeescript, typeScript, stylus, git, svn 等。除了这些之外,在博客上都会有个投票有那些新技术,及时的投票之后进行功能的增加。
  • 相对eclipse混乱的插件来说,他对插件进行了封装,大部分是自己开发,插件的质量相对来说稍高一点。
  • 用户体验快捷键支持都比其它同类编辑器更进一步,借鉴了多个编辑器的优点,又向前走了一步。

2. 缺点

缺点主要在三个方面:

  • 对中国人来说,英文仍然是一部分开发者的阻碍之一。
  • 由于功能的强大,对电脑硬件资源的消耗是比较猛的。所以对配置有一定的要求。
  • 配置,由于功能特别强大,要使用到顺手,必须经过一定的配置,才可以。

3. 教程

4. 插件

来源:http://www.zhihu.com/question/22437385

  • Markdown 支持md,点击编辑窗口下面的Text/Previev可以切换代码/预览视图
  • AngularJS——支持AngularJS的标签提示
  • AceJump——快速定位光标位置,有了它你可以丢弃鼠标了
  • IdeaVim——针对webstorm的VIM插件,实现了80%的功能。
  • WebStorm Chinese Language Pack(中文语言包)
  • 准备尝试使用WebStorm做开发,因为英文本身也不好,所以做了这个汉化包;
    把压缩包里的"resources_zh_CN.jar"拷贝到WebStorm安装目录下的lib目录,重启即可!
    因为开始使用了大量的自动翻译,虽然几经校对,加上英文水平有限,应该还有大量的翻译错误在里面!

5. 技巧

  • 去除烦人的波浪线+灰色变量名,原因 - 没用过的标签
    file - settings - Editor - Colors & Fonts - General - Unused sumbol,然后取消选中Effects和Foreground
    file - settings - Editor - Colors & Fonts - General
  • 开启对Compass支持
  • 多行编辑
    Add/remove a selection: Alt + Shift + Mouse Click
    Select/unselect the next occurrence: Alt + J / Shift + Alt + J (Ctrl + G / Shift + Ctrl + G) for Mac OS X)
    Select all occurrences: Shift + Ctrl + Alt + J (Ctrl + Cmd + G for Mac OS X)
    Clone caret above/below (the shortcuts are not mapped yet)
    Remove all selections: Esc
  • webstorm 汉化
  • 显示右下角垃圾回收进度 file - settings - Appearance - show memory indicator
  • Webstorm的调试是不支持中文路径中文文件名。

二. SublimeText

1. 优点

SublimeText优点比较直接:简洁,低耗,给力。
  • 对新技术以插件的形式支持比较完善。插件比较多,可以说是海量,而且安装方便。
  • 很多人因为他那个黑色的皮肤而选择他,无非这也是一个优点。
  • 内存战胜比较低

2. 缺点

缺点主要在三个方面:

  • 还是语言问题,不过近年有中文汉化版的出现,但建议使用英文。
  • 对GBK支持不是很友好。
  • 对大文件的读取没有同类软件支持友好。

3. 教程

4. 插件

  • Emmet
    规则在:Preferences -> Browser packages -> Emment -> emment -> snippets.json
  • Side Bar增强的侧边栏
  • Docblockr增强js注释
  • Alignment等号对齐
    Preferences -> package settings -> Alignment -> Settings User添加冒号对齐。
{
"align_indent": false,
"alignment_chars": ["=", ":"],
"alignment_space_chars": ["=", ":"]
}

5. 技巧

到此为止两个编辑的技巧就分享完了,这个只是抛砖引玉,更多的技巧期待小伙伴们分享。

web前端开发教程系列-1 - 前端开发编辑器介绍的更多相关文章

  1. web前端开发教程系列-4 - 前端开发职业规划

    前言 关于我:小天 1). 架构师,项目经理,产品经理 2). 中间件研发 3). VPCC 云计算基础平台管理 4). 智慧旅游 5). 智慧教育 6). 一次失败的创业体验(爱邂逅网) 一. 在开 ...

  2. web前端开发教程系列-2 - 前端开发书籍分享(转)

    目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记   前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...

  3. web前端开发教程系列-2 - 前端开发书籍分享

    目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记   前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...

  4. web前端开发教程系列-3 - 前端开发调试工具分享

    前言 一. Bug出现的原因 1. 主观原因或者是出现这么多浏览器的原因 2. 另外客观原因: 二. 调试工具 1. Firebug 2. Chrome 3. IE11 4. IETester 5. ...

  5. Xamarin开发教程如何使用Xamarin开发Android应用

    Xamarin开发教程如何使用Xamarin开发Android应用 如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和 ...

  6. iOS 11开发教程(五)iOS11模拟器介绍二

    iOS 11开发教程(五)iOS11模拟器介绍二 3.iOS11模拟器中设置语言 对于不同国家的人来说,使用到的语言是不一样的.一般情况下iOS11模拟器默认使用的English(英语).对于英文不好 ...

  7. EnjoyingSoft之Mule ESB开发教程系列第五篇:控制消息的流向-数据路由

    目录 1. 使用场景 2. 基于消息头的路由 2.1 使用JSON提交订单的消息 2.2 使用XML提交订单的消息 2.3 使用Choice组件判断订单格式 3. 基于消息内容的路由 4. 其他控制流 ...

  8. arcgis engine 开发教程系列

    版权声明:        <ArcGIS Engine+C#实例开发教程>为3SDN(http://www.3sdn.net)原创教程,版权所有.禁止商业用途转载(如需请联系作者),非商业 ...

  9. EasyAR 开发教程系列1--小试牛刀

    大家好,我是Albert Lee(@Mars Studio),AR独立开发者.计算机视觉与人工智能研究者. AR 开发资源汇总(不断更新中):https://github.com/GeekLiB 微信 ...

随机推荐

  1. xamarin.android 给View控件 添加数字提醒效果-BadgeView

    本文代码从java项目移植到.net项目   java开源项目:https://github.com/jgilfelt/android-viewbadger using System; using S ...

  2. SpringMVC接收参数的注解笔记

    1.@RequestParam var param = {}; param.keys = delKeys.join();//delKeys是数组,如delKeys=['a',b','c'],join函 ...

  3. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  4. Android多线程----异步消息处理机制之Handler详解

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  5. 实例化Model的三种方式

  6. 立即执行函数与window.onload作用类似

    (function(){ }()); // 立即执行函数 或者用window.onload=function(){}也可以  

  7. [WPF]资源字典——程序集之间的资源共享 简单换皮肤

    直接上代码,已便已后自己查况阅,新手也可以看! 1.新建一个资料类和一个WPF工程 2.APP.XAML应该资源字典,注意应Source格式,前面一定要有“/” <ResourceDiction ...

  8. OAF中的面包屑(breadcrumbs)始无法显示(转)

    原文地址:OAF中的面包屑(breadcrumbs)始无法显示 OAF中面包屑是一种重要的导航工具.可以提示用户抵达当前页面的路径,也可以方便的切换到之前的节点. 开始做面包屑开发的时候发现面包屑总是 ...

  9. 深入分析 Javascript 单线程

    面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event l ...

  10. [iOS翻译]Cocoa编码规范

        简介: 本文整理自Apple文档<Coding Guidelines for Cocoa>.这份文档原意是给Cocoa框架.插件及公共API开发者提供一些编码指导,实质上相当于Ap ...