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

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

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

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 - 前端开发编辑器介绍

前言

一. Webstorm

1. 优点

2. 缺点

3. 教程

4. 插件

5. 技巧

二. SublimeText

1. 优点

2. 缺点

3. 教程

4. 插件

5. 技巧

相关文章