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

时间:2023-01-17 09:59:50

目录:

前言

由于很多人现在使用的是dw工具开发前端,dw在拖拽页面时代确实是一个不可代替的编辑器,但是随着页面开发的复杂,尤其是jQuery的兴起之后,dw慢慢满足不了当下的前端开发需求,尤其是对js的支持,一直停滞不前,所以今天有必要为大家介绍两款新式的编辑器。
另外编辑器没有最好的,只有最合适的,只有在合适的场景下选择全靠的编辑器。另外还是个人使用习惯,我并不排斥Editplus,Vim等优秀的编辑器,但在此文只做这两个的分享。
所谓新式的具备了以下的特点:

  • 支持新的插件或前端相关技术。
  • 友好的用户体验或干净清爽的界面。
  • 要么功能特别强大,要么占用资源十分小。

经过多次的尝试,最后感觉以下两种是适合以上的标准。

 

一. Webstorm

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

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可以切换代码/预览视图
  • web前端开发教程系列-1 - 前端开发编辑器介绍web前端开发教程系列-1 - 前端开发编辑器介绍
  • AngularJS——支持AngularJS的标签提示
  • web前端开发教程系列-1 - 前端开发编辑器介绍
  • AceJump——快速定位光标位置,有了它你可以丢弃鼠标了
  • web前端开发教程系列-1 - 前端开发编辑器介绍
  • IdeaVim——针对webstorm的VIM插件,实现了80%的功能。
  • web前端开发教程系列-1 - 前端开发编辑器介绍
  • 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. 技巧

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