web前端开发教程系列-1 - 前端开发编辑器介绍

目录：

前言

由于很多人现在使用的是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. 技巧

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

posted @ 2015-01-21 17:00  wdshare  阅读(3470)  评论(3)  编辑  收藏  举报