Before Coding [2]-各种Web前端编辑器对比

工欲善其事,必先利其器

接下来的学习中,我们将使用 HTML 与 CSS 进行网页开发,首先要做的就是选择开发工具。

在一些教程中,主张初学者使用 Windows 自带的记事本编写代码。这里笔者个人是非常非常的反对的,徒手写代码不仅仅不会提高编程水平,反而变相的加大了编程难度,降低了学习者的编程兴趣。一个好的开发工具,会使编程具有乐趣,使编程简单快捷。

这里笔者就推荐几款网页开发的工具,供大家选择。个人认为比较好的有:Sublime TextAtomVisual Studio CodeEditPlusNodepad++WebStormDreamWeaver。其中,前面5款是轻量级的,只有几M大小,后面两款是IDE级的。

可爱的编辑器——Sublime Text

Before Coding [2]-各种Web前端编辑器对比_第1张图片
Sublime Text

在所有上面的开发工具中,如果只能装一款,首推 Sublime Text。它不限于网页的开发,在后面学习 Python 和 JavaScript 的编程中也会使用到它。

Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

最最关键的是,它是免费的!而且拥有强大的插件库。

下载地址:https://www.sublimetext.com/3

Before Coding [2]-各种Web前端编辑器对比_第2张图片
Sublime Text

配置修改

这一项是可选的,只是为了让读者了解配置文件的内容。

在菜单栏选择 Sublime Text->Preferences->Setting-User,注意其中Setting-Default是默认的系统配置,是不可修改的。通过修改用户设置会覆盖系统对应的默认配置,下面是笔者的配置,加了注释。

{
    "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主题设置, 这是下载主题后, 自动生成的, 也可以手动配置
    "font_size": 15, #设置字体大小, 我比较喜欢大一点的字体
    "ignored_packages":  #设置忽略文件类型, 第二个是默认忽略的, 第一个markdown文件我使用另一种文件打开,
    [
       "Markdown",
       "Vintage"
    ],
    "create_window_at_startup": false, #取消启动时,自动打开新窗口的设置, 这个设置很恶心, 每次启动后会自动生成一个空白窗口
    "open_files_in_new_window": false, #取消打开文件时会新生成一个窗口, 默认设置每次打开一个项目会重新生成一个窗口
    "highlight_line": true, #高亮当前编辑行, 其实高亮的不明显
    "highlight_modified_tabs": true, #设置文件修改时, 标签高亮提示, 这样可以提示保存
    "show_encoding": true, #在窗口右下角显示打开文件的编码
    "original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",   #主题设置
    "translate_tabs_to_spaces": true #将tab键的形式改为四个空格
}

浏览器打开HTML代码

因为我们需要进行网页开发,而 Sublime Text 的编译(Build)选项默认不带有HTML。这里我们让它能够Build HTML的代码,使用自定义的浏览器打开。

  1. 打开该路径:Preference - Key Bindings-User

  2. 在" ] "前输入以下代码:

{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }

这样一来,按下ctrl+shift+enter,就可以使用系统默认浏览器打开代码了。

Package Control 的安装

Sublime Text 如果离开了 Package Control 就基本废掉了大半,Package Control 提供给了 Sublime Text 强大的插件库,同时使得用户很方便的去下载使用它们。

打开 Sublime Text 3 并且按下 ctrl + ` 或者选择 View > Show Console 打开控制台,然后将下面的代码复制进控制台后按回车即可。

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

更多的学习资源

还有很多可用的插件,这里就不一一推荐的,个人可根据喜好选择性的进行安装和使用。下面给出的资源有很多快捷键的技巧、使用的经验、插件的推荐,请读者们简单的浏览一下。

Sublime Text 有哪些使用技巧? - 知乎

正如同官网所说的那样——“Sublime Text: The text editor you'll fall in love with”,它确实是一款令人着迷的可爱的编辑器。

Before Coding [2]-各种Web前端编辑器对比_第3张图片
Sublime Text

21世纪的新星——Atom

Atom 概述

在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品,如历史悠久的 VIM、Emacs 以及如今当红的 Sublime Text。另外还有 VSC、EditPlus、NotePad++、UltraEdit 等一大堆流行的利器,可谓百家争鸣。

然而,作为目前全球范围内影响力最大的代码仓库/开源社区,GitHub 的程序员们并不满足于此。他们使用目前最先进流行的技术重新打造了一款称为“属于21世纪”的代码编辑器—— Atom, 它开源免费跨平台,并且整合 GIT 并提供类似 Sublime Text 的包管理功能,支持插件扩展,可配置性非常高……

Before Coding [2]-各种Web前端编辑器对比_第4张图片
Atom

Atom 代码编辑器支持 Windows、Mac、Linux 三大桌面平台,完全免费,并且已经在 GitHub 上开放了全部的源代码。在经过一段长时间的迭代开发和不断改进后,Atom 终于从早期的测试版达到了正式版了!相比之前的版本,在性能和稳定性方面都有着显著的改善。

Atom 与 Sublime Text 对比

那么,我们关心的是,Atom 与主流的编辑器对比会怎么样?其实,在我看来, Atom 目前还不太适合用做主力编辑器,虽然它的功能与 Sublime Text 较为接近,但现在的它和 Sublime Text 相比还是稚嫩了一点,毕竟现在 Sublime Text 已经非常成熟了,后者有很全面的内置功能,也有非常丰富的插件包和活跃的社区,而 Atom 则还需给予时间让其发展。因为其内置了 Chrome 的缘故,安装包可达近100MB,相对 Sublime Text 厚重的可不是一星半点的了。目前仍然没有取代Sublime Text成为主流的主要原因还是因为性能问题,其启动时间可达 4-15 秒,而且比较吃内存,性能不够强大的计算机在使用的时候也会感到编码不流畅,甚至会因为 Atom 导致卡死。

不过由于 Atom 是由 Github 维护的,它拥有非常强大的后台。并且那里有着大量极为优秀的编程爱好者,也是极客们的聚集地,相信在不久的将来Atom 一定也会拥有不少新的插件包,而性能方面的缺点迟早也会被解决掉。

下载地址:https://atom.io

EditPlus 与 Nodepad++

Editplus 概述

EditPlus 是一款由韩国出品的小巧但是功能强大的可处理文本、HTML 和程序语言的 Windows 编辑器,你甚至可以通过设置用户工具将其作为C,Java,PHP等等语言的一个简单的IDE。

官方试用版下载地址:https://www.editplus.com/download.html

Nodepad++ 概述

Before Coding [2]-各种Web前端编辑器对比_第5张图片
Nodepad++

Notepad++是 Windows操作系统下的一套文本编辑器,有完整的中文化接口及支持多国语言编写的功能。

Notepad++功能比 Windows 中的 Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的外挂模组。

下载地址:https://notepad-plus-plus.org/download/

Editplus 与 Nodepad++ 的对比

两者都不可以做为编程的主力工具,只是在没有其他编辑器情况下的一个备选项。另外,Editplus是收费的,Nodepad++是免费的。

前端开发神器——WebStorm

Before Coding [2]-各种Web前端编辑器对比_第6张图片
WebStorm

WebStorm,跨平台IDE,为WEB开发项目提供更好的开发支持,专门针对JavaScript、CSS、HTML及各种Script设计。它是一个轻量级但功能强大的集成开发环境,完全具备了与复杂的客户端开发和服务器端开发。毫不夸张的说,它是Web前端开发、JS开发的首选IDE,其强大之处不可理喻,被誉为Web开发神器。

Before Coding [2]-各种Web前端编辑器对比_第7张图片
WebStorm

简单列举一下优点:

  • 自带的版本控制,这功能挽救了我好多次了。
  • 优秀的代码定位能力,能轻松将光标定位到变量/属性/方法的定义处,对阅读代码非常有用。
  • 聪明的代码联想、格式化功能。
  • 可定制的code template,加强版的zen coding,而且不仅限于html和css。
  • svn、git 等版本工具的支持,内置的 gist 非常方便。
  • nodejs 最好的开发工具,没有之一。只要你会用 chrome 调试浏览器器端的 js,那么你就会用 webstorm 调试 nodejs。
  • 预处理语言的支持,使less、sass、cofeescript 等等语言的自动编译变得很简单。
  • 最爽的一点,remote host和live edit的组合使用,让你直接编辑远程文件并实时刷新,一下省去了你这么多步骤:保存本地文件,上传本地文件到远程服务器,刷新浏览器。

具体强大之处可以看一下这篇博文:WebStorm:令人眼前一亮的一款前端开发IDE | 安·记,也可以不看,反正只要知道它是神器一般的存在就足够了。

Before Coding [2]-各种Web前端编辑器对比_第8张图片
WebStorm

官方试用版下载地址:https://www.jetbrains.com/webstorm/

官方下载之后可以试用30天,本文不提供破解教程,破解的话网上一搜一大把,但是还是建议读者们有条件的话请使用正版(原价¥600)。

CSDN软件商城正版购买:http://mall.csdn.net/product/627

梦想编织者——DreamWeaver

Before Coding [2]-各种Web前端编辑器对比_第9张图片
DreamWeaver

DreamWeaver 是 Adobe 旗下的极具竞争力的一款网页开发工具,它的特点是可视化开发,即所见即所得,很适合初学者使用。所以在很多网页开发的新手教程中,都会推荐使用 DreamWeaver。

Before Coding [2]-各种Web前端编辑器对比_第10张图片
DreamWeaver

DreamWeaver 也是一款商业软件,故此处不提供下载地址。较于 WebStorm,它的可视化开发确实会提供一些便利,但是总体上仍然与WebStorm 有很大差距,就像美图秀秀与 Photoshop 的差距一样。另外,编程熟练之后,完全不需要可视化,所谓的所见即所得也会显得很多余累赘。

原文:《选择兵器》(From 《Before Coding》)

你可能感兴趣的:(Before Coding [2]-各种Web前端编辑器对比)