码迷,mamicode.com
首页 > Web开发 > 详细

web前端 | 如何选择撸码神器

时间:2016-09-01 11:16:29      阅读:1943      评论:0      收藏:0      [点我收藏+]

标签:

进来,不少小伙子、小妹子来问一个家常便饭,但又逃不脱的问题:


小北哥哥,现在这么多编辑器,我该用哪一个好啊,看着都不孬啊(孬字用得好!)

此篇文章,纯客观分析 顺便吹逼,老鸟和大神直接略过吧!
省的你们看到我写这个问题,再说我烦不烦啊,这问题都讨论了多少年了,甚至好多群里,一看到谁在讨论编辑器,就要送飞机票。

但很多转入前端的孩子还是很迷茫, 能力和悟性也分三六九等,人不同,自然适合自己的工具也要不同, 你不能你是个弱鸡,就学人家用VIM 或者直接文本编辑器?你这不找虐呢?

俗话说得好: 工欲善其事,必先利其器. 代码要写好, 利器少不了.利器如果少,BUG天天找!

下面先跟着我 来了解一下 前端普遍流行的代码编辑器.

NO 1: 「 Dreamweaver 」

特点:年代久远,古时候 网页三剑客必备良药。

技术分享

因为我的 html css 是在大学 室友玩CF、魔兽、 星际的时候 我戴着耳机偷偷学的,我的一篇文章:《web到底是什么》也简单介绍了这个花花绿绿的玩意儿。

那会只知道Dreamweaver 可以自动提示,那是相当牛逼了. 当时觉得好方便啊, 代码花花绿绿的(当时好多教程,都是文本编辑器直接敲的,一片黑呼呼的,严重影响颜值), 看起来舒服, 主要是有代码提示. 敲一个 ‘position:‘属性 这个在新手来讲很长了吧,你不给我提示你想让我天天过英语四级?所以理所应当 那时候入坑的人 没人不用Dreamweaver 的。

上面图片是cs4, 我那时还没有这个版本, 貌似是dw8, 而且那时候Dreamweaver还是micromedia公司(公司名字当时我都记不住,太长), 后来才被Adobe收购的

当时用Dreamweaver的时候还需要特别注意utf-8和非utf-8的问题, 因为记得那时默认好像不是utf-8, 需要在设置里设置一下才行.

以前还有一个frontpage的工具,主要是自动表格能力强悍!那时候大部分网页还是table居多,你们现在体会不到!


NO 2: 「 Notepad++ 」

特点:后端程序猿的真爱,性能出众,插件良多,自动提示友好,在当时颜值也可以了

技术分享

我跟风,用了好长一段时间的notepad++ ,还总是更新最新版,每次启动此神器,都要先点击更新。

那时候 google由于历史原因被K了,被度娘迷惑,一搜代码神器就是 Notepad++ ,并不知道 [ Sublime text ] 这个真正的神器。不然依着我 先看颜值的尿性 早用sublime text 去了!呵呵呵!

Notepad++最大的特点就是轻便、性能强悍. 不过它相对于ide来说, 功能还是弱. Notepad++要想功能强大点, 就需要安装一些插件了.
插件地址在这里, 挺多的.
这里推荐2个我最常用的插件:
Zen Coding或者Zen Coding-Python(代码编写神器, 必备)
Compare Plugin(代码对比工具, 比较2个代码之间的差异)

Notepad++还有一个很大的亮点就是配对标签高亮功能, 如下图:

技术分享

我觉得sublime和 webstorm 的配对标签高亮都没有这个好用.醒目

虽然我现在基本不用Notepad++写代码了, 但有时候工作中看一些代码块 和单个源文件还是会 右键-> Notepad++ ,估计变成习惯了!


NO 3: 「 Sublime Text 」 -- 重点推荐

特点:最合适前端的神器,神器, 神器! 轻便、快捷、目前 颜值最高、速度最快、插件最人性化的编码神器(不是IDE)

技术分享
我的图

Sublime Text 是我目前最常用离不开的编辑器了。它是一款巨牛的编辑器,然而我自己配置过的 比ide 还要强大,不吹!我现在只要打开工作电脑,第一件事就是打开它 我用的最新版本 Sublime text3

我的博客也有很多关于Sublime Text3的一些文章 和 主题 和必不可少的开发插件,因为我第一眼看到她的时候,我tm 就吧其他编辑器封存了,对只爱他一个了。

颠覆了我的三观

  • 一个编辑器居然有这样的颜值和插件配置方式。
  • 插件全部是Python 脚本编写,寄存到官网,在编辑器本身就可以直接搜索下载(这本身就像IDE 的思维了,具方便)
  • 各种配置灵活,全部可以打开配置文件手动修改,而不是像IDE 一样只能勾勾选选。真正做到了灵活和功能的同样强大
  • 编辑器的通病:没语法检测和格式化,甚至不能编译程序。然而 此神器统统都有插件可以解决,我有时候调试java、nodejs 部分class都可以编译
  • 最主要的一点,颜值太tm高了,写代码都觉得瞬间有逼格了。你想想,你在一个贫民窟里写代码 和 马尔代夫海边写代码是不是两个感觉!
    其他编辑器那丑逼样就像贫民窟啊 对吧!

必装插件

技术分享
我的配置

Plugins - 我共享部分插件
(由于很多,也很好玩,篇幅长不好介绍完,有兴趣的童鞋可以留言问我,后面还会专门介绍sublime)


插件有很多,但不建议全部都安装,用到那个安装那个,安装过多,由于插件质量良莠不齐,会使软件本身不稳定,经常挂掉。
Emmet GitDocument原名为:Zencoding, 快速生成html,css
,默认扩展快捷为tab
,如果tab
按钮损坏,ctrl+e
替换。 生成规则在:
Preferences -> Browser packages -> Emment -> emment -> snippets.json

中修改。
@ Emmet 中文版文档

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
markdown 转为 pdf

LineEndings 设置换行符

SublimeText插件列表
html美化插件
Sublime Text 新建文件的模版插件: SublimeTmpl
前端自动化神器LiveReload配合浏览器和less/sass使用方法
使用 Sublime Text 2 开发 Unity3D 项目
全栈开发必备的10款 Sublime Text 插件
其它语言框架支持
JavaScript
nodejs snippets and bindings for Sublime Text 2
AngularJS-sublime-package
avalon completion for sublime 3
Sublime Text highlighting for Vue.js
Sublime Text helpers for React
TypeScript-Sublime-Plugin

CSS
Bootstrap 3 Snippets Plugin for Sublime Text 2/3
Sublime Text代码片段收藏

PHP
Thinkphp Sublime插件 显示优化,兼容St3版本)
laravelgenerator
Laravel Blade Highlighter
Sublime中的函数手册提示

Nodejs
sublime3 配置node build环境

版本管理
git
git
svn
ftp

文件比较

CSS值转REM的Sublime Text插件
本地历史记录


NO 4: 「 Webstorm 和Phpstorm)」--推荐

特点:典型的IDE 神器,专为前端web程序员打造,语法检查完善,ide的本色应有尽有,颜值也高。

phpstorm是我工作接触了PHP以后在公司以后才真正开始使用, 现在我公司的PHP程序员 都是此ide,超级好用。
webstorm和phpstorm基本一样, phpstorm不过多了支持php的功能.
知道和认真使用了webstorm以后, 谁要讨论谁是最好前端编码IDE(注意只是IDE ), 我总是毫不犹豫的说: webstorm.
webstorm部分特点如下:

  1. 复制代码块结构不乱 (无论你把代码片断复制到编辑器的哪个地方, 它都能自动缩进好)
  2. 快速选择并操作大块代码 (利用快捷键快速选择和操作配对代码)
  3. 文件历史记录及代码对比 (phpstorm会保存很多文件的历史版本, 当你有一天想恢复以前的代码, 找出来, revert即可, 而且还能将不同历史版本, 历史版本与当前版本代码进行对比, 对比结果差异会很清晰的标识出来)
  4. 自动保存 (不用ctrl+s, 自动保存代码. 个人认为这个习惯了ctrl+s的人来说, 反而不喜欢这个功能)
  5. 基于上下文的自动提示 (举个栗子: 你如果在上文定义了一个function, 在下文如果输入首字母, 就可以提示这个function名称)

主要优点:

  • JS、PHP 弱类型语言语法检测牛掰,变量名 函数名有没有定义和被用到 都会给出提示。
  • 可以配置插件,插件也可以在单独配置用法。灵活定制没问题
  • 代码格式化严谨 整洁,基本按照主流w3c标准和通用标准。还可以自己自定义格式化规则
  • 主题多,可以和sublime 媲美了,不过还是比不上
  • 唯一缺点:占用内存多,cpu稍微高,低配置不用考虑!

NO 5: 「 Atom 和 VScode)」

特点:近两年的新贵编辑器,而且也都开源部分源码。

Atom: github出品 必属精品,颜值高,体验好 听说还是angularjs写的。严格来说算IDE 了 功能强大 插件繁多 。

优点:

  • 直接集成webkit 调试前端网页 js 不要太爽
  • github 官方介绍:The hackable text editor
    atom 的用户越来越多,尤其是 web 前端开发者,几乎能和 sublime 分庭抗礼,而且要知道的是 sublime 是 个人开发者并且收费闭源(蛇神说更新慢的一比,bug万年不修),而 atom 则是整个社区驱动,插件一年发布上千个(一堆 amazing 的插件),而且在 web 前端开发方面现在几乎拥有 sublime 的所有功能(并且更多,关键是还可以 hackable 啊)。

缺点:加载插件真的超慢。。插件慢估计是我们是倒霉蛋大陆有关。打开文件也慢,是设计目前还不成熟,不过势头很猛,值得期待

技术分享
Atom

VScode: 本人没怎么用于实际环境
(以下收集自 网友总结)
优点:
1,好看,分分钟逼死notepad++。
2,加载大文件几乎秒开。
3,C#支持高亮,已经编译过的还支持引用。
4,JS、HTML等支持高亮和补全。
5,全平台,我再也不纠结买RMBP还是XPS了。
6,免费,这是必须的好评7,占用内存低,下图是我打开我正在写的开源(20M左右代码)文件夹后的内存占用,堪称神奇。

技术分享

缺点:
对C#支持还不够好。不支持工程加载,只支持文件夹加载,引用比较复杂的大工程支持力度低。
支持git但是对github没提供接口。
debug需要手动输入参数,虽不复杂,但和VS一贯定位不符。
总结:删除了notepad++,并将所有文本文件关联在了code上。
第一版本就这么给力,后续版本私钥sublime和atom去死么。
以后别收费才好。

对比这3个新贵 前端神器-如何选择

-
Sublime : 快速,稳定,性感,全局搜索和索引速度超快,插件功能性好,可定制化一般(不能大幅度魔改界面,功能),可配置快捷键,构建参数,代码补全基于Snippet,没有IDE那种全局带类型推导提示来的爽

技术分享

适合用户:我这种 喜欢 高颜值、自由、不受约束、极简主义的骚货!


Atom : 速度一般,更新快,Hackable,任何了解过Web,会一点JS的都可以自己写插件,任何Web能实现的功能,效果都可以实现,且可配合本地库。

对Web开发者(尤其前端)友好,对很多语言代码提示完善,配合插件可以全项目类型联想代码补全,终端集成,分屏,调试器集成,Logger集成,非常简单可以打造一个自己的IDE,缺点就是基于Electron(Chrome)的效率问题,资源占用大。

技术分享

适合用户:喜欢颜值、对代码提示 和超喜欢折腾有要求的人


VSCode : 速度较快,对超大文件读写速度飞快(打开10M代码不到1s,Subline原生会卡近6s),插件数量相对少,有一些增强功能比如调试器,终端,原生支持语言语法高亮较少(C# JS TypeScript是第一位),内置JS/TS调试器…可以基于不同项目(文件夹)设置偏好,写C#和JS/TS专用。

技术分享

适合用户:对项目有依赖,微软粉、对代码语法检查要求严谨的人

总结:Sublime的潜在用户是Vim/Emacs党,超快的启动速度低资源占用,适合编辑任何小文本(包括普通文本,配置文件),C/C++/ASM和很多脚本语言以及不需要实时调试类型的语言,插件多是非常实在的功能。

缺点是:有证书购买(虽然可以一直无限制使用),感觉没有开源项目来的自由Atom目标是IDE替代品,可以配合插件打造成高效IDE,而且对Web平台开发者友好,对前端更友好,Hackable让任何人都能简单贡献自己的插件,如果能解决速度问题和资源问题那就基本没有什么缺点了VSCode目标是对超大文件和项目管理有要求。

喜欢折腾 才能喜欢前端嘛!
如果读完本文,有任何疑问或者需求,可以给我公众号 留言交流,我还可以给你我封装好的 私货.比如 sublime text ,后面我专门会放出下载地址和介绍必备插件配置。

在最后,特别感谢,贺贺妹子(傻白甜),辛苦整理提供一些资料和配图,让我的文章更加生动和有趣。我想她一定是被我的颜值折服了吧!

技术分享

长按扫码关注我 微信公众号: 前端你别闹(webunao)

技术分享

web前端 | 如何选择撸码神器

标签:

原文地址:http://blog.csdn.net/xllily_11/article/details/52368272

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!