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

目录：

• 前言
• 一. Webstorm
  • 1. 优点
  • 2. 缺点
  • 3. 教程
  • 4. 插件
  • 5. 技巧
• 二. SublimeText
  • 1. 优点
  • 2. 缺点
  • 3. 教程
  • 4. 插件
  • 5. 技巧

前言

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

• 介绍：WebStorm：令人眼前一亮的一款前端开发IDE
• 下载：Download WebStorm
• WebStorm快捷键

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. 教程

• 介绍：大城小胖视频介绍
• 下载：Download SublimeText
• 入门教程1：Sublime Text 全程指南
• 入门教程2：前端工程师手中的Sublime Text
• Sublime Text 使用介绍、全套快捷键
• sublime text 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": ["=", ":"]
}

• AutoFileName: 文件路径自动提示
• gbk支持 GBK Encoding Support
• 检测快捷键冲突
• markdown
  markdown 转为 pdf
• LineEndings 设置换行符
• SublimeText插件列表
• html美化插件
• Sublime Text 新建文件的模版插件: SublimeTmpl
• 前端自动化神器LiveReload配合浏览器和less/sass使用方法
• 使用 Sublime Text 2 开发 Unity3D 项目
• 全栈开发必备的10款 Sublime Text 插件

5. 技巧

• xdebug调试
• sublimetext 3.0文档
• Sublime Text 3 绝对神器
• SublimeText手册-tw
• 怎样从直接Github的repository安装Sublime Text插件
• Sublime text2的ThinkPHP插件
• Ubuntu 下Sublime Text 2 输入中文解决方法
• 如何开发Sublime Text2插件_衍生篇
• 用sublime构建phonegap项目
• 超级牛B编码王（二）：Sublime2之Zencoding快速上手
• sublime text 左侧菜单美化1
• 在 Ubuntu 12 下安装 Sublime Text 2
• Sublime Text 全程指南
• Sublime Text 全程指引 by Lucida
• sublime 有哪些使用技巧
• 前端工程师手中的Sublime Text

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