首页 > 代码库 > Web开发者用什么编辑器?

Web开发者用什么编辑器?

写在前面的话:从事web前端开发也有一段时间了,今天主要想分享的是文字(代码)编辑器。对于编辑器每个人都有自己的偏爱,也分不同语言的编码者,这里我就拿我接触过的来说说吧!

Web开发者用什么编辑器?

相信这个问题如果在几年之前被问出来,一定会有人毫不犹豫地回答Adobe的Dreamweaver。没错,直至现在,我们都不得不说Dreamweaver是一个非常易于上手的编辑器,而且它提供的功能非常有特色。我也是从Dreamweaver开始编程的,在我一开始接触前端行业的时候官方版本是需要收费的,当然那时的你也可以使用破解版,最近Dreamweaver新推出的版本是Dreamweaver CC 2017,貌似是免费的,具体我也没有去下载,你可以试试哦!好长时间不用了。但是需要使用 Adobe ID 登录,如果您没有 Adobe ID,注册即可。  

注:注意阅读注册协议即可;

按着步骤下载安装即可;

安装完成之后就是这样的了;

管理站点-建立个人项目空间(仓库)

界面是这样的:

技术分享

在抛弃了Dreamweaver之后我又使用了HBuilder编辑器。HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。

推荐Hbuilder:国产免费,适合新手,mac和win版本都有,不需要太多的配置可以直接使用,语法提示很齐全,编写html页面时可以直接显示页面内容,也可以用浏览器直接打开当前编写的这个页面,查看页面效果。

它的界面是这样的:

技术分享

更多关于HBuilder的内容可以到hbuilder官方网站学习。值得提醒的是hbuilder的代码提示功能是十分强大的。

网址:http://www.dcloud.io/

上次提到GitHub这个集新手和大神为一体的网站。没错,它本身也附带了一个简单的在线代码编辑器,颜色标注和代码排版等功能齐全。显示的大概效果如下:

技术分享

效果还是不错的。每次修改别忘了commit哦!

 

之前听到同事提到最多的编辑器就是微软最新的Visual Studio Code开源编辑器了。这款编辑器以自己的模块化作为卖点,各种主题和插件很多,也很实用。界面如下:

技术分享

这款编辑器的界面不是很有特色,但是满满的都是Visual Studio的影子,可它的整体体验非常好,包括界面,效率以及代码的可读性都是非常优质的。这里要着重说的也是我用的比较多的功能,就是Visual Studio Code自带的格式化代码功能。这项功能在HTML里可能不是最有用(把我辛辛苦苦写在后面的注释全部换行了,根本看不见),但是CSS和JavaScript的使用效果极佳。有时候你是复制粘贴其他地方的代码,或者是代码比较乱自己都看不清楚哪个标签对应哪个标签的时候,只需要轻轻右键—Format Code(格式化代码)或者使用快捷键Alt+Shift+F就可以让代码变得干净易读。这点在之后要介绍的Atom编辑器中没有自带,但是仍然有扩展程序可以支持。另一个很有用的功能就是“Change All Occurrences”(改变所有同样的文字[更改所有匹配项])。

比如说,你在写JavaScript时突然想重命名一个变量,或者一个函数,怎么办?这个名字在你的代码中被使用了千万次,你总不见得去一个一个重命名吧?这时候只需要选中一个变量,然后按下Ctrl+F2(或者右键找到Change All Occurrences)就可以同时编辑整个文档里的同类数据。如下图:

技术分享

Visual Studio Code就告一段落了,在讲我最近在捣鼓的Atom之前,先带过两个不得不说,但我又没怎么使用的编辑器:一就是大家都知道的Notepad++。Notepad++是一个可谓全能的编辑器,各种功能齐全,主要可以用来代替Windows自带记事本。但是感觉插件系统不是很完善,导致部分功能缺失。界面如下:

技术分享

特别想说一句,之前认识的一个王老师在教学的时候用的基本就是Notepad++了。可能是因为便捷吧,也没有很多复杂的插件需要安装,所以第一印象还是非常好的,本人也是这种态度,所以时不时还是会用的哦。

 

第二个我要带过的就是Sublime Text。

概念:

Sublime Text是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的Python API,Goto功能,即时项目切换,多选择,多窗口等。2012年6月26日推出的版本Sublime Text 2.0,与之前版本相比主要有较大的改善:支持Retina视网膜屏、快速跳到下一个、文本拖放等。在这里介绍是因为这款软件的速度很快,功能性也很全。我不怎么使用的原因是因为收费,好像直接购买要70美金吧……!

它的界面如下:

技术分享

特别想说的是Sublime Text的插件功能很强大。需要自己下载插件安装包来实现!

插件举例:Sublime Text汉化包、代码提示等等快捷键。

Sublime Text汉化包:http://www.cnblogs.com/kingwell/archive/2012/11/22/2782991.html

 

最后就是我在最近开始使用的一款开源编辑器,Atom,也是出自GitHub大神爸爸们之手。这软件我一拿到手就爱上了它的外观——在使用了将近半年的Visual Studio Code之后我发现上手Atom非常简单(毕竟Sublime,Visual Studio Code和Atom的操作习惯和界面高度相似),因为它和Visual Studio Code非常接近,只是听说Atom好像是一个WebApp打包出来的。Atom最大的问题就是不稳定,虽然我现在在用Beta版本,但是哪怕我在用稳定版,也会碰到程序突然闪退的问题(没错,闪退)。虽然好像数据不会掉,但是也是一件麻烦事不是吗?

除了外观之外,Atom让我非常满意的还有它的Preview HTML功能。这个功能可以在你编辑HTML代码的时候实时预览输出结果。我再Visual Studio Code上找了半天好像都没个方法,这里的插件Atom-html-preview可以做到这一功能(虽然Javascript和Ajax好像不能完整加载)。这个程序的Debug功能也是非常的实用(居然可以调试HTML我也是非常惊讶啊),具体各位去尝试一下也就明白我的意思了。

主代码界面是这样的:

技术分享

插件界面是这样的:

技术分享

Atom插件举例:

  ①Emmet

  Web开发者必不可少的工具,据说是神器,强烈推荐

  ②color-picker

  取色器

  ③minimap

  推荐 就是Sublime右边那一竖块,显示缩小版的代码

  ④vim-mode

  用过vim的都知道好,基本实现了大部分的功能,不过造成许多快捷键冲突,这也是其他编辑器不具备的功能

  ⑤git-plus

  Git的插件与Sublime Text 的sublimegit功能基本一致

  命令控制面板快捷键

  MacOS快捷键:Cmd+Shift+H

  Windows + Linux快捷键:Ctrl+Shift+H

  ⑥file-icons

  让文件前面边好看点的图片

  ⑦docblockr

  方便写代码注释

  ⑧autocomplete-plus

  当输入的时候,提供可能的候选项

  ⑨atom-cht-menu

  功能选项菜单与右键菜单汉化

 

汇总:

  Dreamweaver

  HBuilder

  GitHub在线代码编辑

  Visual Studio Code

  Notepad++

  Sublime Text 2

  Atom

 

今天一共介绍了7种不同的编辑器。其中,Visual Studio Code,Sublime Text2,Atom,都是全平台的(包括Windows,Linux和Mac),Dreamweaver暂无Linux版本,Notepad++只有Windows。这些大大小小的公司和开发者开发的产品各有各的特点,当然以我一个小型Web开发者的使用习惯来看无法概括所有有意思的功能。编写代码的工具很多,每个人都有自己的喜好。无论你用哪个代码编辑器,用哪个编译器,我都想说,编程,永远是一种享受。

Web开发者用什么编辑器?