前端开发工具

编辑器

Transcript

1. 前端开发工具系列
   ——编辑器篇
   12年4月25日星期三
   

   View Slide

2. 前端开发工具真的很重要吗？
   12年4月25日星期三
   

   View Slide

3. 前端开发工具真的很重要吗？
   12年4月25日星期三
   

   View Slide

4. 这得从我们的工作环境说起...
   12年4月25日星期三
   

   View Slide

5. 这得从我们的工作环境说起...
   var feDe =｛
   editor：[‘vim’, ‘dreamweaver’, ‘notepad++’],
   design：[‘psd’,‘jpg’],
   rd：[‘doc’,’rp’],
   browser：[‘chrome’, ‘fx’, ‘opera’, ‘ieN’, ‘...’],
   virtualhost: {
   xp: feDe
   win7: feDe
   }
   ｝
   12年4月25日星期三
   

   View Slide

6. 这得从我们的工作环境说起...
   12年4月25日星期三
   

   View Slide

7. 这得从我们的工作环境说起...
   ⼀一两个编辑器/IDE
   12年4月25日星期三
   

   View Slide

8. 这得从我们的工作环境说起...
   ⼀一两个编辑器/IDE
   几张页面设计稿
   12年4月25日星期三
   

   View Slide

9. 这得从我们的工作环境说起...
   ⼀一两个编辑器/IDE
   几张页面设计稿
   若干需求/交互文档
   12年4月25日星期三
   

   View Slide

10. 这得从我们的工作环境说起...
    ⼀一两个编辑器/IDE
    几张页面设计稿
    若干需求/交互文档
    各种浏览器
    12年4月25日星期三
    

    View Slide

11. 这得从我们的工作环境说起...
    ⼀一两个编辑器/IDE
    几张页面设计稿
    若干需求/交互文档
    各种浏览器
    虚拟机（勤快的工程师必备利器）
    ...
    12年4月25日星期三
    

    View Slide

12. 这得从我们的工作环境说起...
    ⼀一两个编辑器/IDE
    几张页面设计稿
    若干需求/交互文档
    各种浏览器
    虚拟机（勤快的工程师必备利器）
    ...
    12年4月25日星期三
    

    View Slide

13. 这得从我们的工作环境说起...
    ⼀一两个编辑器/IDE
    几张页面设计稿
    若干需求/交互文档
    各种浏览器
    虚拟机（勤快的工程师必备利器）
    ...
    2G 内存
    12年4月25日星期三
    

    View Slide

14. 工
    欲
    善
    其
    事
    ,
    必
    先
    利
    其
    器
    居
    是
    邦
    也
    ,
    事
    其
    大
    夫
    之
    贤
    者
    ,
    友
    其
    士
    之
    仁
    者
    ⾇
    孔
    子
    ﹁
    论
    语
    ﹂
    12年4月25日星期三
    

    View Slide

15. 工
    欲
    善
    其
    事
    ,
    必
    先
    利
    其
    器
    选择⼀一个好的编辑器，不仅能让工作轻松愉快还能学到很多知识
    居
    是
    邦
    也
    ,
    事
    其
    大
    夫
    之
    贤
    者
    ,
    友
    其
    士
    之
    仁
    者
    ⾇
    孔
    子
    ﹁
    论
    语
    ﹂
    12年4月25日星期三
    

    View Slide

16. 正题
    ❖ 编辑器分类
    ❖ ⼀一些常见的编辑器
    ❖ 推荐的编辑器
    12年4月25日星期三
    

    View Slide

17. 正题
    <1>
    ❖ 编辑器分类
    ❖ ⼀一些常见的编辑器
    ❖ 推荐的编辑器
    12年4月25日星期三
    

    View Slide

18. 编辑器分类
    - 平台
    • Windows
    Dreamweaver\ Notepad++\ EditPlus\ emEditor\ UltraEditor\ E Text Editor\ gVIM
    • Linux
    Emacs\ gEdit\ Nano Editor\ VI(VIM)
    • Mac OS
    TextMate\ Coda\ Espresso\ Macvim
    12年4月25日星期三
    

    View Slide

19. 编辑器分类
    - 平台
    • Windows
    Dreamweaver\ Notepad++\ EditPlus\ emEditor\ UltraEditor\ E Text Editor\ gVIM
    • Linux
    Emacs\ gEdit\ Nano Editor\ VI(VIM)
    • Mac OS
    TextMate\ Coda\ Espresso\ Macvim
    这货是IDE
    12年4月25日星期三
    

    View Slide

20. 编辑器分类
    - 平台
    • Windows
    Dreamweaver\ Notepad++\ EditPlus\ emEditor\ UltraEditor\ E Text Editor\ gVIM
    • Linux
    Emacs\ gEdit\ Nano Editor\ VI(VIM)
    • Mac OS
    TextMate\ Coda\ Espresso\ Macvim
    这货是IDE
    ⼀一直在PK，从
    未分胜负
    12年4月25日星期三
    

    View Slide

21. 编辑器分类
    - 平台
    • Windows
    Dreamweaver\ Notepad++\ EditPlus\ emEditor\ UltraEditor\ E Text Editor\ gVIM
    • Linux
    Emacs\ gEdit\ Nano Editor\ VI(VIM)
    • Mac OS
    TextMate\ Coda\ Espresso\ Macvim
    这货是IDE
    ⼀一直在PK，从
    未分胜负
    Mac上最经典的编辑器
    12年4月25日星期三
    

    View Slide

22. 编辑器分类
    - 类型
    • 付费
    UltraEditor\ EditPlus\ Sublime text\ ...
    • 免费
    NotePad++\ TextWrangler\ gedit
    • 开源
    VIM\
    12年4月25日星期三
    

    View Slide

23. 编辑器分类
    - 类型
    • 付费
    UltraEditor\ EditPlus\ Sublime text\ ...
    • 免费
    NotePad++\ TextWrangler\ gedit
    • 开源
    VIM\
    可以无限试用
    哦~亲!
    12年4月25日星期三
    

    View Slide

24. 正题
    <2>
    ❖ 编辑器分类
    ❖ ⼀一些常见的编辑器
    ❖ 推荐的编辑器
    12年4月25日星期三
    

    View Slide

25. 常见编辑器
    1. Notepad++
    A free source code editor which supports several programming languages running
    under the MS Windows environment.
    功能特色
    ✓软件绿色小巧
    ✓编码支持良好
    ✓插件可扩展 <新版的plugin manager很好用>
    ✓语法高亮、代码折叠、代码提示（自动完成）
    不足
    -界面⼀一般
    -主题太少
    12年4月25日星期三
    

    View Slide

26. 常见编辑器
    2. Editplus
    EditPlus is a text editor, HTML editor, PHP editor, Java editor and Hex Viewer for
    Windows. While it can serve as a good Notepad replacement, it also offers many
    powerful features for Web page authors and programmers.
    功能特色
    ✓软件绿色小巧
    ✓编码支持良好
    ✓语法高亮、代码折叠、代码提示（自动完成）
    不足
    -扩展插件太少
    -自动完成功能比较弱
    12年4月25日星期三
    

    View Slide

27. 常见编辑器
    3. E text editor
    The power of TextMate on Windows
    功能特色
    ✓强大的TextMate Bundels支持
    ✓编码支持良好
    ✓语法高亮、代码折叠、代码提示（自动完成）
    ✓界面友好、主题漂亮
    不足
    -太多模仿TextMate没有创新
    -安装的时候要切系统区域设置
    12年4月25日星期三
    

    View Slide

28. 常见编辑器
    4. Sublime Text 2
    Sublime Text is a sophisticated text editor for code, html and prose. You'll love the
    slick user interface and extraordinary features.
    功能特色
    ✓强大的TextMate Bundels支持
    ✓语法高亮、代码折叠、代码提示（自动完成）
    ✓界面友好、主题库丰富
    ✓强大的Package Control (扩展包管理)
    ✓VI模式
    ✓特色功能：mini map\ 热退出
    ✓出色的功能细节：缩进方式提示、代码折叠、选中高亮、多选
    不足
    -无法自动识别中文字符如GB2312, GBK (可装插件解决)
    12年4月25日星期三
    

    View Slide

29. 常见编辑器
    5. VIM
    Vim (全称Vi Improved)是从vi发展出来的⼀一个文本编辑器。代码补完、编译及
    错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用。和Emacs并
    列成为类Unix系统用户最喜欢的编辑器。——from 维基百科
    功能特色
    ✓语法高亮、代码折叠、代码提示
    ✓成千上万的插件支持
    ✓速度快、大文件处理性能高
    ✓特色功能：太多了列不完 (稍后演示)
    不足
    -学习曲线是所有编辑里面里从开始到结束始终最高
    12年4月25日星期三
    

    View Slide

30. 主流编辑器学习曲线
    Ref: http://coolshell.cn/articles/3125.html
    12年4月25日星期三
    

    View Slide

31. 正题
    <3>
    ❖ 编辑器分类
    ❖ ⼀一些常见的编辑器
    ❖ 推荐的编辑器
    12年4月25日星期三
    

    View Slide

32. 推荐编辑器
    • Sublime Text 2
    功能强大、界面美观、细节丰富
    • Notepad++
    小巧简单、功能实（够）用
    • VIM
    如果你有足够的耐心，vim是不二之选
    12年4月25日星期三
    

    View Slide

33. 那么...
    12年4月25日星期三
    

    View Slide

34. 那么...
    12年4月25日星期三
    

    View Slide

35. Thx
    keelii
    引用：
    •《论语·卫灵公》
    •http://www.sublimetext.com/2
    •http://notepad-plus-plus.org/
    •http://www.editplus.com/
    •http://coolshell.cn/articles/3125.html
    12年4月25日星期三
    

    View Slide