WebStorm-精要-全-

WebStorm 精要（全）

原文：zh.annas-archive.org/md5/877760a9c4c300b84f0f06b330101613

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

充分利用 WebStorm 的功能优势，构建更好的 JavaScript 应用程序！

开发者称 WebStorm 为“最智能的 JavaScript IDE”，这并非夸张。它超越了所有竞争对手，并提供了一些非常有趣的功能，如智能代码辅助、调试和测试、各种工具的无缝集成、版本控制集成等。

本书旨在帮助读者充分利用 WebStorm 为前端开发世界带来的所有功能和可能性。

我们将遍历所有当前技术，从简单的网站到使用 Angular 和 Meteor 构建的单页应用，再到使用 HTML5、JavaScript 和 CSS 构建的原生移动应用。我们还将介绍一些 WebStorm 的强大功能，这些功能将帮助我们提高生产力并增强开发者体验！

本书涵盖的内容

第一章, WebStorm 入门, 简明扼要地介绍了 WebStorm 10 及其新特性。它指导你安装 WebStorm，带你了解其工作区，讨论如何设置新项目，使你熟悉其界面和实用功能，并描述了如何根据需要自定义它们。

第二章, 利用智能功能提高效率，揭示了 WebStorm 最独特的功能，这些功能是提高你在构建 Web 应用中的效率的核心。

第三章, 开发简单的网页, 介绍了通过模板导入现有项目、提供 Web 应用和使用文件监视器来设置新项目的过程。

第四章, 使用包管理器和构建自动化工具，描述了通过 WebStorm 内置功能使用包管理器和构建系统为你的应用程序构建。

第五章, AngularJS、React、Express 和 Meteor – 开发你的 Web 应用，专注于网络行业的尖端技术，并描述了使用 WebStorm 功能构建典型应用程序的过程。

第六章, 沉浸式移动应用开发，展示了如何使用 JavaScript、HTML 和 CSS 开发移动应用程序以及如何设置测试运行此移动应用程序的环境。

第七章, 分析和调试您的代码，展示了如何在 WebStorm 中直接执行调试、跟踪、性能分析和代码风格检查活动。

第八章, 测试您的应用程序，介绍了几种在 WebStorm 中使用一些最流行的测试库轻松执行应用程序测试的经过验证的方法。

第九章, 了解更多强大功能，是关于 WebStorm 内部提供的强大功能的第二部分。在本章中，我们关注一些有助于提高生产力和开发者体验的 WebStorm 强大功能。

你需要这本书什么

这本书将指导你安装所有必要的工具，以便跟随示例进行操作。你需要安装 WebStorm 版本 10 以有效地运行本书中提供的代码示例。

这本书面向的对象

本书旨在面向尚未了解 WebStorm 但在 JavaScript、Node.js、HTML 和 CSS 方面经验丰富的网络开发者，并且对 AngularJS 和 Meteor 等框架有相当的了解。

约定

在这本书中，你会发现许多文本样式，用于区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名如下所示：“将下载的 WebStorm-10*.dmg 磁盘镜像文件挂载为系统中的另一个磁盘。”

代码块设置如下：

html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0
}

任何命令行输入或输出都如下所示：

$ mkdir css
$ cd css

新术语和重要词汇以粗体显示。屏幕上看到的单词，例如在菜单或对话框中，在文本中如下所示：“本书中的快捷键基于 Mac OS X 10.5+ 方案。”

注意

警告或重要注意事项以如下框的形式出现。

小贴士

小贴士和技巧看起来像这样。

对于本书，我们概述了 Mac OS X 平台的快捷键，如果您使用的是 Windows 版本，您可以在 WebStorm 帮助页面 www.jetbrains.com/webstorm/help/keyboard-shortcuts-by-category.html 上找到相关快捷键。

读者反馈

读者反馈始终欢迎。告诉我们您对这本书的看法——您喜欢或不喜欢什么。读者反馈对我们很重要，因为它帮助我们开发出您真正能从中获得最大收益的标题。

要发送一般反馈，请简单地发送电子邮件到 <feedback@packtpub.com>，并在邮件主题中提及书籍的标题。

如果您在某个主题上具有专业知识，并且您对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南 www.packtpub.com/authors。

客户支持

现在您已经是 Packt 书籍的骄傲拥有者，我们有许多事情可以帮助您从购买中获得最大收益。

下载示例代码

您可以从 www.packtpub.com 下载您购买的所有 Packt 出版物的示例代码文件。如果您在其他地方购买了这本书，您可以访问 www.packtpub.com/support 并注册，以便将文件直接通过电子邮件发送给您。

勘误

尽管我们已经尽一切努力确保内容的准确性，但错误仍然可能发生。如果您在我们的书中发现错误——可能是文本或代码中的错误——如果您能向我们报告这个问题，我们将不胜感激。通过这样做，您可以节省其他读者的挫败感，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问 www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站或添加到该标题的勘误部分下的现有勘误列表中。

要查看之前提交的勘误，请访问 www.packtpub.com/books/content/support，并在搜索字段中输入书籍的名称。所需信息将出现在勘误部分的勘误下。

盗版

互联网上版权材料的盗版是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现任何形式的我们作品的非法副本，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过 <copyright@packtpub.com> 联系我们，并提供涉嫌盗版材料的链接。

我们感谢您在保护我们作者和我们为您提供有价值内容的能力方面的帮助。

问题

如果您在这本书的任何方面遇到问题，您可以通过 <questions@packtpub.com> 联系我们，我们将尽力解决问题。

第一章. WebStorm 入门

WebStorm 是由 JetBrains 为客户端和服务器端 Web 开发设计的完整 JavaScript 集成开发环境（IDE）。它基于 IntelliJ IDEA 构建；WebStorm 继承了所有其功能和特性，您可以使用面向 Web 的语言，如 JavaScript、HTML 和 CSS，以及利用对开发者至关重要的能力，如重构、调试和版本控制管理。此外，WebStorm 原生支持 Node.js，并包含来自先前版本的一些创新，如对 AngularJS、CoffeeScript 和 TypeScript、LESS 和 SASS 的支持，以及其他优秀功能。

本书旨在帮助您了解 WebStorm 10 提供的新功能，并使用 WebStorm 利用前沿的 Web 技术。您将看到如何开发高质量的 Web 应用程序，并发现 Web 开发过程中的最佳实践和节省时间的技巧。最终，您将获得所有改变您 Web 开发体验所需的技能。

在本章中，您将执行以下操作：

• 查看 WebStorm 10 的新功能

• 安装和配置 WebStorm

• 熟悉 WebStorm 的工作空间

• 设置和运行一个简单的项目

• 探索 WebStorm 的设置和偏好

WebStorm 10 的新功能有哪些？

WebStorm 倾向于不断改进，因此不断吸收前沿技术，而第 10 版则非常具有代表性，带来了用于全面 Web 开发的令人印象深刻的先进功能：

• 改进的 JavaScript 支持：在这个版本的 WebStorm 中，JavaScript 的支持得到了改进，适用于大型项目，具有更快的代码高亮和自动完成功能，增强了 ECMAScript 2015 支持，等等。

• TypeScript：这个 WebStorm 的新版本支持 1.4 和 1.5 版本，并内置了编译器

• Spy-js 改进：WebStorm 10 增加了创建应用程序依赖图和跟踪编译为 JavaScript 的语言的可能性

• Grunt：您可以在 WebStorm 中轻松导航和编辑作业。Grunt 集成已重新设计，无论您是否决定为项目使用 Grunt 或 Gulp，都能提供一致的用户体验

• 实时 Dart 分析视图：您现在可以通过 Dart Analysis Server 对代码进行即时分析。所有结果将直接在编辑器中显示。

在撰写本书时，JetBrains 已经准备发布 WebStorm 11，它将带来一些酷炫的功能，例如 Yeoman 集成、高级 NPM 集成、Webpack 支持、AngularJS 2 支持，以及改进的 JSX 支持等。

安装 WebStorm

我相信您已经对这些功能感到好奇，现在渴望尝试 WebStorm 10 来利用它们。我们需要安装 IDE。您可以直接在 WebStorm 网站上找到下载包：www.jetbrains.com/webstorm/。

WebStorm 最强大的优势之一是它是跨平台的。您可以在以下操作系统上运行 WebStorm：

• OS X 10.5 或更高版本，包括 10.10

• Microsoft Windows 8/7/Vista/2003/XP (包括 64 位)

• GNU/Linux 带有 GNOME 或 KDE 桌面

此外，您的机器应该具有以下配置，以便无痛苦地运行 IDE：

• 至少 512 MB 的 RAM（建议 1 GB 的 RAM）

• Intel Pentium III/800 MHz 或更高（或兼容）

• 最小屏幕分辨率为 1024 x 768

• Oracle (Sun) JDK 1.6+

根据操作系统，安装过程略有不同，但仍然很简单。

在 Mac 机器上，您应该：

1. 将下载的WebStorm-10*.dmg磁盘映像文件挂载为系统中的另一个磁盘。

2. 将 WebStorm 复制到您的Applications文件夹。

在 Windows 机器上，您应该：

1. 运行下载的WebStorm-10*.exe文件，该文件将启动安装向导。

2. 按照向导建议的所有步骤进行操作。

在 Linux 机器上，您应该：

1. 使用以下命令解压缩下载的WebStorm-10*.tar.gz文件：

   tar xfz WebStorm-10*.tar.gz
   
   

2. 将提取或解压缩的存档文件夹移动到所需位置。

3. 从 bin 子目录中运行WebStorm.sh。

配置 WebStorm

为了完成安装并开始使用 IDE，您需要配置一些设置。

首先，建议您从先前的版本导入设置。然而，由于我们假设您是 WebStorm 的新用户，请点击以下截图所示的我没有 WebStorm 的先前版本或我不想导入设置按钮：

然后，您会看到一个WebStorm 许可证激活对话框的弹出窗口，在那里您可以激活您的许可证（如果有的话），购买它，或运行 30 天的 WebStorm 试用版。阅读许可证协议并接受所有条款。以下截图显示了这一点：

当您完成许可证后，在WebStorm 初始配置对话框中，您可以设置快捷键方案，这取决于您的习惯，IDE 主题，以及您更喜欢的编辑器颜色和字体——深色或浅色。使用点击预览部分来评估您设置的主题和颜色是否符合您的需求和偏好。本书中的快捷键基于Mac OS X 10.5+方案。以下截图恰当地捕捉了这次讨论：

用户界面

现在我们已经安装了 WebStorm，所以是时候探索其界面了——当你开发 Web 应用时应该停留的世界。理解界面对于你在 WebStorm 中得心应手并高效、愉快地使用它是必要的。

在开始之前

第一次运行 WebStorm 或之后，当没有打开项目时，你将看到一个如下所示的欢迎屏幕：

你可以创建一个新项目、打开一个现有项目、从版本控制系统检出代码，或者从配置下拉列表中选择要执行的操作设置。为了熟悉 WebStorm 用户界面，让我们创建一个新、简单的 HTML 项目。

创建新项目

要创建一个新项目，请按照以下步骤操作：

1. 点击创建新项目按钮，将打开新项目对话框。

2. 给我们的项目起一个名字，例如，MyFirstWebProject，并指定项目文件所在的文件夹，可以是手动指定，也可以通过点击浏览（…）按钮选择文件夹。

3. 然后，将项目类型字段保留为空项目值——目前我们只是沉浸于界面，并不创建真正有用的东西——并点击确定按钮。以下截图展示了这些步骤：

WebStorm 工作区

WebStorm 主窗口打开。它可以直观地分为七个逻辑部分，如下面的截图所示：

不仅仅简单介绍它们，让我们创建一个非常简单但相当有趣的项目——使用谷歌地图自动定位你。在前面展示的图片中，你可以看到我们即将完成的效果。因此，完成本节后，你将拥有相同的视图。

现在，你所看到的是以下内容：

• 菜单栏（1），其中包含许多选项，包括标准的文件、编辑、视图选项以及 WebStorm 特定的代码、重构、运行和版本控制选项。

• 主窗口分为两个明显可区分的部分：

  • 左侧的项目工具面板（4），在这里你可以看到你的项目结构和文件。你现在只看到一个带有项目名称的行，但在图片中，你已能看到我们项目的层次结构。项目工具面板与另一个界面元素相关联，即工具标签（3），我稍后会对其进行描述。

  • 右侧的编辑面板（5），在这里你将输入你的代码。

• 在这两个面板稍上方，你可以找到导航工具栏（2）。目前，它只有一个带有典型文件夹图标的前缀MyFirstWebProject和右箭头形状的后缀，但在图像中，有三个面包屑，每个面包屑代表下一个层次级别。导航工具栏非常适合快速导航和更好地理解项目文件层次结构。

• 在这两个面板的底部，你可以找到状态栏（7），其中包含一些辅助信息，例如表示编辑器中当前光标位置（以行:列格式）、行结束类型（Windows 风格的、Mac 风格的等等）、在编辑器中编码当前文件等等。

你的项目目前还是空的。让我们开始工作！通过在项目工具窗口中右键单击项目名称，向项目中添加一个 HTML 文件，并将其命名为map.html或简单地命名为map。这在上面的截图中有展示：

注意

注意，明确指出扩展名是可选的，因为它会根据所选字段的类型自动添加。

在编辑器中，你看到简单的 HTML5 起始代码。在那里，让我们标明地图将显示的位置。它将是一个具有map ID 的简单div元素：

<div id="map"></div>

注意

我建议你在至少前几章中避免简单地复制任何代码，这样你才能深刻感受到 WebStorm 为你提供的优势。

在body部分，开始输入<div>。当你输入每个符号时，你会看到 WebStorm 在当前内容内建议合适的标签。你可以用鼠标浏览下拉标签列表，并用Enter键选择一个标签，就像你可以添加属性到标签一样。当你输入>时，你会发现如果它是一个成对标签，WebStorm 会自动关闭该标签。你应该注意到 WebStorm 将光标直接放在你将进一步写入标签或属性值的地方；这稍微节省了一些时间。当你使用 WebStorm 工作时，不需要保存你的文件；默认情况下，当你更改框架时，它会监视文件的变化并自动保存它们。这种行为可以在首选项 | 外观和行为 | 系统设置对话框中设置/修改。

现在我们需要 JavaScript 代码来渲染地图。要添加它，首先在项目根目录下创建一个新的目录，名为js，并在其中添加一个 JavaScript 文件，名为map.js。它将在新标签页中打开，并包含关于作者和创建时间的注释。用以下代码填充该文件：

var map;

function initialize() {
    var mapOptions = {
        zoom: 10
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'I am here!'
            });
            map.setCenter(pos);
        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        handleNoGeolocation(false);
    }
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }
    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };
    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

我们刚刚创建的代码使用了 Google Maps API 的功能，在 HTML 页面上渲染地图，定位你，并在那里显示我在这里！的消息。

现在，让我们关注一个更多的工作区元素。它位于 IDE 的几乎底部（6）。这让你想起了什么吗？是的，它是你操作系统的标准终端，集成到了 WebStorm 中。你可以通过点击左下角的 终端 按钮，或者在点击 图标时，从下拉选项列表中选择 终端 选项来激活它，如下面的截图所示：

终端打开后，你可以像使用操作系统内置的终端一样使用它。我希望你通过 WebStorm 终端创建一个名为 css 的目录来保存 map.css 文件。只需执行以下命令，css 目录和 map.css 文件就会出现在 项目 工具面板中：

$ mkdir css
$ cd css

现在，你将有一个名为 css 的新目录。在这个文件夹中，从上下文对话框或 文件 | 新建 菜单创建一个名为 map.css 的新 CSS 文件。使用终端而不是上下文菜单操作，或者反之，没有优势。你使用哪种方式取决于你，但既然我们正在探索一个对你来说新的工具，WebStorm，我将尽可能使用其界面。

现在在项目结构层次中双击 map.css 文件，并填充以下代码：

html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0
}

现在我们需要添加最后的润色——我们应该告诉 HTML 使用我们的 CSS 和 JavaScript 文件，并指出 Google Maps API 的位置。我们可以通过简单地添加链接和脚本标签到 head 部分来实现。就像之前描述的那样，你可以使用 WebStorm 的代码补全功能来加快你的代码输入。现在我想提到一个在这里非常关键的功能（我们将在下一章详细讨论 WebStorm 的智能代码补全）。它涉及到那些指向其他项目文件的属性——在我们的例子中，是 src 和 href 属性。没有必要手动搜索这些标签要指向的文件（在大型项目中这一点尤其值得赞赏）——WebStorm 会为你完成所有这些。当你已经在引号之间并等待输入属性值时，只需简单地按 Ctrl + Space（在 Windows 上）/ Ctrl + Space（在 Mac 上），WebStorm 就会显示在这个上下文中可能的所有文件。如果文件太多，你可以简单地开始输入文件名，WebStorm 的智能补全也会发挥作用。当然，这只是 WebStorm 可以提供的一小部分。你将在下一章熟悉一系列智能技术。

因此，生成的 HTML 代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Where am I?</title>
    <link href="css/map.css" rel="stylesheet" type="text/css">
    <script src="img/js?v=3.exp" type="text/javascript"></script>
    <script src="img/map.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

最后但同样重要的界面元素是工具标签页（3），我之前已经提到过，但现在，我们才能看到使用它的好处。之前，我们在项目标签页，在那里我们可以看到文件和目录层次结构。切换到结构标签页，对于每个文件——map.html、map.js和map.css——你将看到以下内容：

这也是一个层次结构，但不是文件系统元素的层次结构；这是一个基于内容层次的。对于 HTML，这意味着标签层次结构；对于 CSS，所有样式都被列举出来；对于 JavaScript，你可以看到所有具有参数的对象和函数的信息。此外，点击任何一行会直接将你带到代码中该行元素声明或存在的地方。

哇，你的第一个 WebStorm 项目已经准备好了！现在，是时候运行我们的页面了。

运行应用程序

你还记得任何 IDE 的目的是尽可能多地自己执行操作，以便你只需专注于设计项目和编写代码，而不是执行大量琐碎但数量众多的操作吗？这意味着大多数时候，你将停留在 IDE 的四个墙壁之内，几乎在内部执行所有操作。如果你需要在 IDE 之外执行某些操作，考虑一下是否可以通过 IDE 执行它。然而，有一件事你需要离开 IDE——那就是你的浏览器。你需要看到你的结果，不是吗？但即使在这种情况下，WebStorm 也帮助你。当你输入 HTML 代码时，你注意到编辑器右上角有一个浏览器图标列表面板吗？这里是面板的样子：

是的，每个图标都是一个浏览器可执行文件的快捷方式，如果你点击任何一个，相应的浏览器就会打开当前页面。请注意，只有安装的浏览器才会打开。

你的当前位置在地址http://localhost:63342/MyFirstWebProject/map.html处打开页面。如果你看到一个空白页面，不要害怕。首先，你需要允许浏览器获取你的位置，因为它会询问你。然后，你将看到一个地图，其中你的位置会用文字我在这里来表示。

剩下的唯一问题是，localhost词后面的那个奇怪的数字是什么？WebStorm 提供了在默认端口63342上运行的简单 HTTP 服务器的功能。你可以在 IDE 设置中更改端口。

设置和偏好

到现在为止，我们将要讨论的是在 WebStorm 本身中自定义某些内容，而不是在代码中，所以我必须告诉你 WebStorm 提供的各种设置。

有两个类似但独立的设置窗口：

• 整个 IDE 的设置

• 当前项目的设置

对于第一种情况，要打开设置窗口，你可以简单地按Ctrl + Alt + S（Windows）或⌘ + ,（Mac），然后你会看到以下屏幕：

要访问项目设置，选择文件 | 默认设置，你将得到类似于 WebStorm 设置的界面，但可配置的选项列表较少。

注意

我应该立即说明，设置并不是每天都需要关注的事情，所以你不需要把它看作是必须完全配置的东西——在大多数情况下，一切都已经调整好了；此外，如果需要配置，它将以信息气泡的形式弹出，并提供直接链接到设置的链接。

如果你需要配置某些内容，你需要快速找到必要的设置。为此，开始在搜索字段中键入其名称，随着你键入，第一个匹配的设置会被突出显示，并显示相应的页面。

但让我们进一步浏览设置。我并不是要描述所有的设置，但我仍然会涵盖最重要的那些。

主题和颜色

在初始配置阶段，你选择了你希望 IDE 拥有的主题和颜色。也许在编程过程中，你意识到你最好使用另一个主题和/或颜色。

如果你想要更改 IDE 的主题，请进入外观与行为部分的外观子部分。在那里，你会找到一个主题下拉列表，你可以更改当前的主题，如下面的截图所示：

如果你想要更改 IDE 中某个部分的颜色，你可以进入编辑器部分的颜色与字体子部分，并尝试那里提供的各种参数，以找到适合你的那些。你可以通过点击应用按钮实时观察变化。以下截图很好地展示了这一讨论：

键映射

键映射是开发者必须知道并熟练掌握的东西，因为使用快捷键的熟练程度与开发速度直接成正比。很明显，每个人在每种情况下都有自己的键组合偏好。因此，IDE 应该考虑到定制键映射的必要性，以适应更多的开发者。

WebStorm 为你提供了全面的关键映射管理，你可以在外观与行为部分的键映射子部分访问它。对于 IDE 内部可访问的每个菜单项和命令，你都有机会更改默认的键组合。当然，WebStorm 会通过警告消息防止你覆盖和覆盖已存在的组合。

要添加新的快捷键或更改现有的快捷键，你只需要选择你要处理的选项，然后点击移除或/和添加键盘快捷键按钮——根据你的意图而定。然后，简单地按下你想要为某个动作设置的组合，这样就完成了。

这对那些从一种操作系统迁移到另一种操作系统或从一种 IDE 迁移到 WebStorm 的用户来说是个好消息。如果你已经习惯了之前工作区特定的快捷键映射，你需要首先检查快捷键映射选项列表，在那里你可以可靠地找到一个能满足你的选项。这些选项包括 Emacs、Visual Studio、Eclipse、NetBeans、Mac OS X、Linux、Windows 等等。

代码样式

在编辑器部分的代码样式子部分，你可以看到使用 WebStorm 编写代码时可以自定义每种语言的样式的可能性：JavaScript、CoffeeScript、CSS、Haml、JSON、Dart、XML、YAML 等等。

你可以更改的语言设置不计其数。你可以设置缩进大小、缩进类型，如果你使用制表符，还可以设置其大小，决定是否放置空格，如何执行换行，以及许多其他方面。在每种语言的定制面板上，你可以预览如果你更改了某些设置后你会得到什么。

语言与框架

在设置中有一个语言与框架部分，负责考虑使用的科技。在这里，你可以指定必要框架和语言解释器的可执行文件，设置运行时的默认参数，为它们添加包，等等。以下截图很好地概括了讨论内容：

插件

插件是 WebStorm 的重要组成部分，因为它们可以显著扩展 IDE 的核心功能。

注意

有选择性地安装插件，不要逐个安装。记住，你安装的插件越多，启动 IDE 所需的时间就越长，性能也会越差。但不要害怕安装插件——每个插件只会为你的 IDE 启动时间增加几十毫秒，除非你只安装必要的插件，否则你不会体验到性能下降。对于性能来说，10-15 个插件已经足够，也足以满足典型项目需求。

你可以在首选项窗口的插件部分管理插件，如下面的截图所示：

已经勾选的插件已经安装并可在 IDE 内部访问。如果你需要更多插件，有两种获取方式。你可以在线仓库中浏览它们，或者直接从磁盘安装已下载或已构建的插件。

安装 JetBrains 插件…窗口和浏览仓库…窗口之间的区别是，后者允许你安装在线仓库中可用的任何插件，无论是第三方还是 JetBrains 的。

在插件的安装过程中没有关于它的内容。你只需要找到你想要的，然后简单地点击从磁盘安装插件…按钮。

版本控制

任何开发过程，无论是网页、桌面还是其他任何形式，没有版本控制都是不可想象的。这促使集成开发环境（IDEs）整合各种版本控制系统，WebStorm 也不例外。WebStorm 不仅支持Git、Subversion、Mercurial、CVS和Perforce，还提供了与 GitHub 账户的绑定。此外，WebStorm 还提供了所谓的“本地历史记录”功能，通过 IDE 跟踪代码的任何更改，无需使用专门的版本控制系统。尽管这些版本控制系统之间存在差异，但 WebStorm 允许您以类似的方式使用它们。当然，作为一个 IDE，WebStorm 处理了许多问题，因此处理版本控制系统变得可视化，甚至比通过标准命令行还要简单。

您可以决定哪些操作需要确认（如下面的图像所示），指定哪些可以在后台运行，配置要忽略的内容，管理历史缓存处理等等。然后，您将能够仅通过快捷键就巧妙地管理您的版本控制系统。版本控制在下面的屏幕截图中展示：

Proxy

您可能需要在工作中使用 WebStorm。许多公司都在使用内部网络，所以您可能会发现，没有代理，您将无法执行大多数面向互联网的操作。还可能有其他一些因素阻止您在互联网上舒适地工作。因此，让我们学习如何在 WebStorm 中设置代理。

不要手动搜索代理设置的位置，让我们查询搜索框，输入单词proxy。它将立即显示代理设置的位置，并且只过滤出包含proxy的菜单部分。此外，它还会突出显示包含单词proxy的所有参数，这样我们就可以快速找到我们正在寻找的内容。

对于代理处理连接来说是一件小事。您需要填写此处显示的空白字段，然后点击应用按钮：

摘要

在本章中，您学习了如何安装并准备 WebStorm 以进行开发过程。我们实现了一个简单的 Web 应用程序，并通过我们创建的文件和执行的操作的例子，仔细审查了 WebStorm 界面以及自定义其最重要元素的方法。

在下一章中，我们将发现一些最基本且智能的功能，这些功能可以极大地提高您的效率，从而使 WebStorm 真正成为网页开发的利器。

第二章. 使用智能功能提高效率

在上一章中，您开始了熟悉 WebStorm 世界的旅程。您不仅了解了一些基本的东西，而且还使用几个功能创建了一个简单的项目，因此您现在有了使用 WebStorm 的第一手基本经验，现在是时候更进一步，培养您的技能了。

在本章中，我们将处理一些真正智能的功能，这些功能将使您能够从根本上改变您对 Web 开发的看法，并学习如何从 WebStorm 中获得最大收益。在本章中，我们将研究以下内容：

• 语法高亮

• 飞行中的代码分析

• 智能代码功能

• 多选功能

• 重构功能

• 高级导航

语法高亮

语法高亮功能是任何代码编辑器必须擅长的一项核心功能，因为即使是十几行未着色的代码也可能令人困惑，甚至令人烦恼。此外，您可以看到 WebStorm 如何执行高亮显示：

WebStorm 不仅整洁地突出显示代码，还提供了一组灵活的设置来做到这一点。这意味着您能够完全根据您的偏好自定义代码外观的每一个细节。您能够自定义 JavaScript、CoffeeScript 和 TypeScript、CSS 和 SASS/SCSS、JSON 和 XML 和 YAML 等的突出显示。

要配置语法高亮，请打开首选项窗口，然后转到编辑器部分的颜色与字体子部分，并选择要自定义其代码样式的语言或技术：

对于每个代码单元——关键词、标签、数字和单词、注释、标点符号、变量和函数声明——您都可以更改其外观——粗体或斜体，前景和背景颜色，字体效果等等。在配置面板下方，您可以找到一个预览面板，您可以在其中实时观察您所做的所有更改。此外，如果您知道您想自定义的代码单元是什么，但不知道它的名称，您只需在预览面板中单击任何符号或单词，它就会自动在选择代码单元名称的列表中选中，以及相同类型的所有单元都会闪烁，这样您就可以看到您选择了什么。

自定义后，您可以保存所有设置为新方案，以便这些设置可以应用于未来的项目，以及这个项目。为此，您只需单击设置上方的另存为...按钮，并为这个新的代码样式方案命名。

WebStorm 还能够检测您在特定上下文中使用的语言，并相应地突出显示代码。例如，如果您在 HTML 文件中编写 JavaScript 代码，WebStorm 将能够检测到这一点并正确地突出显示您的代码。

飞行中的代码分析

WebStorm 将在代码即时执行静态代码分析。编辑器将根据使用的语言和指定的规则检查代码，并在你输入时突出显示警告和错误。这是一个非常强大的功能，意味着你不需要外部代码检查器，并且可以快速捕获大多数错误，从而使像 JavaScript 这样的动态和复杂语言更加可预测和易于使用。

运行时错误和任何其他错误，如语法或性能，是两个需要考虑的因素。要调查第一个，你需要测试或调试器，而且很明显，它们几乎与 IDE 本身没有什么共同之处（尽管，当这些功能集成到 IDE 中时，这种协同作用会更好，但这不是重点）。你也可以用同样的方式检查第二种类型的错误，但这方便吗？想象一下，你需要在写下下一行代码后运行测试。这行不通！使用某种能够关注并分析每个输入的单词，以便在执行代码之前通知你可能的性能问题和错误、代码风格和工作流程问题、各种验证问题、警告死代码和其他可能的执行问题，不是更有效率和有帮助吗？WebStorm 是最适合这项工作的。它对代码的每一行、每个单词进行深度分析。此外，你不需要在 WebStorm 扫描你的代码时打断你的开发过程；这是即时进行的，因此被称为：

WebStorm 还允许你按需获取完整的检查报告。要获取它，请转到菜单：代码 | 检查代码。它会弹出指定检查范围对话框，你可以定义你想要检查的确切内容，然后点击确定。根据所选内容和大小，你可能需要等待一段时间，直到进程完成，你将看到详细的结果，其中终端窗口位于：

如果需要，你可以展开所有项目。在检查结果列表的右侧，你可以看到一个解释窗口。要跳转到有错误的代码行，你只需点击必要的项目，然后你会翻转到相应的行。

除了简单地指示某个问题所在的位置，WebStorm 还明确地建议了消除这个问题的方法。你甚至不需要自己做出任何更改——WebStorm 已经提供了快速解决方案，你只需点击即可，它们将立即插入到代码中：

我们将在第七章中更深入地探讨代码分析和质量，分析和调试你的代码。

智能代码功能

作为一款集成开发环境（IDE）并且倾向于智能，WebStorm 提供了一组非常强大的功能，您可以使用这些功能显著提高效率并节省大量时间。

最有用且热门的功能之一是代码补全。WebStorm 持续分析并处理整个项目的代码，并智能地建议当前上下文中适当的代码片段，甚至更多——在方法名称旁边，您还可以找到这些方法的用法。当然，代码补全本身并不是一项新鲜的创新，但 WebStorm 在执行它时比其他 IDE 更智能。WebStorm 可以自动完成许多事情：类和函数名称、关键字和参数、类型和属性、标点符号，甚至文件路径。

默认情况下，代码补全功能是开启的。要调用它，只需开始输入一些代码。例如，在下面的图像中，您可以看到 WebStorm 如何建议对象方法：

您可以使用鼠标或上和下箭头键在建议列表中导航。然而，列表可能非常长，这使得浏览起来不太方便。为了减少列表长度并仅保留当前上下文中适当的内容，请继续输入下一个字母。除了仅输入方法的初始连续字母外，您还可以从方法名称的中间输入某些内容，或者甚至使用驼峰式风格，这通常是输入真正长方法名称最快的方式：

由于某种原因，代码补全可能无法自动工作。要手动调用它，请按 Mac 上的Ctrl + Space或 Windows 上的Ctrl + Space。

要插入建议的方法，按Enter键；要将当前光标位置旁边的字符串替换为建议的方法，按Tab键。如果您希望该功能还能为该方法安排正确的语法环境，请按 Mac 上的Shift + ⌘ + Enter或 Windows 上的Ctrl + Shift + Enter，将插入缺失的括号和/或新行，直到达到当前代码语言的样式标准。

多选功能

使用多选（或简称为多选）功能，您可以同时将光标放置在几个位置，当您输入代码时，它将应用于所有这些位置。例如，您需要为每个表格单元格添加不同的背景颜色，然后使它们的宽度为二十像素。在这种情况下，您不需要重复执行这些相同的任务，只需在<td>标签后放置光标，按Alt键，并将光标放入您打算应用样式的每个<td>标签：

现在您可以开始输入必要的属性了——它是bgcolor。请注意，WebStorm 即使在您没有在单行输入任何内容的情况下，也会在这里执行智能代码补全。您会得到bgcolor属性的空值，稍后您将单独填写它们。您还需要更改宽度，以便继续输入。由于单元格宽度被设置为固定大小，因此只需添加width属性的值即可。以下图像显示了示例：

此外，多选功能可以选择相同值或独立单词，也就是说，您不需要将光标放在多个位置。让我们通过另一个示例来查看这个功能。比如说，您改变了主意，决定将几个连续单元格的背景色改为边框色。您可能会立刻想到使用简单的替换功能，但您不需要替换所有属性出现，只需几个连续的即可。为此，您可以将光标放在您将要执行更改的第一个属性上，然后在 Mac 上多次点击Ctrl + G或在 Windows 上点击Alt + J，直到您需要。一个接一个地，相同的属性将被选中，您可以将bgcolor属性替换为bordercolor：

您也可以通过在 Mac 上点击Ctrl + command + G或在 Windows 上点击Ctrl + Alt + Shift + J来选择任何单词的所有出现。

要退出多选模式，您必须点击不同的位置或使用Esc键。

重构功能

在整个开发过程中，您几乎不可避免地需要使用重构。而且，您的代码库越大，控制代码就越困难。当您需要重构某些代码时，您很可能会遇到一些问题，例如命名遗漏或没有考虑到函数的使用。您已经了解到 WebStorm 执行彻底的代码分析，因此它理解什么与什么相关联，如果发生某些变化，它会收集它们并决定在其余代码中可以执行什么，不可以执行什么。让我们尝试一个简单的例子。

在一个大的 HTML 文件中，您有以下的行：

<input id="search" type="search" placeholder="search" />

在一个大的 JavaScript 文件中，您还有另一个：

var search = document.getElementById('search');

你决定将输入元素的id属性值重命名为search_field，因为它更不容易引起混淆。你可以在这里简单地重命名它，但之后你将不得不手动查找代码中所有search单词的出现。很明显，这个单词相当常见，所以你将花费大量时间识别当前上下文中合适的用法或不合适的用法。而且，你很可能忘记一些重要的事情，甚至还需要更多时间来调查问题。相反，你可以将这个任务委托给 WebStorm。选择要重构的代码单元（在我们的例子中，是id属性的search值），然后在 Mac 上点击Ctrl + T或在 Windows 上点击Ctrl + Alt + Shift + T（或者简单地点击重构菜单项）来调用重构此对话框。在那里，选择重命名…项，并输入所选代码单元的新名称（在我们的例子中是search_field）。要仅预览重构过程中将发生的事情，请点击预览按钮，所有要应用的变化将显示在底部。你可以遍历层次树，通过点击执行重构按钮应用更改，或者不应用。如果你需要预览，可以简单地点击重构按钮。你将看到id属性得到了search_field值，而不是类型或占位符值，即使它们具有相同的值，在 JavaScript 文件中你也得到了getElementById('search_field')。

注意

注意，尽管 WebStorm 可以执行各种智能任务，但它仍然是一个程序，并且所谓的“人工智能不完善”可能会引起一些问题，因此在执行重构时你应该始终保持谨慎。特别是，手动检查var声明，因为 WebStorm 有时也会将这些更改应用到它们上，但由于作用域的原因，这并不总是必要的。

当然，这仅仅是你通过重构能够实现的一小部分功能。重构功能允许你执行的基本操作如下：

上一张截图中的元素解释如下：

• 重命名…：你已经熟悉了这种重构。再次强调，使用它你可以重命名代码单元，WebStorm 会自动修复代码中所有对这些代码单元的引用。快捷键是Shift + F6。

• 更改签名…：此功能用于更改函数名称，以及添加/删除、重新排序或重命名函数参数，即更改函数签名。快捷键是 Mac 上的⌘ + F6，Windows 上的Ctrl + F6。

• 移动…：此功能使你能够在项目中移动文件或目录，并且它同时修复代码中对这些项目元素的引用，因此你不需要手动修复它们。快捷键是F6。

• 复制…：使用此功能，您可以复制文件、目录或甚至一个类及其结构，从一个地方复制到另一个地方。快捷键是F5。

• 安全删除…：这个功能非常有用。它允许你安全地从项目中删除任何代码或整个文件。在执行此重构时，你会被问及是否需要检查注释和字符串或所有文本文件中所需代码片段的出现。快捷键是 Mac 上的⌘ + delete，Windows 上的Alt + Delete。

• 变量…：此重构功能在所选语句或表达式的结果处声明一个新变量。当意识到某个表达式的出现次数太多，可以将其转换为变量，并且表达式可以初始化它时，这可能很有用。快捷键是 Mac 上的Alt + ⌘ + V，Windows 上的Ctrl + Alt + V。

• 参数…：当你需要向某个方法添加新参数并适当地更新其调用时，使用此功能。快捷键是 Mac 上的Alt + ⌘ + P，Windows 上的Ctrl + Alt + P。

• 方法…：在此重构过程中，所选代码块经过分析，通过分析检测到输入和输出变量，提取的函数将输出变量作为返回值。快捷键是 Mac 上的Alt + ⌘ + M，Windows 上的Ctrl + Alt + M。

• 内联…：内联重构与提取方法重构相反——它用它们的初始化器替换多余的变量，使代码更加紧凑和简洁。快捷键是 Mac 上的Alt + ⌘ + N，Windows 上的Ctrl + Alt + N。

高级导航

导航是任何 IDE 中最重要的功能之一，因为如果你不能快速找到或切换到你想要的任何东西，那么使用这样的程序几乎没有理由，因为没有节省时间的方面。

在一定程度上，我们检查了 WebStorm 提供的某些导航功能。它们是菜单面板、导航工具栏和工具标签。一切都很好，但我们仍然需要执行很多鼠标移动才能到达代码中的必要位置。我们将通过一些这些强大的导航工具来查看 WebStorm 如何帮助我们与代码一起工作。我们将根据它们可以帮助我们执行的动作类型来查看它们。

文件导航

这是一组快捷键，帮助我们高效地处理文件：

• 要导航到项目中的文件，在 Mac 上按Shift + ⌘ + O，在 Windows 上按Ctrl + Shift + N。

• 要在编辑器中打开的文件之间导航，在 Mac 上按Ctrl + Tab，在 Windows 上按Alt + Tab。

• 要查看最近打开的文件，在 Mac 上按⌘ + E，在 Windows 上按Ctrl + E。要查看最近更新的文件，在 Mac 上按Shift + ⌘ + E，在 Windows 上按Ctrl + Shift + E。

• 要导航到项目中的类，在 Mac 上按⌘ + O，在 Windows 上按Ctrl + N。

代码导航

这些快捷键旨在帮助我们导航并在源代码上快速执行任务：

• 要弹出文件的结构视图，请按 Mac 上的 ⌘ + F12 或 Windows 上的 Ctrl + F12。

• 要获取所选类的层次结构，请按 Mac 上的 Ctrl + H 或 Windows 上的 Ctrl + H。

• 要导航到项目中的声明，请按 Mac 上的 ⌘ + B 或 Windows 上的 Ctrl + B。

• 要导航到下一个方法，请按 Mac 上的 ⌘ + O 或 Windows 上的 Alt + 向下箭头键。要导航到上一个方法，请按 Mac 上的 ⌘ + O 或 Windows 上的 Alt + 向上箭头键。

• 如果您需要复制当前行，请按 Mac 上的 Ctrl + D 或 Windows 上的 Alt + D。

• 如果您需要注释/取消注释行，请按 Mac 上的 ⌘ + / 或 Windows 上的 Ctrl + /。

• 如果您需要将行移动到代码中的另一个位置，请按 Mac 上的 Shift + ⌘ + 向下/向上箭头或 Windows 上的 Ctrl + Shift + 向下/向上箭头。移动时也会保持语法正确性。

搜索导航

我们可以使用搜索导航快速找到项目中所需的内容：

• 要在路径中查找内容，请按 Mac 上的 Shift + ⌘ + F 或 Windows 上的 Ctrl + Shift + F。要在路径中替换内容，请按 Mac 上的 Shift + ⌘ + R 或 Windows 上的 Ctrl + Shift + R。

• 要查找所选代码片段的所有用法，请按 Alt + F7。要查找当前文件中选定代码片段的用法，请按 Mac 上的 ⌘ + F7 或 Windows 上的 Ctrl + F7。

• 要打开最后使用的工具窗口，请按 F12。要关闭当前活动的工具窗口，请按 Shift + Esc。

注意

要获取有关快捷键的更多信息，请阅读在线文档：www.jetbrains.com/webstorm/help/keyboard-shortcuts-and-mouse-reference.html.

小贴士

下载示例代码

您可以从您在 www.packtpub.com 购买的所有 Packt 书籍的账户中下载示例代码文件。如果您在其他地方购买了这本书，您可以访问 www.packtpub.com/support 并注册以将文件直接通过电子邮件发送给您。

摘要

在本章中，您学习了 WebStorm 的最显著特点，这些特点是提高您构建 Web 应用程序效率的核心组成部分。

在下一章中，我们将看到如何借助项目模板构建简单的网页，并使用版本控制系统（VCS）和文件监视器。

第三章. 开发简单网页

现在你已经熟悉了 WebStorm 的一些智能功能，我们将专注于使用其辅助创建简单的网页或项目。

到本章结束时，你将能够借助模板快速开始项目，并在 WebStorm 中使用现有的代码库。你还将学习版本控制系统的基础知识，以及如何使用 WebStorm 处理像 SASS、LESS 或 TypeScript 这样的转换语言。

在本章中，我们将研究以下主题：

• 使用模板创建新项目

• 导入现有项目

• 在 WebStorm 中使用版本控制系统

• 文件监视器

使用模板创建新项目

而在前一章中，我们是从零开始创建新项目的，现在我们将使用一些流行的模板来帮助我们更快地开始。当你使用模板时，你的项目将自动配备所有必要的库和文件。在 WebStorm 10 中，你可以使用以下模板创建项目：

• HTML5 模板

• Web Starter Kit

• React Starter Kit

• Bootstrap

• Foundation

• AngularJS

• Node.js express 应用

• PhoneGap/Cordova 应用

• Meteor 应用

• Dart

在以下章节中，我们将关注一些流行的简单框架，如 Bootstrap、Foundation、HTML5 模板和 Web Starter Kit。对于这些框架中的每一个，我们将创建或使用一个简单的框架示例。

Bootstrap

	"Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于在网络上开发响应式、移动优先的项目"
	--getbootstrap.com/

Bootstrap 是由 Twitter 创建的框架，用于更快地创建设备响应式网络应用。它可以看作是一组可用于创建不同元素的 CSS 类。

要基于此框架开始一个项目，我们首先需要从 文件 菜单或欢迎屏幕中选择 新建项目。然后，在新屏幕中选择 Twitter Bootstrap 作为模板。填写项目所需的位置，然后点击 创建：

这将创建一个使用所选框架版本的工程，并将创建一个包含内置文件的工程。

由于 Bootstrap 不附带示例页面，我们将自己创建一个简单的页面。在根项目目录中，创建一个 index.html 文件，并填写以下代码。我强烈建议你手动输入所有内容，这样你可以更好地理解自动完成功能如何帮助你进行编码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebStorm Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

</head>
<body>
<header class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <nav role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">WebStorm Essential</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Authors</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">Chapter <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Chapter 1</a></li>
                                <li><a href="#">Chapter 2</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Chapter 3</a></li>
                            </ul>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                        </form>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
</header>
<div class="jumbotron presentation">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h1>WebStorm Essentials</h1>

                <p>
                    Exploit the functional power of WebStorm for faster building of better JavaScript applications.
                </p>
            </div>
            <div class="col-sm-4">
                <img src="img/~text?txtsize=47&txt=WebStorm&w=500&h=250"
                     class="img-responsive thumbnail">
            </div>
        </div>
    </div>
</div>
<div class="container highlights">
    <div class="row">
        <div class="highlight-col col-sm-4">
            <div class="highlight-icon glyphicon glyphicon-user"></div>
            <h2>Audience</h2>

            <p>
                This book is intended for web developers with no knowledge of WebStorm yet experienced in JavaScript, Node.js, HTML, and CSS, and who are reasonably familiar with frameworks like AngularJS and Meteor.
            </p>
        </div>
        <div class="highlight-col col-sm-4">
            <div class="highlight-icon glyphicon glyphicon-flag"></div>
            <h2>Mission</h2>

            <p>
                The mission of the book is to show the readers that WebStorm is the number one choice for rapid developing web applications due to its advanced features and integrationf of a bunch of topical technologies into itself.
</p>
        </div>
        <div class="highlight-col col-sm-4">
            <div class="highlight-icon glyphicon glyphicon-check"></div>
            <h2>Objectives </h2>

            <p>
                To provide info on the newest features of the last version, and teach how to simplify the web development process using WebStorm Showcase, and then, to teach the best practices of the cutting-edge technologies.
            </p>
        </div>
    </div>
</div>
<hr class="feature-divider">
<div class="container">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam neque tellus, gravida vitae elementum sit amet, i porta augue, nec mattis sapien lacus a nulla. Vivamus in mauris at est porta congue sit amet sed ipsum. Aenean et dolor dolor. Sed faucibus sem interdum neque euismod, et tempor lectus eleifend.Pellentesque risus nulla, ornare sit amet semper vel, congue et justo. Donec a massa commodo, bibendum urna ac,suscipit ipsum. Sed dapibus quis nisl quis posuere. Vivamus id ipsum suscipit nisl semper convallis. Fusce lobortis, metus et interdum mattis, eros eros tincidunt ipsum, et faucibus elit eros vel ante. Nullam vitae mattis ligula, id scelerisque lacus. Donec mattis odio quis sem facilisis dapibus.
    </p>

    <p>
        Sed nec lobortis dui. Vestibulum a lectus eleifend, viverra metus eu, ornare sem. Curabitur eu tellus massa. Sed vestibulum dolor sed sodales ullamcorper. Nullam auctor maximus scelerisque. Praesent vulputate diam vel scelerisque commodo. Nulla maximus lectus malesuada vehicula aliquet.Nunc eleifend purus sit amet ante rhoncus maximus. Maecenas orci nisi, pretium in maximus quis, finibus sed sem.
    </p>

    <p>
        Integer lorem odio, feugiat eu faucibus eget, varius vulputate tellus. Duis convallis nibh ac ligula congue venenatis. Aenean dapibus condimentum quam, sed iaculis leo feugiat sit amet. Nunc eu nibh vestibulum tellus tincidunt pharetra at sed massa. Vestibulum tempor aliquet neque, et auctor turpis sollicitudin et. Aliquam acvarius ipsum, sit amet vehicula tortor.Nullam ac est nec ante scelerisque tincidunt.
    </p>
</div>
<footer class="footer copy">
    <div class="container">
        <p class="text-muted pull-right">Copyright &copy; 2015\. All rights reserved</p>
    </div>
</footer>
<script src="img/jquery.min.js"></script>
<script src="img/bootstrap.min.js"></script>
</body>
</html>

之后，我们需要创建 main.css 文件，并向其中添加以下规则：

.presentation{
    margin-top: 30px;
    background: #feca5c;
}

.highlight-col{
    text-align: center;
    padding: 0 40px;
}
.highlight-icon{background: lightgray;
    width: 140px;
    height: 140px;
    font-size: 60px;
    border-radius: 50%;
    padding-top: 35px;
}
.feature-divider{
    margin: 50px 0;
}

.copy{
    background: #f8f8f8;
    padding: 20px 0;
}

你可以看到，我们的 CSS 代码非常简洁，因为通过使用 Bootstrap，我们获得了所有必要的样式。我们唯一需要使用的是 Bootstrap 推荐的 HTML 标记。

现在我们已经创建了页面，我们可以点击浏览器图标来在所选浏览器中打开文件。这些浏览器图标出现在将鼠标悬停在 index.html 文件右上角时，如下所示：

WebStorm 将创建一个本地服务器，并在所选浏览器中打开页面。现在我们将在浏览器中看到以下页面：

我们使用 Bootstrap 框架中的一些样式创建了一个简单的页面。这个框架的一个主要优点是，我们的页面是响应式的，适用于各种设备。

Foundation

	"The most advanced responsive front-end framework in the world."
	--foundation.zurb.com/

Foundation 是一个类似于 Bootstrap 的框架，它提供了一个响应式网格和一组 UI 元素，我们可以使用它们来快速启动项目创建。

要开始一个项目，我们遵循与 Bootstrap 项目相同的步骤；但这次，我们选择 Foundation 作为项目模板，如下面的截图所示：

Foundation 包含一个预先创建的示例，因此如果我们想查看示例，我们必须在 WebStorm 中打开 index.html 文件。在项目中打开文件的一个快捷方法是使用按文件名打开文件对话框：在 Mac 上按 Shift + ⌘ + N，在 Windows 上按 Ctrl + Shift + N，然后开始输入你想要打开的文件名。

在打开的 index.html 文件中，我们必须点击浏览器图标，就像我们在 Bootstrap 示例中所做的那样，以便在浏览器中查看 Foundation 示例页面。

HTML5 Boilerplate

	"The web's most popular front-end template**HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package."
	--html5boilerplate.com

HTML5 Boilerplate 是一个模板，可以帮助你通过创建一些最重要的文件和导入一些库（如 normalize.css、jQuery 和 Modernizer）来快速开始你的项目。

要基于此模板创建一个新项目，我们必须从 文件 菜单或欢迎屏幕中选择 新建项目。然后，在新屏幕上，选择 HTML5 Boilerplate 作为模板。填写项目所需的位置并点击 创建：

HTML5 Boilerplate 包含一个示例页面；因此，要查看它，我们必须在 WebStorm 中打开 index.html 文件。在项目中打开文件的一个快捷方法是使用按文件名打开文件对话框，在 Mac 上按 Shift + ⌘ + N，在 Windows 上按 Ctrl + Shift + N，然后开始输入你想要打开的文件名。

一旦我们打开了 index.html 文件，我们可以点击浏览器图标来在所选浏览器中打开该文件。这些浏览器图标出现在你将鼠标悬停在打开文件右上角时。

你现在已经基于流行的 HTML5 框架创建了一个新项目，你可以开始更改和添加新文件来扩展你的项目。

Web Starter Kit

Web Starter Kit 是一个用于多设备开发的样板和工具模板。它在开发者网站上展示如下：

	*"构建出色的多设备网络体验的起点。使用 Web Starter Kit 开始你的项目，并确保你从一开始就遵循 Web 基本原则。"
	--developers.google.com/web/starter-kit/

现在我们将再次开始一个新的项目，但这次，它将基于 Google 框架。为此，我们将从 文件 菜单或欢迎屏幕中选择 新建项目，并将 Web Starter Kit 作为模板。

这个模板有更多功能和依赖项，因此我们需要安装所需的包和 Gulp。我们将全局安装 Gulp，使其对所有项目可用。为此，我们只需打开 WebStorm 内部终端并运行以下命令：

npm install
npm install gulp -g

一旦安装了所有包，你就可以开始开发了。Web Starter Kit 有三个开发阶段，你将使用它们。

第一个阶段是本地服务器开发阶段。要进入这个阶段，你必须在终端中运行以下命令：

gulp serve

以下截图显示了前面命令的输出：

运行此命令后，你应该在终端中看到前面的消息，并且浏览器会打开带有页面的窗口。注意记录 外部 URL，因为你可以使用它来测试跨多个设备的页面。只需将你的手机或平板电脑指向此 URL，工作时的浏览体验就会同步。

在这个阶段，以下工具正在运行：

• 实时预览: 这会监视文件的变化，并在浏览器中自动加载它们

• 浏览器同步: 这将在多个浏览器和设备上同步打开的页面

• JSHint: 这会扫描你的 JavaScript 代码并检查可能的问题

• Sass 编译: 你对 Sass 文件所做的任何更改，在页面通过实时预览重新加载后，都将编译成 CSS

• 自动添加前缀: 这会自动添加你样式中所必需的任何供应商前缀

第二个阶段是生产构建阶段。在这个阶段，你的页面将构建成生产版本。要运行这个阶段，请在终端中执行以下命令：

gulp

在构建阶段执行以下步骤：

1. 构建样式: 这将编译 Sass 并运行 autoprefixer。

2. JSHint: 这会扫描你的 JavaScript 代码并检查可能的问题。

3. HTML 构建：这会压缩 HTML 和 JavaScript。

4. 自动添加前缀：这会自动添加您样式中所必需的任何供应商前缀。

第三阶段是生产构建测试。在这个阶段，我们测试我们的生产构建以确保一切按预期工作。在这个阶段，您的网站将构建成一个生产版本，然后在一个浏览器中打开。要运行这个阶段，您必须在终端中输入以下命令：

gulp serve:dist

如您从示例页面中看到的，Web Starter Kit 是一个真正强大的平台，可以帮助您快速开始构建 Web 应用程序，特别是对于跨平台应用程序和响应式网站。

导入现有项目

在前面的章节中，我们已经基于 WebStorm 中可用的某些流行模板创建了新项目。在本节中，我们将专注于处理现有项目，并探讨两种使用现有文件或版本控制系统创建项目的方法。

从现有文件导入

有时，您可能想在您的驱动器上编辑现有的项目。为此，我们只需从欢迎屏幕或文件菜单中选择从现有文件创建项目。一旦选择此选项，我们将看到一个屏幕，我们需要选择一个场景：

在前面的对话框中，我们将面临以下场景：

• Web 服务器已安装在本地，源文件位于其文档根目录下：在这种情况下，我们假设我们已经安装了本地服务器，并且我们的项目位于服务器文档根目录内（例如，Apache Mac 中的文档根目录或 XAMPP 安装上的 httpdocs）。

• Web 服务器已安装在本地，源文件位于本地其他位置：在这种情况下，我们已经安装了本地服务器，但我们的项目位于服务器文档根目录之外。文件将在必要时被复制到服务器并同步。

• Web 服务器位于远程主机，文件可通过网络共享或挂载驱动器访问：我们选择此选项，使 WebStorm 通过网络从远程服务器将文件复制到本地驱动器，并围绕它们设置项目。

• Web 服务器位于远程主机，文件可通过 FTP/SFTP/FTPS 访问：选择此选项，使 WebStorm 通过 FTP、SFTP 或 FTPS 协议（例如托管账户）从远程服务器下载文件。

• 源文件位于本地目录，尚未配置 Web 服务器：如果您想在不使用任何 Web 服务器的情况下处理某个本地目录中的文件，请选择此选项。

我们将使用前一个列表中提到的最后一个版本，因为我们目前不想使用特定的服务器。选择版本后，我们将看到一个屏幕，我们需要选择项目目录页面，如下面的截图所示：

选择包含你的项目文件夹（在这个例子中，我们将使用之前创建的 TwitterBootstrap 文件夹），将其标记为 项目根，然后点击 完成。

导入现有项目从 VCS

在本节中，我们将探讨从 VCS 导入现有项目的一些方法。我们将导入一个现有的 Git 项目。

要这样做，我们必须从欢迎屏幕或 VCS 中选择 从版本控制检出。在这个演示中，我们将从 Git 中检出项目，所以选择该选项，如下一张截图所示：

现在指定 Git 仓库 URL。我们为此创建了一个 GitHub 项目；所以请继续填写为 github.com/srosca/youAreHere.git，然后点击 克隆。你还可以在此屏幕上 测试 你与 Git 仓库的连接。

这将在指定的目录内克隆 Git 仓库，然后提示你打开项目。

在这个例子中，我们专注于从 Git 仓库创建项目，但相同的步骤也可以用于其他版本控制系统，如 GitHub、CVS、Git、Mercurial 和 Subversion。

在 WebStorm 内部使用 VCS

如果你有一个与版本控制系统（VCS）关联的项目，你可以在 WebStorm 内部执行所有必要的操作。我们现在将介绍一些最常用的任务：

• 更新：我们可以通过从 VCS 菜单中选择 更新项目 来更新项目，如下面的图像所示：

  我们将看到一个对话框来选择更新策略。选择 分支默认 和 使用 Stash；点击 确定。这样，WebStorm 将使用应用分支的默认命令，并在 Git stash 中使用和保存更改。

• 添加：在提交文件之前，我们必须将它们添加到当前更改列表中。我们可以通过转到 版本控制 选项卡下的 本地更改 来添加文件。然后，从上下文菜单中选择 添加到 VCS：

• 提交：要提交文件，我们必须从 VCS 菜单中选择 提交更改 或使用快捷键 ⌘ + K 或 Ctrl + K：

  如果我们在 版本控制 部分选择了任何文件，那么提交将只预选择这些文件。

  我们还可以选择 提交并推送... 来提交并推送文件。

• 推送：如果我们已经提交了更改，我们可以通过转到 VCS | Git | 推送 来执行推送：

• 分支：WebStorm 在屏幕的右下角显示活动分支。我们也可以在这个菜单中执行所有与分支相关的任务（例如，创建新分支）：

• 历史记录：在 WebStorm 中，我们始终可以访问一个强大的历史查看器，我们可以看到所有的提交和分支。我们可以在 版本控制 部分的 日志 选项卡下访问它：

关于 WebStorm 和 Git 有一件事需要记住，即通过 UI 执行的所有任务实际上都是 WebStorm 在后台运行的 git 命令。您可以在 版本控制 部分的 控制台 选项卡中看到这些命令和所有执行的操作。

我们已经了解了 Git 集成系统，因为它是使用最广泛之一，但 WebStorm 也以类似的方式与其他 VCS 系统协同工作。

文件监视器

在当前的开发周期中，转译语言的影响越来越大。WebStorm 可以通过监视器帮助您轻松地处理这些文件。

我们将首先在 CSS 文件夹中创建一个 map.scss 文件。一旦创建并打开此文件，WebStorm 将通知我们有一个监视器可用，并要求我们添加监视器。将 map.scss 文件内 map.css 文件中的代码复制过来，然后点击 添加监视器：

一旦点击 添加监视器 按钮，我们将进入 新监视器 对话框，在那里我们选择此过程的设置：

一旦启动监视器，WebStorm 将监视 scss 文件中的更改并将其转换为 CSS 代码。

WebStorm 支持与各种第三方转译器集成，这些转译器执行以下操作：

• 将 Less、Sass 和 SCSS 源代码转换为 CSS 代码

• 将 TypeScript 和 CoffeeScript 源代码转换为 JavaScript 代码，可能还会创建源映射以启用调试

• 压缩 JavaScript 和 CSS 代码

注意

注意，WebStorm 不包含内置的转译器，但仅支持与您必须下载和安装到 WebStorm 外部的工具集成。

您可以在 首选项 | 工具 | 文件监视器 对话框中查看与当前项目关联的监视器列表。

摘要

在本章中，您学习了如何使用 WebStorm 通过模板快速启动新项目，以及如何使用编辑器中的现有代码库。

在下一章中，我们将通过 WebStorm 内置的功能学习如何使用包管理器和构建系统。

第四章：使用包管理器和构建自动化工具

在上一章中，我们专注于使用 WebStorm 模板构建简单的网页，并在编辑器中使用现有的代码库。

在本章中，你将学习 WebStorm 如何帮助我们使用一些可用于开发工作流程的包管理器和构建工具。你还将学习如何设置和使用以下内容：

• Node.js

• NPM

• Bower

• Grunt

• Gulp

在本章结束时，你将能够下载、安装、配置和使用像 NPM 和 Bower 这样的包管理器工具，以及像 Grunt 和 Gulp 这样的任务运行器。

Node.js

本章中所需的所有工具都在 Node.js 上运行，因此在前一部分，我们将确保一切设置正确。

首先，我们需要检查 Node.js 是否已安装。在终端窗口中运行 node -v 应该返回我们已安装的 Node.js 版本。如果你没有得到版本号，这意味着我们需要下载并安装 Node.js。遵循 nodejs.org/#download 提供的说明。

一旦我们确认 Node.js 已启动并运行，我们需要检查 WebStorm 是否已设置好与之协同工作。转到 首选项 | 插件 对话框，并确保 NodeJS 插件已被激活：

当插件被激活时，WebStorm 将为 Node.js 创建一个设置页面，并添加运行/调试配置。

可以在 首选项 | 语言与框架 | Node.js 和 NPM 下访问的设置页面，允许我们设置节点解释器和核心模块的源，如下面的截图所示：

如果你没有配置源，你需要点击 配置 并在下一个对话框中下载源。这使代码补全、引用和调试 fs、path、http 等节点核心模块成为可能。

一旦我们在系统上安装了 Node.js，我们就可以进入下一节，我们将学习如何在 WebStorm 内部使用 NPM。

使用 Node 包管理器安装节点包

NPM 是随 Node.js 一起提供的包管理器，使我们能够快速安装节点包，无论是全局安装还是针对当前项目。

从 Node.js 版本 0.6.3 开始，NPM 与 Node.js 一起捆绑并自动安装，因此我们不需要安装任何东西。我们可以在 www.npmjs.com/ 找到所有可用的包；每个包都有一个包含所有必要信息的描述页面。

全局安装软件包

全局安装使软件包在系统级别可用，以便在所有项目中使用。通常，我们会全局安装需要在多个项目中使用的工具，如转换器、压缩器或测试运行器，并从命令行使用这些工具。

要全局安装软件包，我们有两种选择：

• 使用全局选项从命令行运行安装：

  npm install -g <package>
  
  

• 在 Node.js 和 NPM 设置页面，从 包 部分选择安装图标 。在新屏幕中，选择你想要安装的包，并在选项字段中输入 -g：

在项目中安装包

在项目中安装的包仅对当前项目可用。当本地安装包时，我们必须手动创建 node_modules 文件夹，或在当前项目中初始化 npm 以避免意外结果。这是因为 NPM 会向上搜索文件夹树以查找初始化的项目，如果找到，就会在那里安装包。

要使用 NPM 初始化项目，我们必须在终端窗口中运行 npm init。这将询问有关你的项目的一些问题，如名称、版本、描述、作者等，然后创建 package.json 文件。

要在项目中安装包，我们有两种选择：

• 从命令行运行安装：

  npm install <package>
  
  

• 在 Node.js 和 NPM 设置页面，从包部分选择安装图标 。在新屏幕中，选择你想要安装的包。

与全局安装的包的唯一区别是我们不再使用 -g 选项。

注意

当我们有一个初始化的项目时，我们还可以在 package.json 文件中将安装的包指定并保存为依赖项或开发依赖项。为此，我们必须在终端命令或设置对话框中的选项字段中使用 --save 或 --save-dev 选项。

安装项目依赖项

如果你有一个项目或已下载现有项目，你必须从命令行运行 npm install 来安装依赖项。这将安装 package.json 文件中指定的所有模块。

使用 Bower

如前所述，NPM 为 node 模块和工具提供了一个包管理器。同样，我们还需要一个用于网络的包管理器。这个管理器被称为 Bower，这是一个允许我们安装我们网络项目所需的全部库、框架和包的工具。

在使用 Bower 之前，我们需要先安装它。我们将使用 NPM 并将其作为全局包安装，以便它对所有项目都可用。因此，打开终端并输入以下命令：

npm install -g bower

现在我们已经安装了 Bower，我们可以使用它来搜索和安装我们需要的包。要搜索包，我们可以使用在 bower.io/search/ 可用的在线工具，并通过使用 bower search <keyword> 命令在终端中搜索。

在使用 Bower 安装包之前，我们必须初始化项目，以便我们可以保存我们的依赖项。

在终端中运行 bower init，并回答问题以生成 bower.json 文件。

一旦我们初始化 Bower 来安装包，我们有两种选择：

• 第一种选项是在终端中运行安装命令，如下所示：

  bower install <packageName or source> 
  
  

  注意

  请注意，Bower 将在当前文件夹中安装包；所以在运行命令之前，请确保您在正确的文件夹中。

  Bower 可以将以下源作为包使用install：

  • 注册包名 bower install bootstrap

  • GitHub 缩写 bower install twbs/bootstrap

  • Git 端点 bower install git://github.com/twbs/bootstrap.git

  • URL bower install https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css

• 第二种选项是转到通过首选项 | 语言和框架 | JavaScript | Bower可访问的 Bower 设置页面，并从依赖项部分选择安装图标：

在打开的新屏幕中，搜索并选择您想要安装的包，如下截图所示：

在这两种情况下，无论是终端还是安装对话框，如果您想在bower.json文件中保存依赖项或开发依赖项，您必须在终端命令或对话框的选项字段中使用--save或--saveDev选项。

现在你已经学会了如何在 WebStorm 中与包管理器一起工作，你将学习如何安装和使用两个流行的任务运行器，Grunt 和 Gulp。

使用 Grunt

Grunt 是一个 JavaScript 测试运行器，它被构建来自动化我们在开发过程中必须运行的重复性任务。它可以用于任务，如压缩、编译、代码检查、单元测试或任何其他项目需要的任务。Grunt 生态系统有数百个插件可供选择。

在使用 Grunt 之前，我们需要全局安装 CLI。这不会安装 Grunt，但它将运行与配置文件Gruntfile.js相邻的 Grunt 版本。这样，我们可以安装多个版本的 Grunt。为了安装此工具，我们再次使用 NPM，因此，在终端窗口中运行以下命令：

npm install -g grunt-cli

在接下来的几个步骤中，我们将把 Grunt 添加到我们在第一章中使用的项目中。所以，请继续打开第一章中创建的项目，或者从 Git 仓库github.com/srosca/youAreHere获取它。

项目打开后，我们首先需要初始化 NPM，以便我们可以下载 Grunt 和必要的插件。在终端窗口中运行npm init并回答问题（您目前可以保留默认值）。这将创建保存我们未来依赖项所需的package.json文件。

现在我们需要为当前项目安装 Grunt；所以，运行以下命令：

npm install grunt --save-dev

接下来，我们必须在项目的根目录中创建Gruntfile.js配置文件，并用以下代码填充它：

module.exports = function(grunt) {
    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js', 'js/*.js' ],
            options: {
                globals: {
                    jQuery: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.registerTask('default', ['jshint']);

};

这创建了一个简单的任务，它对我们的.js代码执行简单的jshint。在我们使用此任务之前，我们还需要安装jshint Grunt 插件。因此，在终端中运行以下命令以安装并将其保存为开发依赖项：

npm install grunt-contrib-jshint --save-dev

现在，我们可以在终端中通过运行 Grunt 来运行任务，或者使用 Grunt 工具窗口。此窗口可以在工具菜单或侧边栏中找到：

如果我们双击任务或从上下文菜单中选择运行，任务将启动，输出将在运行窗口中显示：

如前一个截图所示，输出中已经存在一些错误。因此，在我们修复它们之前，让我们看看我们如何创建一个监视文件变化的任务，并在它们发生变化时运行jshint。为此，我们首先需要安装另一个 Grunt 插件来完成这个任务。所以，在终端窗口中，运行以下命令：

npm install grunt-contrib-watch --save-dev

在插件安装后，打开Gruntfile.js配置文件，在jshint任务之后加载npm任务，添加以下命令：

grunt.loadNpmTasks('grunt-contrib-watch');

我们必须将jshint任务强制选项设置为在出现错误时停止，因此请将以下代码添加到选项部分：

force: true,

现在在initConfig块中的jshint任务之后，添加一个新的任务：

watch: {
    files: ['<%= jshint.files %>'],
    tasks: ['jshint']
}

将新创建的任务添加到默认任务中，以便在监视之前运行jshint，这样我们就可以在更改任何内容之前看到结果：

grunt.registerTask('default', ['jshint, watch']);

如您所见，我们正在使用为jshint任务定义的文件。您最终的代码现在应该看起来像这样：

module.exports = function(grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js', 'js/*.js' ],
            options: {
                force: true,
                globals: {
                    jQuery: true
                }
            }
        },
        watch: {
            files: ['<%= jshint.files %>'],
            tasks: ['jshint']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['jshint', 'watch']);

};

现在在Grunt窗口中，如果我们点击刷新图标，我们会看到文件夹树已更改，反映了新添加的任务：

如果我们启动监视任务，我们会看到现在，在运行jshint之后，它将等待文件的变化。因此现在我们可以更改map.js文件，通过将内容变量定义移出if语句来修复错误：

function handleNoGeolocation(errorFlag) {
    var content;
    if (errorFlag) {
        content = 'Error: The Geolocation service failed.';
    } else {
        content = 'Error: Your browser doesn't support geolocation.';
    }
    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };
    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
}

在我们进行更改后，我们会看到如果我们通过按⌘ + S强制保存，Grunt 将检测到文件的变化，并将重新运行jshint任务。

请注意，在 WebStorm 中，当我们从当前窗口更改焦点或按⌘ + S时，文件会自动保存。

在本节中，我们使用 Grunt 和 WebStorm 自动化了我们的任务。接下来，我们将使用 Gulp 重新创建这个流程，并看看我们如何在 WebStorm 内部与之协同工作

使用 Gulp

Gulp 是另一个用于开发任务的任务运行器。在它所做的工作方面，它与 Grunt 类似，但它以不同的方式完成。它使用流将任务链接起来，通过将一个任务的输出粘贴到下一个任务作为输入；因此，它使用的 I/O 请求更少。这一的主要优势是 Gulp 比 Grunt 快得多。它还倾向于代码优先于配置的指定任务风格。

要看到它的实际效果，我们将把 Grunt 流重新创建为 Gulp。在我们这样做之前，我们需要安装它。打开终端并全局安装 Gulp：

npm install --g gulp

这将在全局安装 Gulp，因此我们可以在所有项目中使用它。我们仍然可以通过本地安装来为项目使用不同的 Gulp 版本。在终端中运行以下命令：

npm install --save-dev gulp

这将在项目中本地安装 Gulp，并将其保存为开发依赖项。这样，我们可以为正在工作的项目使用不同的 Gulp 版本。接下来，我们需要安装项目中需要的插件，因此，在终端中运行以下命令将它们作为开发依赖项安装：

npm install gulp-jshint --save-dev
npm install jshint-stylish --save-dev

我们需要创建一个 Gulpfile.js 文件来定义 Gulp 的任务；因此，请继续在根目录下创建它。一旦文件打开，创建以下内容：

var gulp = require('gulp');
var jshint = require('gulp-jshint');

gulp.task('jshint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(jshint.reporter('success'));
});

gulp.task('watch', ['jshint'], function(event) {
    gulp.watch('js/*.js', ['jshint']);
});

如您所见，Gulp 在定义任务时使用代码方法。文件打开后，我们可以通过从上下文菜单中选择显示 Gulp 任务来访问 Gulp 窗口：

这将打开一个类似于 Grunt 的窗口，列出所有可用的任务。从这个窗口中，我们可以启动监视任务，这些任务将监视文件的变化，并在有变化时运行 jshint。在下一张截图中，您可以看到 Gulp 窗口和作业的输出：

如您所见，Gulp 和 Grunt 在最终结果上存在一些相似之处，但在构建任务的方式上也有一些不同。

在本章中，我们创建了一些简单的自动化任务，但这可以做得更深入。您可以为开发过程中需要自动化的所有内容创建任务。

摘要

在本章中，您已经学习了现代 Web 开发包管理器和任务运行器的一些流程。现在您将能够快速将新包添加到项目中，将它们保存为依赖项，并为所有重复性工作创建任务。

在下一章中，我们将看到 WebStorm 如何借助 AngularJS、React、Express 和 Meteor 等框架帮助我们构建更复杂的应用程序。

第五章：AngularJS、React、Express 和 Meteor – 开发你的 Web 应用

在上一章中，我们学习了 WebStorm 在处理包管理器和构建工具时的帮助方式，以及现代开发的流程。

在本章中，我们将处理几个最基本且不断发展的 Web 框架和平台，并学习当与它们一起工作时，WebStorm 是多么不可或缺。我们将了解以下与 WebStorm 相关的技术：

• AngularJS：一个仅客户端的框架

• React：用于构建用户界面的库

• Express：一个针对 Node.js 的最小化 Web 框架

• Meteor：一个运行在 Node.js 之上的全栈框架

AngularJS

-- "Superheroic JavaScript MVW Framework AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with databinding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!"

--angularjs.org

如开发者网站所示，AngularJS 是一个仅客户端的框架，用于构建单页 Web 应用，旨在简化 Web 应用的开发和测试。在本节中，我们将通过创建一个非常简单的博客应用来了解 WebStorm 在使用 AngularJS 时提供的巨大帮助。

我们的应用将是一个简单的博客 CMS，它将执行以下任务：

• 显示条目列表

• 显示单个条目

• 添加新条目

首先，使用前几章中的步骤，创建一个新的空项目。在创建新项目时，你会注意到有一个名为AngularJS的项目类型。你可以在你的开发活动中使用它；它已经包含了所有必要的库和设置文件。然而，现在我们是从零开始创建一个博客，这样你可以看到各种操作可以执行的多重方式。

准备工具和库

一旦我们创建了我们的项目，我们需要安装我们应用的所有依赖项。我们将使用 AngularJS 库，一个名为 Angular Route 的路由库，以及一个像 Bootstrap 这样的样式库。对于安装过程，我们将使用 Bower。

我不喜欢 Bower 将组件安装到默认的bower_components目录中。因此，让我们创建一个.bowerrc文件，并指明我们希望我们的包被安装到vendor目录中，如下截图所示：

现在我们可以安装所有必要的包。首先，我们需要 AngularJS。在终端中输入并执行以下命令：

bower install angular.

这将在我们的 vendor 文件夹中下载 AngularJS，但我们仍然需要在 index.html 文件中包含它。在文件末尾的 body 部分打开此文件，添加一个 <script> 标签，然后简单地输入，例如，ang。使用自动完成功能让 WebStorm 查找必要的 .js 文件：

从现在起，WebStorm 将知道我们的应用程序是基于 Angular 的，ng- 自动完成和其他功能将在您的项目中工作。

然后，添加另一个 <script> 标签，在 src 属性中输入 "app/app.js"；这将是我们的应用程序的核心。该文件尚不存在，但您可以自动创建它。选择 src 属性中的文件名，然后点击 Alt + Enter 。然后，点击 创建文件 app.js 项，WebStorm 将在新打开的选项卡中为您创建缺失的文件。

接下来，让我们安装 Bootstrap。为此，您可以从终端窗口使用 Bower：

bower install bootstrap

接下来，就像我们处理 angular 源文件一样，将 Bootstrap 的 .css 和 .js 文件包含到您的项目中（分别使用链接和 <script> 标签）。由于 Bootstrap 使用 jQuery，因此它也将被安装，别忘了添加一个用于 jQuery 的 <script> 标签。

我们将在项目中使用的另一个库是 angular-route 库。因此，我们需要再次使用 bower 来安装它，并将其添加到 index.html 文件中：

bower install angular-route

我们迄今为止所进行的所有操作都应该导致以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyAngularApp</title>
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
</head>

<script type="text/javascript" src="img/jquery.min.js"></script>
<script type="text/javascript" src="img/bootstrap.min.js"></script>
<script type="text/javascript" src="img/angular.js"></script>
<script type="text/javascript" src="img/angular-route.js"></script>
<script type="text/javascript" src="img/app.js"></script>
</body>
</html>

沉浸在 AngularJS 中

现在，我们可以开始构建我们的应用程序了。打开 app.js 文件，声明一个新的模块名为 app，然后添加 ngRoute 作为依赖项：

angular.module('app', ['ngRoute'])
    .config(function($routeProvider){

        });
    });

以下截图是前面代码的输出：

您可以使用自动完成功能，这样您接下来编写的所有代码都将由 WebStorm 自动建议。这不仅通过消除手动编写一切的需要来减少开发时间，而且还有助于您更好地实现和决定在当前上下文中什么更合适：

然而，这并不是 WebStorm 为您提供的唯一帮助。WebStorm 提供所谓的快速模板，这使您能够快速编写一些标准代码。例如，在我们的案例中，我们需要指示三个路由——到条目列表、条目页面和添加新条目的页面。

这是通过 $routeProvider 构造来实现的，它可以包含某些参数。我们只需要两个参数，即 templateUrl 和 controller，在 when 条件内部。因此，您无需手动输入，只需简单地输入 ngrw 并按 Tab 键：

这将用以下代码替换 ngrw：

$routeProvider.when(' ', {
    templateUrl: '',
    controller: ''
});

此外，光标将直接放置在单词when之后的两个单引号之间。这看起来可能微不足道，但你不需要用鼠标进行任何不必要的操作。

我们最终的 app.js 文件代码应该如下所示：

angular.module('app', ['ngRoute'])
    .config([function($routeProvider){
        $routeProvider.when('/', {
            templateUrl: 'app/views/entries.html',
            controller: 'EntriesController'
        });
    });

现在新的应用程序模块已经创建，我们可以通过在 <body> 标签中添加 ng-app="app" 来将其绑定到 index.html 页面，当然，使用自动完成功能。最终的 <body> 打开标签应该如下所示：

<body ng-app="app">

我们还应该添加一个特殊的容器，让 Angular 能够渲染我们的模板。在 <body> 标签的打开标签之后插入以下代码：

<div class="container app-container">
    <div ng-view></div>
</div>

我们还创建了一个用于样式的容器 <div>。通过这个最后的更改，我们可以转向创建应用程序的功能。

加载初始条目

我们的应用程序将有一个预定义的主题列表，这些主题将在第一次加载时显示。因此，我们首先需要确保数据被加载到应用程序中。我们不会使用任何后端，以免使我们的应用程序复杂化。我们将使用静态的 JSON 文件来模拟服务器响应，这些文件将保存在数据文件夹中。对于主题列表，在 data 文件夹内创建一个 entries.json 文件，并填充以下内容：

[
  {
    "title" : "Hello, WebStorm!", "content" : "Today we are going to speak about WebStorm and its features"
  },{
    "title" : "Immersing into WebStorm", "content" : "WebStorm provides a bunch of advanced technologies, which help us increase our development efficiency"
  }
]

现在，我们需要创建一个存储数据的服务。在 app.js 文件中，创建一个新的 app.services 模块，并填充以下代码。我们将使用服务，以便我们的数据可以在多个控制器和视图中使用。你可以看到我们已经有了一个 add 方法，因为我们希望能够在我们的博客中创建新的条目：

angular.module('app.services', [])
    .service('store', function ($http) {
        var store = {
            entries: [],

            add: function (item) {
                this.entries.push(item);
            }
        };

        return store;
    });

接下来，我们需要修改 app.module 以包括新的依赖项；因此，在 ngRoute 之后，我们需要添加新的模块 app.services。我们还需要创建一个新的运行块，当应用程序启动时将加载初始数据。最终的代码应该如下所示：

angular.module('app', ['ngRoute', 'app.services'])
    .config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'app/views/entries.html',
            controller: 'EntriesController'
        });

    }).run(function ($http, store) {
        $http.get('data/entries.json')
            .success(function (data) {
                store.entries = data;
            });
    });

显示条目列表

对于我们的列表，我们需要一个用于数据的控制器和一个用于显示数据的视图。此外，由于我们想在主页上显示简短的摘要，我们还需要创建一个创建摘要文本的过滤器。

让我们从这个过滤器开始，这样我们就可以在视图中稍后使用它。在 app.js 文件中，添加以下模块用于过滤器：

angular.module('app.filters',[])
    .filter('summary', function($filter) {
        return function(item) {
            return item.split(" ").slice(0,5).join(" ");
        };
    });

此过滤器提取条目的全部内容，并仅显示前五个单词。实际上，这个过滤器是无差别的，它不关心接收到的内容；它会接受任何字符串，并从中返回前五个单词。再次强调，在我们创建了这个新模块之后，我们需要将其添加为应用模块的依赖项。

现在，我们可以转向第一个控制器，创建一个新的模块 app.controllers，并添加我们的应用程序的第一个控制器 EntriesController。这个控制器唯一要做的事情就是从存储中获取数据并将其传递给视图。在你创建了这个模块之后，别忘了将其添加为依赖项：

angular.module('app.controllers', [])
    .controller('EntriesController', function ($scope, store) {
        $scope.entries = store.entries;
    })

我们需要实施的最后一步是实现视图。在views文件夹中创建entries.html文件，并填写以下代码：

<article ng-repeat="entry in entries | orderBy:'-'">
    <h1><a href="#/entry/{{ entries.indexOf(entry) }}">{{ entry.title }}</a></h1>
    <p>
        {{entry.content | summary }}
        <a href="#/entry/{{ entries.indexOf(entry) }}">... (read more)</a>
    </p>
</article>

显示条目详情

现在我们已经创建了条目列表，我们还必须创建显示每个条目详情的页面。我们还需要一个控制器、一个视图和一个新的路由定义。

我们将在列表页面的路由定义之后创建新的定义。最终的代码应如下所示：

angular.module('app', ['ngRoute', 'app.controllers', 'app.services', 'app.filters'])
    .config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'app/views/entries.html', controller: 'EntriesController'
        }).when('/entry/:index', {
            templateUrl: 'app/views/entry.html', controller: 'EntryController'
        })
    })

现在在app.controllers模块中创建一个新的控制器，该控制器从路由参数中读取索引并加载指定的条目，如下所示：

.controller('EntryController', function ($scope, $routeParams, store) {
    $scope.entry = store.entries[$routeParams.index];
})

我们现在必须创建entry.html文件，并填写我们的条目视图：

<article>
    <h1>{{ entry.title }}</h1>
    <p>{{entry.content}}</p>
    <p><a href="#/">Go back</a></p>
</article>

此视图显示条目标题和完整内容文本。使用此视图，我们已经完成了条目详情功能；正如您所看到的，您现在可以在这张列表页和详情页之间进行导航。我们现在需要创建的只是添加新条目的页面。

添加新条目

在我们开始这个功能之前，我们需要添加一个菜单，以便我们可以导航到这个页面。因此，打开index.html文件，并在您应用程序的容器<div>之前添加以下代码。此代码将添加一个带有指向此页面链接的页眉菜单。对于此菜单，我们将使用之前章节中熟悉的 Bootstrap 语法。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">My Angular App</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#/new-entry/">Add new</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

现在我们已经有了导航到添加新条目页面的菜单，我们需要为这个新路由创建一个新的路由定义。按照我们为之前路由所采取的相同步骤，并添加以下定义：

.when('/new-entry/', {
    templateUrl: 'app/views/new-entry.html',
    controller: 'NewEntryController'
})

现在我们可以创建控制器和视图。再次，在app.controllers模块中添加新的控制器。在这个控制器中，我们只需要定义两个函数：一个用于将条目添加到我们的博客中，另一个用于清除表单，如下所示：

.controller('NewEntryController', function ($scope, $location, store) {
    $scope.add = function () {
        store.add($scope.entry);
        $location.path('/');
    };
    $scope.clear = function () {
        $scope.entry = {};
    }
});

我们现在可以在new-entry.html文件中创建视图。我们还将再次使用 Bootstrap 语法进行样式设置。您可能也会注意到ng-model将输入与控制器绑定：

<form>
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" id="title" ng-model="entry.title">
    </div>
    <div class="form-group">
        <label for="title">Content</label>
        <textarea class="form-control" rows="5" ng-model="entry.content"></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default" ng-click="add()">Save</button>
        <button type="submit" class="btn btn-default" ng-click="clear()">Clear</button>
    </div>
</form>

现在我们已经为我们的应用程序创建了所有功能，我们可以进入最后一步，即对应用程序进行样式设置，并添加最后的修饰。

应用程序的样式

我们可以做的第一件事是为我们的应用程序添加页脚。在index.html文件中，在app容器<div>之后添加以下内容：

<footer class="footer copy">
    <div class="container">
        <p class="text-muted pull-right">Copyright © 2015\. All rights reserved</p>
    </div>
</footer>

您可能记得我们在index.html中包含了app.css文件；所以，继续前进，在css文件夹中创建此文件，并添加以下代码：

.app-container{
    margin-top: 100px
}

由于我们使用了 Bootstrap 语法和辅助类，因此我们需要编写的样式代码量非常少。

通过这些最终步骤，我们已经完成了我们的博客应用程序。正如你所看到的，在 WebStorm 和 Angular 的帮助下创建一个复杂的应用程序非常简单。需要注意的是，这个应用程序只是一个示例，我们可以对其进行许多改进和更改；但这超出了本书的范围。

接下来，我们将使用另一个高级 JavaScript 框架：React，重新创建具有相同功能的应用程序。

React

	"用于构建用户界面的 JavaScript 库"
	--facebook.github.io/react/

React 是由 Facebook 开发的一个 UI 框架，它在构建 Web 应用程序方面采用了一种不同的方法。它使用虚拟 DOM 为开发者提供一个更简单的编程模型和更好的性能。此外，React 应用程序中的数据流是单向响应式的，这减少了样板代码并使得推理应用程序的状态变得更加容易。

本节的目标是使用 React 作为 UI 框架重新创建我们之前创建的博客应用程序。我们将保持与上一节相同的功能。

我们需要采取的第一步是为我们的应用程序创建一个新的空项目。接下来，我们需要安装所有依赖项。使用本章前面描述的步骤，创建.bowerrc文件和vendor文件夹。然后安装react、react-router和bootstrap。你可以通过运行以下单个命令来完成：

bower install  react react-router bootstrap

现在我们已经安装了所有依赖项，我们必须在index.html文件中包含它们。再次使用之前描述的步骤，包括我们在 Angular 示例中做的导航和页脚。最终的代码应该看起来像以下这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My React App</title>
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">My React App</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#/new-entry/">Add new</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container app-container">
    <div id="app"></div>
</div>

<footer class="footer copy">
    <div class="container">
        <p class="text-muted pull-right">Copyright © 2015\. All rights reserved</p>
    </div>
</footer>

<script type="text/javascript" src="img/jquery.min.js"></script>
]<script type="text/javascript" src="img/bootstrap.min.js"></script>
<script type="text/javascript" src="img/react.js"></script>
<script type="text/javascript" src="img/ReactRouter.js"></script>

<script type="text/javascript" src="img/JSXTransformer.js"></script>
<script type="text/jsx" src="img/app.jsx"></script>
</body>
</html>

在这段代码中，可能会觉得有些不合适的是用于app文件的text/jsx类型。React 为其文件使用一种称为 JSX 的特殊语法。这种语法类似于 XML，它帮助我们编写组件文件内的标记。

因此，现在我们的index.html文件已经准备好了，我们可以在app文件夹中创建app.jsx文件，并开始填写我们应用程序的代码。

我们首先要添加的是为我们的路由器提供的支持代码。为了使我们的应用程序更简单，我们不会使用任何模块系统。但请记住，这并不是一个好的常规做法：

window.React = React;
var Router = window.ReactRouter;
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;

为了保持简单，我们将跳过从外部 JSON 文件加载条目的步骤，而是创建一个变量来保存我们的初始数据。

var entries = [
    {
        "title": "Hello, WebStorm!",
        "content": "Today we are going to speak about WebStorm and its features"
    }, {
        "title": "Immersing into WebStorm", "content": "WebStorm provides a bunch of advanced technologies, which help us increase our development efficiency"}
];

我们现在可以开始创建我们应用程序的功能。第一个将是条目列表。正如你所看到的，在 React 中，包括模板在内的所有功能都是使用 JSX 语法在 JavaScript 中创建的。一开始可能会觉得有些奇怪，但后来你会发现这是一个将所有事物集中在一起非常高效的系统。

var Entries = React.createClass({
    render: function () {
        var items = entries.slice().reverse().map(function (entry) {
            var sumary = entry.content.split(" ").slice(0, 5).join(" ");
            var index = entries.indexOf(entry);
            return (
                <EntryItem
                    index={index}
                    title={entry.title}
                    sumary={sumary}
                    />
            );
        }, this);
        return (
            <article>
                {items}
            </article>
        );
    }
});

在某个时刻，当 WebStorm 分析你的代码时，它会看到你正在使用 JSX 语法，并提示你切换到 JSX Harmony 语言级别。所以请确保在这个提示中点击切换，或者转到首选项 | 语言与框架 | JavaScript，并在那里更改语言版本：

Entries类依赖于我们需要创建的EntryItem。在 React 中，使用多个子元素组合元素是非常常见的。你可以看到数据是通过以下代码中 props 对象上的属性从父元素传递到子元素的：

var EntryItem = React.createClass({
    render: function () {
        return (
            <div>
                <h1><a href={'#/entry/' + this.props.index}>{this.props.title}</a></h1>
                <p>
                    {this.props.sumary}
                    <a href={'#/entry/' + this.props.index}>... (read more)</a>
                </p>
            </div>
        );
    }
});

使用这个类，我们已经完成了Entry项目功能，因此我们现在可以开始创建Entry详情功能。同样，这只是一个简单的渲染方法，将显示特定条目的详情。条目的 ID 将从路由中读取，作为pros.params对象上的一个属性：

var Entry = React.createClass({
    render: function () {
        var id = this.props.params.id;
        var entry = entries[id];
        return(
            <article>
                <h1>{ entry.title }</h1>
                <p>{entry.content}</p>
                <p><a href="#/">Go back</a></p>
            </article>
        );
    }
});

我们需要创建的最后一个功能是新的条目页面功能。为此，我们还需要创建两个特殊的方法来处理保存和清除功能。在这个类中，还有一点值得提及的是我们正在使用的Router.Navigation混合。混合将功能从其他类引入到我们的类中。在我们的例子中，我们需要能够在提交方法中程序化地进行导航。

var NewEntry = React.createClass({
    mixins: [Router.Navigation],

    handleSubmit: function () {
        var title = this.refs.title.getDOMNode().value,
            content = this.refs.content.getDOMNode().value;

        entries.push({
            title: title,
            content: content
        });
        this.transitionTo('/');
    },
    handleClear: function () {
        this.refs.title.getDOMNode().value = '';
        this.refs.content.getDOMNode().value = '';
    },
    render: function () {

        return (
            <form>
                <div className="form-group">
                    <label htmlFor="title">Title</label>
                    <input type="text" className="form-control" id="title"
                    ref="title"/>
                </div>

                <div className="form-group">
                    <label htmlFor="content">Content</label>
                    <textarea className="form-control" rows="5" ref="content"></textarea>
                </div>

                <div className="form-group">
                    <button type="submit" className="btn btn-default"
                    onClick={this.handleSubmit}>Save</button>
                    <button type="submit" className="btn btn-default"
                    onClick={this.handleClear}>Clear</button>
                </div>
            </form>
        );
    }
});

如你可能已经注意到的，WebStorm 在编写 JSX 语法时非常有用，因为它允许以类似于编写纯 HTML 或 JavaScript 代码的方式完成代码和进行检查。

我们需要创建的最后一个组件类是主要的App：

var App = React.createClass({
    render: function () {
        return (
            <div>
                <RouteHandler/>
            </div>
        )
    }
});

到目前为止，我们已经为我们的应用程序创建了所有组件；现在我们可以开始创建应用程序功能的路由定义：条目列表（这还将是默认列表）、条目详情和新的条目页面：

var routes = (
    <Route path="/" handler={App}>
        <DefaultRoute  handler={Entries}/>
        <Route path="/entry/:id" handler={Entry}/>
        <Route path="/new-entry/" handler={NewEntry}/>
    </Route>
);

在我们可以测试我们的应用程序之前，最后一步是连接路由，如下所示：

Router.run(routes, Router.HashLocation, function (Root) {
    React.render(<Root />, document.getElementById('app'));
});

现在，我们已经准备好测试我们的应用程序。所以，我们将转到index.html文件，点击浏览器图标来运行应用程序。正如你所看到的，功能与 Angular 应用程序相同。

我必须再次指出，我们在这里创建的代码只是为了 WebStorm 的功能和特性，当与 React 框架一起工作时；它没有优化，并且不遵循与该框架一起工作时所有的最佳实践。

Express

	"快速、无偏见、极简主义的 Node.js Web 框架"
	--expressjs.com/

在本节中，我们将探讨使用服务器端的 JavaScript 构建一些应用程序。我们首先将查看基于 Node.js 的最受欢迎的框架之一，即 Express。这是最受欢迎的框架之一，为 Web 和移动应用程序提供了一套强大的功能。

首先，我们需要基于Node.js Express App模板创建一个新的项目：

WebStorm 将创建项目，并安装所有必需的依赖项。在某个时候，您还将被提示下载和安装 Node.js 核心模块源代码。这将用于提供 Node.js 核心方法的自动完成和分析，所以请确保您选择配置。

完成所有这些步骤后，WebStorm 将创建一个运行/调试配置，这样您就可以快速预览您的项目。如果您从 运行 菜单或工具栏中选择 'bin/www' 来执行，您的应用程序将启动，您可以在浏览器中通过以下地址预览它：http://localhost:3000/。

如您所见，借助 WebStorm，启动一个 Node.js/Express 项目，包括所有依赖项和配置，非常简单。我们不会在本章中深入探讨，但这个项目是任何 Express 应用程序的一个优秀基础。

Meteor

Meteor 是一个开源的实时平台，用于构建 Web 应用程序。它运行在 Node.js 之上并使用 MongoDB。该框架相对较新——Meteor 1.0 早在 2014 年 10 月 28 日就已经发布，但它已经证明了自己是一个强大的工具。WebStorm 在版本 9 中添加了对 Meteor 的支持，因此您可以利用 WebStorm 提出的所有技术。

在开始构建 Meteor 应用程序之前，您需要在您的机器上安装 Meteor。Linux 和 OS X 作为以命令行为中心的系统，允许您通过以下命令一键安装 Meteor：

curl https://install.meteor.com/ | sh

Windows 用户需要访问 win.meteor.com/ 并下载 .exe 文件，这是一个稳定的版本，尽管不是最新版本。或者，您也可以查看网站 github.com/meteor/meteor/wiki/Preview-of-Meteor-on-Windows 并尝试一个 RC 版本。

设置新项目

我们的 Meteor 环境已经准备好了，所以让我们从理论转向实践，创建一个小型应用程序来观察 WebStorm 在使用 Meteor 时如何帮助我们。

让我们首先创建一个名为 MyMeteorApp 的新项目，如下面的截图所示：

在下一个窗口中，您将被提示选择 Meteor 可执行文件的位置。WebStorm 首先尝试自动定位它，然后，如果您需要指定另一个位置，您可以在这里进行操作。此外，您还可以使用几个模板，这些是已经实现的应用程序。让我们通过 todos 应用程序示例来查看 WebStorm 如何处理 Meteor。这是一个简单的应用程序，用于跟踪需要完成的事项和已经完成的事项：

WebStorm 需要一些时间来执行一些准备工作，例如初始化一个新应用程序；然后您将看到 Meteor 项目的典型结构，如下面的截图所示：

从技术角度讲，任何基于 JetBrains IDEA 的 IDE 都会创建一个名为.idea的特殊目录，供其自身使用。IDE 包含与当前项目相关的信息，例如所有文件的列表、配置，甚至每个打开文件中的光标位置。因此，在生成 Meteor 项目后，WebStorm 需要更多的时间来分析其结构。在 Meteor 应用程序的情况下，细微差别在于 Meteor 有一个自己的目录，称为—.meteor，其中存储有关所需包及其版本的信息。这个目录不受 WebStorm 控制，因为这个目录的内容可能会非常频繁地改变，甚至增长到非常大的大小。这可能会严重影响 WebStorm 的效率。因此，.meteor目录通常由 VCS 控制。

应用程序现在已准备好打开和运行。如果你打开任何.js文件，你会看到 WebStorm 理解 Meteor 特定的 JavaScript，并相应地突出显示。这是因为 WebStorm 自动使用 Meteor 库。你可以通过右键单击使用 JavaScript 库并选择Meteor 项目库来检查这一点。

这个库不仅突出显示语法，还为你提供完整的自动完成功能。如果你开始输入（例如，Meteor.st），你会看到 WebStorm，像往常一样，对内容进行内部分析，并建议在每个情况下最合适的要使用的方法：

由于我们不是从头开始创建应用程序，它已经实现，我们可以运行它。在标准情况下，要运行 Meteor 应用程序，你只需使用命令行界面，并输入meteor命令。如果我们可以直接使用终端，WebStorm 能为此提供什么建议呢？

WebStorm 提供了一个非常复杂且方便的界面，用于自定义运行和调试配置，以自动化最常执行的操作。当你有很多参数需要与你的应用程序一起运行时，这尤其有用。因此，你不需要在每次需要时在终端中指定它们；你只需使用预配置的情况即可。

要添加新的使用案例，请转到运行 | 编辑配置…。这将打开一个运行/调试配置对话框。点击加号按钮，并选择你要添加使用案例的技术：

你将看到两个标签页。在配置标签页上，你可以指定要执行应用程序的 Meteor 版本、程序参数和环境变量（如果需要），等等。在浏览器/实时编辑标签页上，你提供了次要但有用的功能，例如在运行应用程序时自动启动特定的浏览器：

当你完成设置特定情况下所需的所有参数后，你可以运行你的应用程序，如下所示：

1. 在 WebStorm 的菜单面板上按下绿色播放按钮（或者在调试时按下绿色虫子按钮）。

2. 前往运行 | 运行，然后选择你将要使用的配置。

3. 前往运行选项并运行MyMeteorApp，这将立即使用最后使用的配置运行你的应用程序。

4. 或者，你只需在 Mac 上按Ctrl + R或在 Windows 上按Shift + F10。

你的应用程序正在运行！你可以在运行框中看到控制台输出，如下面的截图所示：

摘要

在本章中，你学习了 WebStorm 如何通过最先进和流行的 JavaScript 框架和平台来加速开发过程。我们使用 AngularJS 和 React 实现了迷你博客，并测试了 Express 和 Meteor 预定义应用程序骨架的使用。

在下一章中，我们将沉浸在 JavaScript 和 HTML5 的移动开发世界中。

第六章. 沉浸在移动应用开发中

在上一章中，我们介绍了一些基本的 Web 框架，并学习了 WebStorm 如何帮助我们在使用它们时工作。我们看到了 JavaScript 如何在客户端和服务器端使用。

在本章中，我们将学习如何使用 JavaScript、HTML 和 CSS 开发移动应用程序，并设置我们的环境以测试移动应用程序。为此，我们将关注以下内容，它们是目前一些最常用的框架：

• Apache Cordova

• PhoneGap

• Ionic

使用 HTML、CSS 和 JavaScript 框架进行移动开发的优点在于，我们可以使用单一代码库和单一语言来针对所有我们想要的目标平台。这可以在代码量、需要学习的技术和开发速度方面有很大帮助。

到本章结束时，你将能够快速开始一个移动项目，并在多个设备上测试它。

为移动开发设置系统

在我们深入移动开发世界之前，我们需要准备我们的系统，以便我们可以测试我们创建的应用程序。为此，我们将设置一些模拟器和必要的工具。

iOS 平台指南

在本节中，我们将设置我们的环境，以便为 iPhone 和 iPad 等 iOS 设备部署应用程序。构建 iOS 应用程序所需的苹果工具只能在基于 Intel 的 Mac 上运行的 OS X 操作系统上运行。

安装 Xcode 和 SDK

你需要安装的第一个工具是 Xcode。这个工具只能在 OS X 版本 10.9（Mavericks）或更高版本上运行，并包括 iOS 8 SDK。如果你计划在实际设备上测试你的应用程序，它必须至少安装了 iOS 6.x，而且你必须也是苹果 iOS 开发者计划的成员。在这本书中，你将学习如何将应用程序部署到模拟器，而这不需要你在开发者计划中注册。

您可以从 AppStore 安装 Xcode。搜索 Xcode 并选择安装：

一旦 Xcode 安装完成，我们需要安装ios-sim工具。这是一个命令行实用程序，可以在模拟器中启动 iOS 应用程序。

要安装ios-sim，我们需要打开一个终端窗口，并运行以下命令：

npm install -g ios-sim

一旦完成ios-sim的安装，我们就拥有了在 iOS 平台上测试我们应用程序所需的所有工具。

Android 平台指南

现在我们已经设置了 iOS 平台，我们将向您展示如何设置 Android 应用程序的环境。获取所有必需工具的最简单方法是安装 Android Studio，这是官方的 Android IDE。这是一个基于另一个流行的 JetBrains 产品 IntelliJ IDEA Community Edition 的 IDE。它适用于 Windows、Mac OS X 和 Linux 平台。

要安装 Android Studio，请从 developer.android.com/sdk/index.html 下载最新版本，然后按照屏幕上的说明操作。

默认情况下，Android Studio 安装了 Nexus 5 的图像模拟器。如果您想在其他设备上测试您的应用程序，您需要在 Android 虚拟设备管理器中安装它们。您可以在 Android Studio 中的 工具 | Android | AVD 管理器 找到它：

本章涵盖的所有框架也支持部署到 iOS 和 Android 之外的其他平台。因此，如果您想为这些平台开发应用程序，您将必须安装必要的 SDK 或工具。本书不会涵盖其他平台的步骤，但您可以通过搜索每个平台的 SDK 来找到更多信息。

其他一些支持的平台如下：

• Amazon Fire OS

• BlackBerry

• Firefox OS

• Ubuntu

• Windows Phone

• Tiezen

现在我们已经为 Android 和 iOS 平台设置了环境，我们可以开始构建移动应用程序。

Cordova

	Apache Cordova 是一个使用 HTML、CSS 和 JavaScript 构建原生移动应用程序的平台
	--cordova.apache.org/

Cordova 是一组 JavaScript API，允许访问设备的原生功能，如加速度计、摄像头或地理位置。

开发者在用 Apache Cordova 编写应用程序时，使用 SDK 平台打包的 Web 技术作为原生应用程序。在核心上，这些应用程序使用 HTML5 和 CSS3 进行渲染，并使用 JavaScript 进行逻辑处理。

在我们开始使用此框架构建应用程序之前，我们需要安装它。为此，我们需要在终端窗口中运行以下命令：

npm install -g cordova

上述命令全局安装了 Apache Cordova，因此它将适用于所有未来的项目。安装完成后，我们需要重新启动 WebStorm，以便它能够检测到新安装的框架。

现在从欢迎屏幕或 文件 菜单中选择 新建项目。选择 PhoneGap/Cordova 应用 作为模板，插入目标文件夹，并选择 Cordova CLI 的路径，如图所示：

这将创建并打开一个基于 Cordova 框架的新项目。该项目预装了一个示例页面，我们可以使用它。

在我们的应用程序在模拟器中测试之前，我们需要编辑运行配置。因此，选择 编辑配置...，如图所示：

将名称更改为 iOS，并在平台下拉菜单中选择 ios。点击 确定 保存配置。这将创建一个运行环境配置，可用于在 iOS 平台上测试应用程序。

如果我们检查 指定目标（如图所示），我们可以选择特定的设备，如 iPhone 6、iPhone 5s 或其他设备：

现在，我们可以通过按 Shift + F10 或选择配置旁边的运行图标来在模拟器中运行我们的应用程序。

这将启动 Cordova 构建系统并在 iOS 模拟器中运行我们的应用程序。我们还可以在运行部分查看运行日志：

我们将创建一个类似的配置来测试我们的应用程序在 Android 平台上的运行。再次选择 编辑配置 菜单。

在选择之前的 iOS 配置后，点击 复制配置 图标以复制它。在新建的配置中，将名称更改为 Android 并将 平台 更改为 android。

我们现在创建了一个配置来测试我们的应用程序在 Android 模拟器上的运行。要运行应用程序，请按 Shift + F10，或按运行图标。这将启动应用程序，这次使用 Android 模拟器。

我们现在已经创建了一个简单的应用程序，它等待设备就绪事件，并在设备就绪时改变屏幕状态。我们现在将使用 PhoneGap 构建一个更复杂的应用程序，因为框架之间的差异很小。

PhoneGap

	轻松使用您所熟悉和喜爱的网络技术创建应用程序：HTML、CSS 和 JavaScript。PhoneGap 是一个免费的开源框架，允许您使用针对您关心的平台的标准化网络 API 创建移动应用程序。
	--phonegap.com/

PhoneGap 是 Apache Cordova 的一个发行版；因此，其背后的引擎是 Cordova，但你还可以访问更多工具，例如开发者应用或远程构建。

在开始之前，我们需要全局安装框架并重新启动 WebStorm 以获取它。为此，请执行以下命令：

npm install -g phonegap

要基于 PhoneGap 开始一个新项目，请从欢迎屏幕或 文件 菜单中选择 新建项目，然后选择 PhoneGap/Cordova 应用 作为模板。插入目标文件夹，并选择新安装的 PhoneGap CLI 的路径：

这将创建并打开一个基于 PhoneGap 框架的新项目。该项目包含一个示例页面，我们将对其进行扩展。

在继续之前，我们需要将 config.xml 文件中的 minSdkVersion 修改为 10。我们这样做是因为，默认情况下，Android Studio 不会下载旧 API 版本的 SDK，而我们不想针对旧版本的 Android。

要打开文件，请按 ⌘ + Shift + N，开始输入文件名（config.xml），然后选择它。一旦文件打开，你可以按 ⌘ + F，搜索对话框将出现在页面顶部，我们可以在这里输入 android-minSdkVersion 以在代码中找到片段。

由于我们的应用使用了位置，我们需要将cordova-plugin-geolocation添加到config.xml文件中，以便 PhoneGap 下载并安装它。

<plugin name="cordova-plugin-geolocation" version="1" />

现在，按照上一节中给出的步骤，我们将为 iOS 和 Android 创建一个运行配置，以在两个平台上测试我们的应用程序。

在本节中，我们将从第一章创建地图示例，但这次作为一个移动应用。

由于我们的应用使用了 jQuery，我们需要下载并复制它到JS文件夹中，然后在index.html文件中加载它。在cordova.js和index.js文件之间加载以下脚本：

<script type="text/javascript" src="img/jquery-1.11.3.min.js"></script>

在<div>标签的app之后，创建一个新的<div>容器用于地图，如下所示：

<div id="map"></div>

我们还需要将以下样式添加到index.css文件中：

html, body{
    width: 100%;
    height: 100%;
}

#map{
    display: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

现在加载 Google Maps API。由于 API 是一个外部资源，将会被下载，所以我们只在设备准备好并连接到互联网时加载它。因此，打开index.js文件，并在onDeviceReady处理程序中添加以下代码：

onDeviceReady: function () {
    app.receivedEvent('deviceready');document.addEventListener("online", app.loadGoogleMapsAPI, false);
    document.addEventListener("resume", app.loadGoogleMapsAPI, false);
    app.loadGoogleMapsAPI();
},

这将监听设备在线时的情况，并触发我们接下来要定义的loadGoogleMapsAPI函数：

// Load the Maps API if it wasn't loaded before loadGoogleMapsAPI: function () {
    if (window.google !== undefined && window.google.maps) {
        return;
    }
    // load maps api
    $.getScript('https://maps.googleapis.com/maps/api/js?sensor=true&callback=app.onMapsApiLoaded');
},

前面的函数检查 API 是否已加载；如果没有，它将使用 jQuery 的getScript方法加载它。考虑到 API 是异步加载的，我们需要使用回调函数将查询字符串参数传递给脚本。

现在，我们将创建onMapsApiLoaded回调函数，其中我们获取设备位置。我们还将监视位置的变化并读取位置：

// Get the location after we have the maps api// Get the default location and also watch for any changes in the location
onMapsApiLoaded: function(){
    navigator.geolocation.getCurrentPosition(app.geolocationSuccess, app.geolocationError, app.geolocationOptions);navigator.geolocation.watchPosition(app.geolocationSuccess, app.geolocationError, app.geolocationOptions);
},

对于位置方法，我们必须创建两个回调函数和一个配置对象。如果加载位置时发生错误，我们将使用默认位置：

// Load the map with the device positongeolocationSuccess: function(position){
    app.position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    app.updatePosition();

},
// If we don't have a position from the device, we are going to use // some default values
geolocationError: function(error){
    if(!app.pos){app.defaultPosition = new google.maps.LatLng(51.5, -0.1);
        app.updatePosition();
    }
},
// Settings object for the geolocationgeolocationOptions: {
    maximumAge: 3000,
    timeout: 5000,
    enableHighAccuracy: true
},

一旦我们从设备或默认位置获取了位置，我们就可以创建和更新地图。

// Show the map and update the positionupdatePosition: function(pos){
    $('.app').hide();
    $('#map').show();
    var mapOptions = {
        zoom: 10
    };
    var pos = app.position || app.defaultPosition;
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'I am here!'
    });
    map.setCenter(pos);
},

这将隐藏初始屏幕，创建地图，并更新我们在地图上的位置。

现在，如果我们按照上一个示例中的步骤在 iOS 模拟器中运行应用程序，我们将看到以下屏幕：

如果我们在 Android 模拟器中运行应用程序，我们将得到一个类似的屏幕：

离子框架

	*创建令人难以置信的应用。Iconic 是一个美丽的开源前端 SDK，用于使用 Web 技术开发混合移动应用。
	--ionicframework.com/

Ionic 是一个专注于外观、感觉和 UI 交互的框架。它不是 PhoneGap 或 Cordova 的替代品，而是它们的补充。它可以被视为移动开发的 Bootstrap，因为它是一个 CSS 样式和 Angular JavaScript 组件的集合。

在我们开始之前，我们需要全局安装框架并重新启动 WebStorm 以获取它。为此，运行以下命令：

npm install -g ionic

安装应用程序后，我们需要重新启动 WebStorm，以便它能够识别框架，并选择PhoneGap/Cordova App模板，使用新安装的 Ionic CLI 作为项目编译器来启动一个新项目：

项目创建完成后，我们需要像之前的项目一样，为 iOS 和 Android 创建运行配置；因此，请按照上一节中的步骤创建配置。

由于 Ionic 附带一个示例项目，我们可以在模拟器上轻松测试创建的项目。

此框架将创建一个具有内置导航的更复杂的应用程序，这将使我们能够看到更多屏幕。

摘要

在本章中，你学习了如何使用 Web 技术创建原生移动应用程序，以及 WebStorm 如何帮助我们实现这一点：从使用模板快速创建项目到管理运行配置。

在下一章中，我们将看到 WebStorm 如何帮助我们分析和调试代码。

第七章：分析和调试您的代码

在上一章中，我们学习了如何使用网络技术创建原生移动应用程序，以及如何借助模板快速创建项目。在本章中，我们将探讨 WebStorm 如何帮助我们分析和调试代码。

我们现在将关注代码质量工具，如 Code Inspector、Code Style 和 Code Linters，这些工具将帮助我们编写高质量的代码。我们还将学习如何在 IDE 中直接调试代码。在本章中，我们将涵盖以下主题：

• 理解代码检查

• 什么是代码风格？

• 使用不同的代码质量工具

• 调试您的代码

代码检查

WebStorm 配备了一个强大、快速且多功能的代码分析工具。此工具不仅检测编译器和运行时错误，还检测不同的代码低效。在您编码时，它会建议修正和改进。它可以检测的一些常见错误包括：不可达代码、未使用代码、未本地化的字符串、未解析的方法、内存泄漏和拼写错误。

检查可以通过多种方式执行：

• 分析所有打开的文件，所有代码问题都会在编辑器中突出显示。状态在编辑器的右侧可见。在文件顶部和滚动条上有一个总结，当点击时会带您到代码行。

• 以批量模式运行分析将在指定范围内运行检查器。范围可以是任何一组文件，从当前选定的文件到整个项目。要运行批量模式，请选择代码 | 检查代码…，并在打开的对话框中指定范围。

  在指定检查对话框中，我们还可以指定我们想要使用的检查配置文件。配置文件代表一组我们希望我们的代码与之检查的规则。目前，我们将保留默认设置，并点击确定。WebStorm 将运行检查，然后以以下截图所示的方式显示总结对话框：

  

• 在指定范围内运行单个代码检查——在此模式下，WebStorm 允许我们在所选范围内检查特定问题。要访问对话框，请打开代码 | 按名称运行检查，并在该对话框中选择您想要运行的检查，如以下截图所示：

  这将打开范围对话框，在这里我们可以选择要应用此检查的代码。WebStorm 随后带我们到总结页面，类似于批量部分。

WebStorm 在检查代码时使用配置文件，因此您可以指定您想要搜索和报告的问题类型。它还允许您在应用程序或项目级别定义配置文件，并将创建的配置文件与团队的其他成员共享。所有配置文件设置都可以在首选项 | 编辑器 | 检查页面找到。

在本节中，我们关注了代码的执行和性能；在下一节中，我们将关注代码的外观。

代码风格

代码风格可以被视为一组特定的规则，这些规则规定了源代码的布局。它包括缩进、空白的使用、变量名、关键字等使用的样式。WebStorm 允许您管理应用于特定文件类型的方案。要访问对话框，请转到首选项 | 编辑器 | 代码风格。

显示的第一页用于设置当前项目的通用样式，如下所示：

• 行分隔符用于列和换行

• 默认缩进选项

• 格式化控制 用于使用注释来开启/关闭代码风格

• EditorConfig 通过通用的 .editorconfig 文件来控制样式，该文件可以与项目共享

我们还可以设置特定语言的代码风格，以使编辑器符合我们的需求。要更改这些设置，我们需要从预览屏幕中的菜单中选择所需的语言。

WebStorm 还允许您通过选择代码 | 重新格式化代码来快速将代码风格应用于打开的文件。它根据文件扩展名应用必要的规则。

这些工具有助于使您的代码外观保持一致，并且借助EditorConfig文件，您可以将您的样式与团队中的多个成员共享。将此类文件包含在项目的 Git 仓库中是一种良好的实践。

代码质量工具

WebStorm 允许我们使用各种代码质量工具来确保我们的代码没有常见的错误和不一致之处。WebStorm 10 支持与以下工具集成：

• JSLint

• JSHint

• Closure Linter

• JSCS

• ESLint

它与 JSLint 和 JSHint 一起打包，但其余的则需要通过 NPM 或其他安装程序安装。我们将重点关注 JSCS 和前面列表中的前两个工具，因为这些是最常见的，并且不同工具之间的工作流程非常相似。

JSLint

要使用 JSLint 工具，请在设置 | 语言和框架 | JavaScript | 代码质量工具 | JSLint 页面上启用它，并选择所需的设置。在导航到复杂的设置页面时，使用内置的搜索是一种良好的实践。

一旦我们启用并配置了 JSLint，它将自动检查所有打开的 JS 文件，并使用指定的设置，错误将像代码检查消息一样显示。

JSHint

JSHint 是 WebStorm 内置的另一款代码质量工具。设置页面可在设置 | 语言和框架 | JavaScript | 代码质量工具 | JSHint中找到。

JSHint 设置可以通过设置页面配置，或者通过使用特殊的 .jshintrc 配置文件来实现。再次强调，将此类文件包含在您的仓库中是一种良好的实践。

JSCS

JSCS 是一些大型框架（如 jQuery、Bootstrap 和 Angular）中使用的流行代码检查器之一。它不像之前的工具那样随 WebStorm 一起打包，因此我们必须首先安装它。我们将使用内置的 NPM 安装程序，并执行以下步骤：

1. 打开 首选项 | 语言与框架 | Node.js 和 NPM 页面 | 包安装 对话框，搜索 jscs 并全局安装。

2. 安装完成后，设置页面可以在 设置 | 语言与框架 | JavaScript | 代码质量工具 | JSCS 中找到。

3. 在此页面上，从全局 Node 文件夹中选择包以及用于规则的配置文件或预设。与之前的工具不同，没有选项可以单独定义规则。

对于这个演示，我们将使用一组流行的规则，即由 Airbnb 定义的规则。

现在您已经学会了如何在代码运行之前进行检查，我们将深入调试的世界，看看 WebStorm 如何帮助我们理解并修复正在运行的代码。

调试您的代码

在开始之前，我们需要做的第一件事是安装和配置 Chrome 浏览器扩展。此扩展使 WebStorm 能够与浏览器通信，因此我们可以在 IDE 内直接调试应用程序。

Chrome 浏览器扩展可在 Chrome 网上应用店 中找到，名为 JetBrains IDE Support。因此，我们需要从那里添加，如下面的截图所示：

现在我们已经安装了扩展，我们可以开始学习如何调试我们的代码。为了能够在代码运行时进行调试，我们需要启动一个调试会话。有几种启动调试会话的方法。在本节中，我们将了解 WebStorm 中的一些调试方法。

从浏览器初始化调试会话

首先，我们需要在 WebStorm 中打开项目，并设置一些断点。在我们开始之前，我们需要从 GitHub 导入为这个目的创建的项目。因此，按照上一节中给出的说明，从 github.com/srosca/webstorm_essentials_debugging.git 的 Git 仓库创建一个项目。下载并打开项目后，运行 npm install 以安装所有必需的依赖项。

注意

一切安装完成后，请确保使用 Grunt 任务运行器或通过在终端中输入 grunt serve 来启动服务器。

打开 fib.js 文件，您可以在右侧单击以设置断点；这将看起来像一个红色圆点。我们将在 fib 函数内的第 58 行设置断点，以检查内部发生的情况。

执行以下步骤：

1. 打开 Chrome 浏览器，将其指向 http://localhost:9000/index.html 以打开文件。

2. 在浏览器中，从 上下文 菜单中选择 WebStorm 中的 inspect。这创建了一个临时的调试会话，并将 Chrome 与 WebStorm 连接起来。

3. 您现在将在浏览器中看到一条消息 JetBrains IDE 支持正在调试此选项卡，在 WebStorm 中，调试部分带有消息 连接到 JetBrains Chrome 扩展。

调试部分分为四个选项卡：

• 调试器：此选项卡显示与调试部分相关的信息，如 调用栈、变量 和 监视

• 控制台：此选项卡显示控制台输出

• 元素：此选项卡显示 DOM 树

• 脚本：此选项卡显示已加载的脚本

现在我们已经将 WebStorm 和 Chrome 连接起来，我们需要在 Chrome 中刷新页面，以便它停在断点处。浏览器现在显示我们的页面在调试器内部已暂停：

WebStorm IDE 现在将跳转到执行暂停的行，并在 调试器 部分显示相关信息。调用栈 面板将显示导致当前点的调用栈。变量 面板允许您检查应用程序中存储的值，包括局部作用域和全局作用域。在 监视 面板中，我们可以评估当前上下文中的各种变量和表达式。这些面板中显示的信息会随着应用程序中的每个步骤而更新。

当执行暂停时，我们可以导航程序执行。导航可以通过 运行 菜单或使用以下快捷键来控制：

• 单步执行（F8）：在当前文件中跳到下一行

• 进入（F7）：跳到下一个执行的行，这可能是在单独的文件中

• 退出（Shift + F8）：跳到当前方法返回后的第一行执行的行

• 运行到光标处（Alt + F9）：运行到光标所在的行

• 恢复程序（F9）：恢复程序执行

虽然临时调试会话对于快速调试很有用，但有时我们需要将调试运行保存为配置，以便更容易运行。转到 运行 | 编辑配置 以打开 运行/调试配置 窗口，然后单击加号。然后选择 JavaScript 调试。为您的配置设置一个名称，输入 URL：http://localhost:9000/index.html，然后单击 确定。

这创建了一个配置，可以通过从运行工具栏中选择调试图标轻松运行，如下面的截图所示：

一旦运行此操作，调试会话的控制方式与上一节完全相同。

我们还可以在 Node.js 内部调试我们的代码，因此我们需要为 Node.js 环境创建一个调试配置。为此，从 运行/调试配置 界面中选择 Node.js，然后选择您想要调试的 JavaScript 文件。

现在，我们可以运行调试会话针对节点环境。其余的显示和控制与之前的示例相同。

调试是理解代码执行的最强大方式之一，而 WebStorm 能够直接在创建代码的环境中（即 IDE）调试代码，这是一个极其宝贵的优势。

摘要

在本章中，您已经学会了分析和调试您的代码。您安装并配置了一些最常用的代码质量工具，并在您的代码上使用了它们。您还学会了调试代码并快速找到问题。这些是让您更好地理解代码执行的基本步骤，通过遵循一些简单的规则，您可以确保代码的表现和外观都很出色。

在下一章中，我们将看到 WebStorm 如何帮助您测试代码，以确保我们做出的任何更改都不会破坏我们的代码。我们将深入探讨一些当下最常用的开发实践：TDD 和 BDD。

第八章. 测试你的应用程序

在上一章中，我们了解了分析和调试代码的过程。我们学习了如何使用代码检查器、代码风格检查器和代码质量工具。

在本章中，我们将了解 WebStorm 如何帮助我们测试代码以确保其按预期执行。我们将学习如何配置测试运行器、在 IDE 内运行测试以及使用以下框架：

• Karma

• Jasmine

• Node 单元

• Mocha

• Cucumber.js

• Wallaby.js

注意

在开始之前，请注意，本章中解释的过程可能看起来有些重复。然而，在生产环境中情况并非如此，因为你通常只使用一个框架。在 WebStorm 中，当使用多个测试框架时，差异主要在语法层面。

Karma

Karma 是由 AngularJS 团队创建的测试运行器，它帮助我们针对多个浏览器运行测试。它启动你选择的浏览器，加载你指定的文件，并报告测试结果。Karma 支持多个测试框架，因此你可以使用 Jasmine、Mocha 等编写测试。

在开始之前，你需要全局安装命令行界面，这样你就可以直接运行 Karma，而无需进入 node_modules 文件夹。在终端中运行以下命令：

npm install -g karma-cli

一旦全局安装了 CLI，你就可以从 GitHub 下载示例章节。因此，使用 Git 仓库 github.com/srosca/webstorm_essentials_testing.git 作为源创建一个新的项目。

下载项目后，你需要将 Karma 作为开发依赖项安装：

npm install karma --save-dev

现在，你可以在项目中初始化 Karma。为此，请在终端中运行以下命令：

karma init

你将需要回答几个配置项目的问题。使用以下选项回答它们：

• 你想使用哪个测试框架？

  Jasmine—使用 Jasmine 作为测试框架

• 你想要使用 Require.js 吗？

  no—因为我们不想使用 Require.js

• 你想要自动捕获任何浏览器吗？

  Chrome—因为我们想从一开始就使用 Chrome，请输入空字符串以跳到后续问题

• 你的源文件和测试文件的位置在哪里？

  fib.js—测试我们的文件

  test/jasmine/*.spec.js—我们将把所有测试文件都保存在名为 test/jasmine 的文件夹中，文件名以 spec 结尾

  你需要再次输入一个空字符串来进入下一个问题

• 是否应该排除之前模式中包含的任何文件？

  留空此选项

• 你想要 Karma 监视所有文件并在更改时运行测试吗？

  yes—因为我们想监视更改并自动运行测试

完成这些后，你将创建一个karma.conf文件，该文件保存了项目的设置。此外，根据我们的选择，Karma 会安装所需的依赖项：karma-chrome-launcher、karma-jasmine和jasmine-core。

你现在可以创建一个运行/调试配置来在 WebStorm 中运行 Karma。导航到运行 | 编辑配置，然后从图标或按Ctrl + N键可访问的添加新配置菜单中选择Karma。

在配置屏幕（如前面的截图所示），你需要选择karma.config.js文件的路径、node 和 Karma。WebStorm 会自动获取这些信息。

现在我们可以开始编写代码的测试了。我们将首先研究的框架之一是 Jasmine。

Jasmine

Jasmine 是一个用于测试 JavaScript 代码的行为驱动开发框架。它设计在任意 JavaScript 平台上运行，不依赖于任何其他框架或 DOM，并且具有易于阅读的明显语法。

在我们开始之前，安装 WebStorm 的 Jasmine JavaScript 库会有所帮助。我们可以使用自动完成和语法高亮。转到首选项 | JavaScript | 库屏幕，并选择下载。

在新屏幕中，选择TypeScript 社区占位符并搜索jasmine，然后选择下载并安装。

现在你已经设置了库，可以开始了。首先，你需要创建一个test文件夹，在test文件夹内创建一个jasmine文件夹，并在jasmine文件夹中创建一个fib.spec.js文件。按照惯例，测试使用被测试文件名后跟.spec.js。在实践中，测试文件直接放在test文件夹中，但我们创建了jasmine文件夹，以便更容易使用多个框架。

创建文件后，你需要用以下代码填充它：

(function () {
    'use strict';

    describe('Tests', function () {

        it('True should be truthy', function () {
           expect(true).toBeTruthy();
        });

        it('True should fail falsy', function () {
            expect(true).toBeFalsy();
        });
    });
})();

这段简单的代码将执行一些简单的测试来检查一切是否正常。你现在可以从运行菜单、工具栏或使用快捷键Shift + W启动 Karma。这将启动 Karma 并在运行部分显示结果。

这些测试只是一个简单的例子，以确保一切设置正确。如果你能看到与前面的截图相同的结果，我们现在可以进入下一步，测试我们的 Fibonacci 函数。在编写测试时，持续模式运行测试是一个好习惯。我们可以通过从运行部分切换自动运行来实现。这相当于监视模式，每次我们更改文件时都会自动运行测试。

你首先需要删除我们之前做的演示测试，然后从全局对象中获取fib函数。最后，你将测试一些预定义的值的结果。你还需要通过验证当前结果是否等于前两个结果的和来检查递归是否正常工作。最终的代码应该看起来像这样：

(function () {
    'use strict';

    var fib = window.fib;

    describe('Fibonacci', function () {

        it('Should return the term at the given position', function () {
            expect(fib(0)).toEqual(0);
            expect(fib(1)).toEqual(1);
            expect(fib(2)).toEqual(1);
            expect(fib(3)).toEqual(2);
            expect(fib(4)).toEqual(3);
            expect(fib(8)).toEqual(21);
            expect(fib(9)).toEqual(34);
            expect(fib(51)).toEqual(20365011074);
        });

        it('Should return the value as the sum of previous values', function(){
            expect(fib(0) + fib(1)).toEqual(fib(2));
            expect(fib(1) + fib(2)).toEqual(fib(3));
            expect(fib(10) + fib(11)).toEqual(fib(12));
            expect(fib(2500) + fib(2499)).toEqual(fib(2501));
        });

    });
})();

如果你已经切换到自动运行模式，那么你的运行部分应该在你完成它们时显示结果。如果一切顺利，所有测试应该通过。

在这个例子中，你已经创建了一个测试来检查你的函数在 Jasmine 和 Karma 的帮助下正确计算值。在下一节中，我们将使用另一个测试框架：Nodeunit。

Nodeunit

Nodeunit 是一个用于测试 Node.js 代码的框架。它的主要重点是创建一种简单的方式来测试为 node 编写的代码。它的一些主要功能如下：

• 简单易用

• 能够从模块导出测试

• 支持 Node.js 和浏览器

• 允许使用模拟和存根

在编写测试之前，你需要将 Nodeunit 作为开发依赖项安装。在终端中运行以下命令：

npm install nodeunit --save-dev

一旦安装了包，就在测试目录中的新nodeunit文件夹内创建一个fib.spec.js文件。文件创建后，添加以下代码：

(function () {
    'use strict';

    var fibModule = require('./../../fib.js');
    var fib = fibModule.fib;

    exports.term = function (test) {
        test.equal(fib(0),0, 'Fibonacci 0 is 0');
        test.equal(fib(1),1, 'Fibonacci 1 is 1');
        test.equal(fib(2),1, 'Fibonacci 2 is 1');
        test.equal(fib(3),2, 'Fibonacci 3 is 2');
        test.equal(fib(4),3, 'Fibonacci 4 is 3');
        test.equal(fib(8),21, 'Fibonacci 8 is 21');
        test.equal(fib(9),34, 'Fibonacci 9 is 34');
        test.equal(fib(51),20365011074, 'Fibonacci 51 is 20365011074');
        test.done();
    };

    exports.recursion = function (test) {
        test.equal(fib(2),fib(0) + fib(1), 'Fibonacci 2 is  fib 0 + fib 1');
        test.equal(fib(3),fib(1) + fib(2), 'Fibonacci 3 is  fib 1 + fib 2');
        test.equal(fib(12),fib(10) + fib(11), 'Fibonacci 12 is fib 10 + fib 11');        test.equal(fib(2501),fib(2499) + fib(2500), 'Fibonacci 2501 is  fib 2499 + fib 2500');

        test.done();
    };
})();

测试与 Jasmine 部分中的测试类似，但使用 Nodeunit 语法编写。要运行它们，你需要创建另一个运行配置，但这次选择 Nodeunit 作为起点。从运行|编辑配置菜单打开配置屏幕，并填写必要的设置。使用已安装的包作为Nodeunit模块，目录中的所有文件作为运行，以及test/nodeunit作为目录。

一旦创建了配置，你就可以像上一节那样运行测试，无论是从工具栏还是运行菜单。这将显示运行部分和测试结果，如下面的截图所示：

如你所见，在创建和运行测试的工作流程在框架之间非常相似，唯一的区别在于我们编写的语法。接下来，我们将看到另一个框架：Mocha。

Mocha

Mocha 是一个用于测试 Node.js 和浏览器代码的框架。它是一个更复杂的框架，具有更多功能。它允许用户使用 BDD、TDD、exports 等多种语法编写测试。Mocha 中的测试是顺序运行的，这允许更灵活和准确的报告，并且异常被正确映射到测试用例。

再次强调，在编写测试之前，我们需要通过在终端中运行以下命令将 Mocha 作为开发依赖项安装：

npm install mocha --save-dev

现在，在test目录中的新mocha文件夹内创建一个fib.spec.js文件。文件创建后，你需要填写以下测试：

(function () {
    'use strict';
    var assert = require("assert");

    var fibModule = require('./../../fib.js');
    var fib = fibModule.fib;

    suite('Fibonacci', function () {test('Should return the term at the given position', function () {
            assert.equal(fib(0), 0);
            assert.equal(fib(1),1);
            assert.equal(fib(2),1);
            assert.equal(fib(3),2);
            assert.equal(fib(4),3);
            assert.equal(fib(8),21);
            assert.equal(fib(9),34);
            assert.equal(fib(51),20365011074);
        });

        test('Should return the value as the sum of previous values', function () {
            assert.equal(fib(0) + fib(1), fib(2));
            assert.equal(fib(1) + fib(2), fib(3));
            assert.equal(fib(10) + fib(11), fib(12));
            assert.equal(fib(2500) + fib(2499), fib(2501));
        });
    });

})();

正如你所见，差异仅在语法层面。测试的逻辑保持不变。现在你已经创建了测试，创建一个运行配置，这次选择 Mocha 作为模板。

选择 Mocha 包，选择用户界面为 tdd，测试目录，然后保存配置，如前述截图所示。这允许我们在运行部分运行 Mocha 测试并查看结果。

接下来，我们将关注一个尝试使用更易于人类阅读的方式来编写测试的框架。

Cucumber.js

Cucumber.js 是一个在 Node.js 和浏览器中运行的 BDD 框架。它使用一种易于理解的语法——Gherkin 语言，该语言被描述为一种业务可读的、特定领域的语言。

你将在 Cucumber 中编写的测试包括两种类型的文件：

• 使用 Gherkin 编写的功能文件

• 使用 JavaScript 或 CoffeeScript 编写的支持文件

在编写测试之前，首先要做的事情之一是运行以下命令，将 Cucumber.js 作为开发依赖项安装：

npm install cucumber -save-dev

一旦安装了包，你需要创建文件夹结构；因此，在 test 文件夹内创建一个 cucumber 文件夹。在 cucumber 文件夹内，创建功能文件 fib.feature，并填充以下代码：

Feature: User can calculate the nth term in the Fibonacci seriesAs a user
  I want to calculate the nth term in the Fibonacci series
  So that I know what the value is

  Scenario Outline: Value calculated for <number>
    Given I have a <number> as n
    When I pass n to the fib function
    Then It calculate the <result> as value of the nth term

    Examples:
      |number |result |
      |0      |0      |
      |1      |1      |
      |2      |1      |
      |3      |2      |
      |4      |3      |
      |8      |21     |
      |9      |34     |
      |51     |20365011074 |

正如你所见，Gherkin 语法侧重于用户故事，而不是技术实现。这将在我们即将创建的支持文件中处理。这些文件将放置在 cucumber 文件夹内的 step_definitions 文件夹中。在这个文件夹中，创建 fib.steps.js 文件，并填充以下代码：

'use strict';
var assert = require('assert');

var fibModule = require(process.cwd() + '/../fib.js');
var fib = fibModule.fib;
var n, result;

module.exports = function() {

    this.Given(/^I have a (\d+) as n$/, function(number, callback)
{
        n = parseInt(number, 10);
        callback();
    });

    this.When(/^I pass n to the fib function$/, function(callback)
{
        result = fib(n);
        callback();
    });

    this.Then(/^It calculate the (\d+) as value of the nth term$/, function(value , callback) {
        assert.equal(result, value, 'fib of ' + n +'should be ' + value );
        callback();
    });

};

正如你所见，在这个文件中，我们将功能文件中的步骤转换为技术实现。

现在你已经创建了所有文件，你可以创建一个运行配置，就像上一节中那样，但这次选择 Cucumber.js 作为模板。

你需要将 功能文件或目录 填充为我们创建的 fib.feature 文件，并指定从 node_modules/.bin/ 文件夹到 Cucumber.js 文件的可执行路径。

执行这些步骤后，你将创建一个新的运行配置，可以从工具栏或 运行 菜单启动，如以下截图所示：

在运行部分，你可以看到按功能和场景分组的测试运行结果。正如你所见，Cucumber 框架更注重以易于阅读和转换为业务需求的语法创建测试。

接下来，我们将关注一个智能测试运行器，它以巧妙的方式运行并显示结果：直接在你的代码中。

Wallaby.js

Wallaby.js 是一个以创新方式运行测试的测试运行器。测试以连续模式运行，并且当你在代码中更改代码时，Wallaby.js 会直接在你的代码编辑器中报告代码覆盖率和结果。

在使用 Wallaby.js 之前，你需要从 wallabyjs.com/ 的产品页面下载插件。

下载插件后，从 首选项 | 插件 对话框安装它，并选择 从磁盘安装插件…，如图所示：

按照安装下载的插件的步骤操作，并重新启动 WebStorm。由于 Wallaby.js 是一个付费插件，重启后，你将被提示输入许可证或使用试用模式。

一旦安装完成，你需要创建一个简单的配置文件来指定你正在使用的文件。在项目根目录下创建一个wallaby.js文件，并填写以下代码：

module.exports = function (wallaby) {
  return {
    files: ['fib.js'],
    tests: ['test/jasmine/*.spec.js']
  };
};

你将使用我们在上一节中已经定义的 Jasmine 测试。现在创建一个运行配置来运行 wallaby。使用已知的步骤，基于 Wallaby.js 模板创建一个配置：

你需要指定你在上一步中创建的 wallaby.js 配置文件。

当你从工具栏或从运行菜单运行项目时，你将在运行部分看到一些详细信息，但这次结果和代码覆盖率将以彩色方块的形式直接显示在你的测试文件和源代码中。

此外，如果你将其中一个测试更改为失败，失败将显示在代码行中，这样你可以轻松地看到问题是什么。

如你所见，Wallaby.js 带来的一个主要优势是你可以快速看到结果，直接在代码中。这样，你可以快速做出更改，而无需在工具之间跳转。

摘要

在本章中，我们专注于测试我们的代码。我们使用了一些流行的测试运行器和测试框架，这样我们就可以轻松地看到代码中的问题。

在下一章和最后一章中，我们将看到一些将提高我们生产力的 WebStorm 功能：实时编辑、TODO 功能、Emmet 等。

第九章。了解更多强大功能

在上一章中，我们看到了 WebStorm 如何与测试运行器和测试框架协同工作，以确保我们的代码经过测试。

在本章的最后，我们将关注一些 WebStorm 的强大功能，这些功能可以帮助我们提高生产力和开发者体验。

在本章中，我们将涵盖以下主题：

• 使用实时编辑模式

• 与 Emmet 一起工作

• TODO 功能

• 差异查看器

• 跟踪本地历史

使用实时编辑模式

当你处于 JavaScript 调试会话中时，WebStorm 允许你看到你对任何 HTML 文件或生成 HTML、CSS 或 JavaScript 的文件所做的所有更改。当你处于此模式时，你还可以在 调试 部分的 元素 选项卡中看到页面结构和脚本。

在我们使用实时编辑模式之前，我们需要确保在插件设置页面中激活了插件，并且 WebStorm 浏览器扩展已安装并激活。我们已经在调试部分使用过它。

对于本节，我们将使用我们在 Bootstrap 示例中创建的项目。因此，打开示例，或者从 GitHub 仓库 github.com/srosca/webstorm_essentials_bootstrap.git 创建一个新的项目。一旦你有了所有必要的代码，从 运行 | 编辑配置… 打开 运行/调试配置 对话框，如图所示。选择 JavaScript 作为模板，Bootstrap 作为名称，并将 http://localhost:63369/webstorm_essentials_bootstrap/index.html 作为 URL。

一旦设置了运行配置，你就可以从 运行 菜单或工具栏开始调试会话。启动此会话后，你可以访问多个工具，这些工具将有助于你的项目开发。

当你更改光标位置或当我们点击元素时，HTML 文件中的所有代码将在浏览器中突出显示。

下一个图像显示了实时编辑模式的常规设置，其中你同时保持编辑器窗口和浏览器打开，并且当你编辑代码时，更改会立即反映出来。

现在，如果我们更改 HTML 文件，所有更改将立即在浏览器中反映出来。WebStorm 知道如何刷新我们对 HTML、CSS、JavaScript 文件或任何生成更改的文件所做的所有更改。

在实时编辑模式下，你还可以在 元素 选项卡的 调试 部分找到页面结构和脚本的概述。

从开发者的角度来看，实时编辑模式非常有用，因为他/她可以快速看到更改如何影响页面，因此能够快速调试和原型化页面。

与 Emmet 一起工作

Emmet 是一组插件，它使用户能够使用一种特殊的语法，该语法可以转换为 HTML、JSX 或 CSS。它是一种提高生产力的工具，使用户能够快速编写代码。在 WebStorm 中，配置是在设置 | 编辑器 | Emmet页面下找到的设置页面中进行的。有单独的配置页面用于通用、HTML、JSX和CSS设置，如下面的截图所示：

在我们开始之前，请确保你已经打开了 Bootstrap 示例，然后打开index.html和main.css文件。

当你输入 Emmet 代码时，如果你在 HTML 设置页面中选择了此选项，WebStorm 将显示一个预览窗口。在开始时这样做是个好主意，这样你就可以习惯语法。预览将显示你的最终代码将是什么样子。

现在你必须在index.html文件中在<h1>之后插入示例，所以将光标定位在那里，然后输入ul#features>li.feature*4。然后按Tab键。这将按如下方式展开代码：

<ul id="features">
    <li class="feature"></li>
    <li class="feature"></li>
    <li class="feature"></li>
    <li class="feature"></li>
</ul>

现在你已经有了 HTML 代码，前往main.css文件，以便你可以创建 CSS 代码。为元素创建一个空的定义：

#features .feature{
}

你现在可以在其中输入你的 Emmet 代码。如果你输入fz然后按下Tab键，这将展开为font-size，我们可以在其中设置所需的字体大小。对于 CSS，预览总是激活的。

在本节中，我们给出了一些 Emmet 如何使用的简单示例。然而，如果你想进一步学习这个主题，我建议查看docs.emmet.io/提供的文档。

TODO 功能

WebStorm 包含 TODO 功能，以便你可以为其他用户或未来的更新创建任务列表。它也可以用作通知系统，通知用户需要关注的问题，例如待回答的问题、稍后阶段要做的事情、优化和改进。在多个用户协作的大型项目中，这是一个不可或缺的工具。

要使用TODO，你必须在源代码中输入特殊注释。默认情况下，WebStorm 自带两个预定义的模式，但你可以根据需要定义任意多的模式。默认模式要求你创建一个包含TODO或FIXME关键字的注释。这些特殊注释会使用特殊颜色突出显示，这些颜色可以在首选项 | 编辑器 | 颜色和字体 | 通用设置页面中定义。

WebStorm 还创建了一个特殊部分，你可以在这里看到所有你的 TODO 项。你还可以创建过滤器和自定义规则，以便只显示相关项。

差异查看器

WebStorm 有一种特殊模式，允许我们比较两个文件或文件在不同时间点的版本（例如，不同的 Git 提交）。在这个模式下，我们可以轻松地发现两个文件之间的差异或对文件所做的更改。差异查看器也是一个具有代码补全、实时模板等功能的高级编辑器。因此，我们可以在这种模式下直接更改代码。

您可以通过 视图 | 与...比较 菜单或通过在 项目 面板中选择两个文件来访问此对话框。要比较文件与提交中的版本，您需要转到 版本控制 日志，选择一个文件，然后从上下文菜单中选择 显示差异。

此对话框允许我们快速查看文件之间的差异并审查任何更改。

跟踪本地历史记录

在 WebStorm 中修改的每个文件都享有强大的本地历史记录模式的益处，该模式跟踪对该文件所做的所有更改。本地历史记录就像一个本地版本控制系统，与可能附加到项目上的其他系统并行工作，并跟踪所有更改，包括在提交到其他 VCS 之间的更改。

本地历史记录仅跟踪对小于 1 MB 的文本文件所做的更改。要访问此对话框，您需要从任何打开的文件的上下文菜单中选择 本地历史记录。

摘要

在本章的最后，我们探讨了 WebStorm 的一些专注于开发者体验和生产力的功能。

我们已经学习了如何使用智能编辑方法（Live Edit 和 Emmet），跟踪项目中需要执行的任务，以及查看两个文件之间的差异或文件在一段时间内所做的更改。

随着我们的旅程即将结束，我希望您已经享受了学习 WebStorm 如何帮助您完成日常任务的过程。我可以从经验中告诉您，花在学习这个 IDE 上的所有时间都将使您成为一个更加自信和高效的开发者。它是开发中的无价之宝，帮助您从开发简单的网页到更复杂的应用程序，再到代码的调试和测试。

我想以感谢您加入我的这次旅程结束，并希望您喜欢这个新工具在您的开发工具包中。