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

工欲善其事，必先利其器

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

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

这里笔者就推荐几款网页开发的工具，供大家选择。个人认为比较好的有：Sublime Text，Atom，Visual Studio Code，EditPlus，Nodepad++，WebStorm，DreamWeaver。其中，前面5款是轻量级的，只有几M大小，后面两款是IDE级的。

可爱的编辑器——Sublime Text

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

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”，它确实是一款令人着迷的可爱的编辑器。

Sublime Text

21世纪的新星——Atom

Atom 概述

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

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

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++ 概述

Nodepad++

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

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

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

Editplus 与 Nodepad++ 的对比

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

前端开发神器——WebStorm

WebStorm

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

WebStorm

简单列举一下优点：

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

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

WebStorm

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

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

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

梦想编织者——DreamWeaver

DreamWeaver

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

DreamWeaver

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

原文：《选择兵器》（From 《Before Coding》）