html5开发工具eclipse搭建
在学习 HTML5 一段时间后，随着应用复杂程度的提升，普通文本编辑器已难以满足开发需求。此前，我一直使用 Notepad++ 作为 JavaScript 编辑器。对于许多新手而言，Notepad++ 是一款适合 HTML5 开发的工具，尤其是在懂得使用其强大插件的情况下。然而，尽管 Notepad++ 功能强大，但它无法提供良好的 HTML5 支持。并且，随着工程代码量的增加，简单的文本编辑器难以对整个工程的所有文件进行有效维护。
为何选择 Eclipse
市面上有很多适合 HTML5 开发的工具，其中不乏优秀的选择，如 Webstorm 和 Dreamweaver 等。Dreamweaver 对 HTML5 的支持不错，但它似乎更适合用于制作网页，而非开发应用。Webstorm 是一款强大的集成开发环境（IDE），对 HTML5 支持良好，非常适合应用开发，例如使用 Webstorm 开发 cocos2d - html5 游戏就十分便捷。
但这些都是商业软件，你可以选择购买正版，当然也有不少人会使用破解版或免费试用版，只要能满足需求即可。如果要找一款免费的优秀 IDE，Eclipse 无疑是首选。可能有人会疑惑，Eclipse 不是主要用于 Java 开发吗？实际上，Eclipse 平台提供了多种语言的开发工具，只是在 Java 开发领域更为知名。Eclipse 支持基于 J2EE 的动态 Web 开发，同时也支持静态 Web 开发。HTML5 应用既可以看作是静态 Web 程序，若应用需要服务器支持，也能做成动态 Web 程序。因此，使用 Eclipse 开发 HTML5 应用完全可行。
准备工作
下载
你需要下载一个 Eclipse，可点击这里下载最新版的 Eclipse。建议下载最新版的 Eclipse，这里推荐使用“Eclipse IDE for Java EE Developers”，它包含动态 Web 开发包，对于使用 J2EE 开发网站的人员来说非常实用。同时，建议下载压缩包版。
安装和配置
如果仅需开发 HTML5 应用，无需配置 Java 环境。不过，若你并非 Java 开发人员，不太推荐使用 Eclipse 作为 HTML5 开发工具，因为 Eclipse 没有专门为静态 Web 开发提供特定工具，在此情况下使用它可能有些大材小用。
若下载的是压缩包，直接解压即可。Eclipse 几乎无需过多配置，首次启动时选择工作空间即可。工作空间是指所有工程创建时默认所在的目录。
创建工程
- 打开 Eclipse，通过菜单选择“File -> New -> Project...” 或者 “File -> New -> Other...”。此时会弹出一个窗口，显示所有可选的项目类型。
- 选择 “Web -> Static Web Project”，然后点击 “Next”。
- 填写项目名称，例如 “Html5Demo”，再点击 “Next”。
- 填写 “content folder” 名称，如 “myHtml5”。这个 “content folder” 是应用所在的根目录，填写完成后点击 “Finish”。
添加文件
- 右键点击 “content folder” 的名称，选择 “New -> HTML File”。
- 将 “File name” 填写为 “index” 或者 “index.html”。“index.html” 是主页面，不建议使用其他名称，因为它与其他页面有所不同。
- 点击 “Next”，此时会出现 HTML 文件版本的选择界面。不同版本使用不同的模板，我们也可以修改和创建自己的模板，后续会详细介绍。
- 选择 “New HTML File (5)”，然后点击 “Finish”。
- 打开 “index.html”，你会看到自动生成的代码。由于模板可能经过修改，你的代码与示例不同也属正常。
至此，开发环境的搭建基本完成。使用类似方法，可在 “content folder” 下创建其他 HTML 文件、CSS 文件、JS 文件或文件夹，以丰富应用。你还可以将库或引擎添加到工程中，例如我的 box2d 游戏项目的目录结构如下（此处应补充具体目录结构）。
配置
模板
许多新手不理解 HTML5 开发为何要使用开发工具，这就如同刚入门的网页开发人员一样。使用开发工具主要是为了方便和便于维护。那些在入门时反复编写的代码，没人愿意再逐个手动输入。模板是提高开发效率的有效工具，能让开发人员专注于最重要的部分。
配置 HTML 模板的方法很简单：
- 选择 “Window -> Preferences”，会弹出一个对话框。
- 选择 “Web -> HTML Files -> Editor -> Template”。在这里可以看到 “HTML5” 模板，“Name” 表示模板名称，“Context” 表示模板的使用环境，“Description” 为描述信息。
- 虽然可以点击右边的 “Edit” 按钮修改已有模板，但不建议这样做。更具个性的做法是点击 “New” 按钮，新建一个自定义模板。
- 点击 “New...”，填写模板的名称、描述，选择使用环境为 “New HTML”。
- 根据个人习惯或需求，粘贴或写入模板代码，然后点击 “OK”。此时模板列表中会出现你定义的模板。
- 你可以将模板导出或导入，Eclipse 会生成一个模板 XML 文件，方便在其他 Eclipse 中使用。点击 “Export”，在弹出对话框中填入文件名并确定。选中新建的模板，点击 “Remove” 可移除模板；点击 “Import”，选择刚刚导出的模板 XML 文件并确定，模板即可恢复。若想查看模板效果，新建一个 HTML 文件进行测试。
字符编码
若想修改文件编码，直接修改 “charset” 并非最佳方法，因为这只是修改了浏览器识别的文件编码方式，而非真正的文件编码方式。务必确保文件的编码方式与 “charset” 指定的一致，否则会出现乱码。若使用文本编辑器，修改 “charset” 后可在类似 “格式” 的菜单中修改文件编码方式。
使用 Eclipse 时，可通过 “File -> Properties” 进行修改。将 “Text file encoding” 修改为与 “charset” 一致，然后点击 “OK”。为避免麻烦，由于项目文件通常使用统一编码，可指定默认的文件编码方式。选择 “Window -> Preference -> Web -> HTML files”，找到 “Encoding”，将其设置为项目文件的统一编码。然后在模板中把 “charset” 的值修改为 “${encoding}”，这样新建文件时会根据 “Encoding” 的值自动写入编码方式。