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. 教程
- 介绍:大城小胖视频介绍
- 下载: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
到此为止两个编辑的技巧就分享完了,这个只是抛砖引玉,更多的技巧期待小伙伴们分享。
web前端开发教程系列-1 - 前端开发编辑器介绍的更多相关文章
- web前端开发教程系列-4 - 前端开发职业规划
前言 关于我:小天 1). 架构师,项目经理,产品经理 2). 中间件研发 3). VPCC 云计算基础平台管理 4). 智慧旅游 5). 智慧教育 6). 一次失败的创业体验(爱邂逅网) 一. 在开 ...
- web前端开发教程系列-2 - 前端开发书籍分享(转)
目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记 前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...
- web前端开发教程系列-2 - 前端开发书籍分享
目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记 前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...
- web前端开发教程系列-3 - 前端开发调试工具分享
前言 一. Bug出现的原因 1. 主观原因或者是出现这么多浏览器的原因 2. 另外客观原因: 二. 调试工具 1. Firebug 2. Chrome 3. IE11 4. IETester 5. ...
- Xamarin开发教程如何使用Xamarin开发Android应用
Xamarin开发教程如何使用Xamarin开发Android应用 如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和 ...
- iOS 11开发教程(五)iOS11模拟器介绍二
iOS 11开发教程(五)iOS11模拟器介绍二 3.iOS11模拟器中设置语言 对于不同国家的人来说,使用到的语言是不一样的.一般情况下iOS11模拟器默认使用的English(英语).对于英文不好 ...
- EnjoyingSoft之Mule ESB开发教程系列第五篇:控制消息的流向-数据路由
目录 1. 使用场景 2. 基于消息头的路由 2.1 使用JSON提交订单的消息 2.2 使用XML提交订单的消息 2.3 使用Choice组件判断订单格式 3. 基于消息内容的路由 4. 其他控制流 ...
- arcgis engine 开发教程系列
版权声明: <ArcGIS Engine+C#实例开发教程>为3SDN(http://www.3sdn.net)原创教程,版权所有.禁止商业用途转载(如需请联系作者),非商业 ...
- EasyAR 开发教程系列1--小试牛刀
大家好,我是Albert Lee(@Mars Studio),AR独立开发者.计算机视觉与人工智能研究者. AR 开发资源汇总(不断更新中):https://github.com/GeekLiB 微信 ...
随机推荐
- linux chromuim安装常用插件(flash,手势,拖拽,广告屏蔽)
1.本机kali2.0 64位,kali基于Debian.文章所用的所有插件请到http://files.cnblogs.com/files/yuuyuu/chromium_plugins.tar. ...
- matlab ASCII 格式导入
matlab ASCII 格式导入 可以用fprintf函数,来代替save函数啊比如现在我有一个变量a=[0.1223 345.4544]如果我想保存它的话,可以用下面的程序:fid = fopen ...
- 【Ext.Net学习笔记】07:后续
这些笔记都是在这个地址看到的:http://www.qeefee.com/category/extnet 然后跟着敲,去理解的. Ext.NET其实就是基于跨浏览器的ExtJS库和.NET Frame ...
- jquery/js实现验证聚焦,失焦
jquery实现验证聚焦,失焦方法: 我还是喜欢用jquery来实现,不管页面中多少个输入框需要实现聚焦,失焦,都公有,我常用的方法是: 遍历该页面中的input框,获取输入框中的val值,当该输入框 ...
- 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS?
来自 http://www.zhihu.com/question/19599986 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS? 想选择一个 Linux 发行版作为服务器. ...
- Linux 安装oracle客户端
环境: CentOS release 6.4 (Final) 一.下载文件 1.首先要查看oracle版本,对应的SQL如下: select * from V$version ; 2.根据oracl ...
- 浅谈CLR
1.什么是CLR CLR(Common Language Runtime)公共语言远行时,是一个可由多种编程语言使用的“远行时”.CLR的核心功能(比如内存管理.程序集加载.安全性.异常处理和线程同步 ...
- 页的lock
文件为什么要加锁? 页的操作为什么要加锁? http://linux.chinaunix.net/techdoc/system/2007/06/11/959844.shtml 上面一个页面有简单介绍什 ...
- 推荐一款开源的C#TCP通讯框架
原来收费的TCP通讯框架开源了,这是一款国外的开源TCP通信框架,使用了一段时间,感觉不错,介绍给大家 框架名称是networkcomms 作者开发了5年多,目前已经停止开发,对于中小型的应用场景,够 ...
- ls -F一种非常有用的ls格式
ls -F一种非常有用的ls格式 tz/y/yupeng > ls -F#q# News/ doc/ images/ mbox ...