eclipse3 5

Eclipse搭建HTML5开发环境

前半部分引⽤⾄原⽂，后半部分添加了⼀些⾃⼰的配置！

⽂本编辑器orIDE

Html5的学习已经有⼀段时间了，随着应⽤的复杂程度越来越⾼，普通的⽂本编辑器已经很难满⾜我的开发需求了。到⽬前为⽌，我⼀直在

使⽤Notepad++作为Javascript的编辑器，对于很多新⼿来说，Notepad++⾮常适合作为Html5的开发⼯具，尤其是如果你懂得如何使⽤

其强⼤的插件。不过，尽管Notepad++很强⼤，毕竟不能提供很好的Html5⽀持；⽽且，随着⼯程代码量增加，简单的⽂本编辑器难以维

护整个⼯程的所有⽂件。

所以，我们需要的是⼀个更好的⼯具，⼀个适合于Html5⼯程项⽬的开发⼯具。

WhyEclipse

这样的⼯具有很多，其中优秀的也不少，像Webstorm、Dreamweaver等等。Dreamweaver对Html5的⽀持很不错，不过DW似乎更适

合于做⽹页⽽⾮应⽤；Webstorm是⼀个强⼤的IDE，对Html5的⽀持⾮常好，⽽且适合于应⽤开发，例如使⽤Webstorm开发cocos2d-

html5游戏⾮常⽅便。

但是这些都是商⽤软件，如果你愿意，可以去购买，当然更多的⼈选择破解版或者免费试⽤版。不管是哪些版本，能够满⾜需求就好。如果

说有什么优秀的IDE是不要钱的，第⼀个想到的就是Eclipse。可是Eclipse不是做Java开发的吗？事实上Eclipse平台提供了多种语⾔的开发

⼯具，只是在Java开发⽅⾯最为出名⽽已。Eclipse⽀持基于J2EE的动态Web开发，当然也⽀持静态Web开发。Html5应⽤可以看做是静

态Web程序，或者如果你的应⽤需要服务器⽀持，也可以做成动态Web程序。不管怎样，使⽤Eclipse开发Html5应⽤完全没有问题。

准备

下载

你需要做的就是下载⼀个Eclipse——点击这⾥下载最新版的Eclipse。

下载最新版的Eclipse⼀定没错。这⾥推荐使⽤EclipseIDEforJavaEEDevelopers，包含动态Web开发包，对于使⽤J2EE开发⽹站的开

发⼈员⾮常不错。

建议下载压缩包版。

安装和配置

如果你只需要开发Html5应⽤，那么不⽤配置Java环境。当然，如果你不是⼀个Java开发⼈员，我不推荐使⽤Eclipse作为你的Html5开发

⼯具，毕竟Eclipse没有提供专门的只为静态Web开发的⼯具，在这种情况下使⽤Eclipse显得有些⼤材⼩⽤。

如果你下载的是压缩包，直接解压即可。

Eclipse⼏乎不需要怎么配置，你只需在⾸次启动的时候选择你的⼯作空间就⾏。所谓⼯作空间就是你的所有⼯程创建时默认所在的⽬录。

创建⼯程

打开你的Eclipse，菜单选择⽂件->新建(N)->静态Web项⽬（StaticWebProject）

你现在会看到类似下⾯的⼀个弹出窗⼝，这个窗⼝就是告诉你所有可选的项⽬类型

选择Web->静态Web项⽬（StaticWebProject）

点击Next

填写你的项⽬名称，如CMDMockup

点击Next

填写你的【Webcontentfoldername：】名称，如：cmd

这个contentfolder就是你的应⽤所在的根⽬录

点击【完成】（Finish）。

添加⽂件

右键你的contentfolder的名字，例如我们的【CMD】，选择New->HTMLFile

填写【⽂件名】（Filename）为

点击Next

这⾥出现的是Html⽂件版本的选择，不同的版本使⽤不同的模板，当然我们也可以修改和创建⾃⼰的模板，后⾯会向⼤家介绍。

选择NewHTMLFile(5)

点击完成（Finish）

打开，你会看到类似下⾯的代码，这些都是模板⾃动⽣成的：

到⽬前为⽌我们已经基本完成了开发环境的搭建。⽤前⾯类似的⽅法，我们可以在contentfolder下⾯创建其它html⽂件、css⽂件、js⽂

件或者⽂件夹，从⽽丰富我们的应⽤。⽐如像我的cmd项⽬的⽬录如下：

配置

模板

很多新⼿不明⽩Html5开发为什么要使⽤开发⼯具？这就像许多刚刚⼊门的⽹页开发⼈员⼀样。之所以要使⽤开发⼯具，⽆⾮是贪图⽅便和

便于维护。那些我们在⼊门的时候写过⼏⼗遍甚⾄⼏百遍的代码，你真的还愿意⾃⼰⼀个⼀个的敲吗？模板是⼀个很好的⼯具，可以帮助开

发⼈员提⾼开发效率，让开发⼈员只专注于最重要的部分。

如何配置你的Html模板？⽅法很简单。

选择Window->Preferences

选择Web->HTMLFiles->Editor->Template

看到HTML5了吗？那就是我们刚刚新建的时候选择的模板。Name表⽰模板名称，Context表⽰模板的使⽤环境，Description为描述信

息。

我们可以点击右边的Edit按钮修改已有的模板，但是我不建议这样做。更有个性的做法是，我们可以点击New按钮，新建⼀个我们⾃定义的

模板。

点击New...

填写你的模板的名称、描述，选择使⽤环境为【NewHTML】

现在，根据你的个⼈习惯或需求，粘贴或写⼊你的模板代码

点击OK

这样，我们在新建HTML5的⽂件时，选择这个⾃定义的HTML5的模板，就可以了：

选择New...->HTMLFile，输⼊HTML⽂件名后，单击Next..

选择我们前⾯⾃定义的HTML5的模板：

单击Finish，这样就可以使⽤我们⾃定义的HTML5模板进⾏页⾯开发了：

导⼊⾃定义模板

在不同的项⽬中使⽤⾃定义模板

你可以将模板导出或导⼊，Eclipse将⽣成⼀个模板XML⽂件。这样⽅便你在别的Eclipse⾥⾯使⽤。

在下⾯的窗⼝画⾯中，点击【Export】：

给我们的template取个名称：

单击【保存】按钮进⾏保存。同样，我们在下⾯的画⾯中点击按钮【Import】，引⼊我们的模板：

点击【Import】按钮，选择要引⼊的模板⽂件：

点击【打开】按钮，就将⾃定义模板引⼊了。

字符编码

统⼀的字符编码很重要！

如果我们认为直接修改html的meta标签的charset属性，来达到⽂件编码的统⼀，这只是⼀个办法，却不是好办法，因为你修改的只是浏

览器知道的⽂件编码⽅式⽽不是真正的⽂件编码⽅式。注意⼀定要让⽂件的编码⽅式和charset指定的⼀致，不然会出现乱码。当你修改了

charset之后，如果⽤⽂本编辑器，你可以到类似“格式”的菜单中修改⽂件的编码⽅式。

使⽤Eclipse，你可以在File->Properties找到：

修改Textfileencoding与你的charset⼀致。我们CMD项⽬使⽤【UTF-8】，因此这⾥⽆需修改。

但是，这样⼀个个⽂件设置太⿇烦了！因为我们的项⽬⽂件通常使⽤统⼀的编码，所以我们可以指定⼀种默认的⽂件编码⽅式，这可以减少

很多⿇烦，正如前⾯所说，IDE可以帮我们减少这种⽆谓的⿇烦。

Window->Preference->Web->HTMLfiles

这⾥你可以找到Encoding，设置为你的项⽬⽂件的统⼀编码。

然后在模板⾥⾯charset的值修改为${encoding}，这样新建⽂件的时候会根据上⾯Encoding的值⾃动写⼊编码⽅式。

其他设置

配置注释上的⽇期格式：

如下图可以看到我们⾃定义的配置中，在注释的⽇期上默认是按照我当前OS设定的格式来显⽰的，显⽰为【2019年7⽉23⽇】：

但是，如果OS变为英⽂系统，或者⽇期格式为其他类型的话，注释就不统⼀了，这⾥我们通过修改⾃定义模板⾥的【${date}】来达到我们

的⽬的，将【@CREATEDATE:${date}】修改为【@CREATEDATE:${d:date('yyyy/MM/ddHH:mm:ss')}】：

修改前：

修改后：

效果如下：

这样，⽇期的注释再也不会随着环境的改变⽽改变了~