使用 WebStorm

6.1 IDE 的组成解析

来瞧瞧这里都有什么吧。

1. 项目的文件夹和文件树：

这里显示的是我们项目文件夹的内容 — web-storm-10。

我特地创建了一个文件，这样更容易理解它的结构。在下一节课你也会这么做。

2. 当前打开的文件：

这是文件 index.html 的内容，语法有高亮显示。

3. 顶部看到的主菜单：

右上角有一些很实用的按钮：

• “绿色三角形” — 启动项目按钮
• “小虫子” — 调试模式按钮
• “放大镜” — 项目搜索按钮
• “齿轮” — 设置按钮

4. 左侧的侧边栏：

这里有几个很有用的按钮。我们特别关心的是 Terminal 按钮。

5. 状态栏：

状态栏左侧显示当前打开文件的路径。右侧显示它的编码：CRLF, UTF-8。很快你就会对这些了如指掌。

6.2 项目解析

1. HTML 文件。

这些文件的扩展名是 .html，WebStorm 用两个箭头的绿色图标标记它们。 这里只有一个这样的文件 — index.html

这些文件的扩展名是 .js，WebStorm 用黄色图标标记它们。截图中目前没有这样的文件。

2. 样式的 CSS 文件。

这些文件的扩展名是 .css，WebStorm 用蓝色图标标记它们。截图中目前也没有这样的文件。

3. 静态媒体文件。 这些指的是包含数据而不是代码的文件。比如文本文件、图片、媒体文件等等。目前我们项目中还没有它们。

4. 第三方库 (External libraries)。 我们的项目中现在还没有，但是当你下载它们后，WebStorm 会在这里显示出来。

6.3 使用终端

在 WebStorm 中你可以直接使用操作系统的命令行界面。在 Linux 和 MacOS 中，命令行被叫做终端 (Terminal)，所以在 WebStorm 中也叫这个名字。其实这是一个程序员中约定俗成的叫法，不是 WebStorm 的独创。

要打开 Terminal，你需要点击侧边栏的终端按钮：

然后你会看到一个这样的窗口：

在这个窗口中你可以输入操作系统的命令。而我们主要关心其中的一条命令。

来看看目前 Windows 的版本。输入以下命令：

    
      ver
    
  

下面是我的输出结果：

如果出错了，先输入命令 “cmd”，然后再写 “ver”。

6.4 什么是 CodeGym 插件，它有啥用？

这是一个应用程序，是专门集成到 Intellij IDEA 或 WebStorm 开发环境中的模块，它让你可以在里面处理 CodeGym 课程的任务。你可以写代码、检查代码、对比默认解法，还有很多功能。插件中的任务会和你在 CodeGym 上的账号同步，所以在网站和 IDE 中是一样的。

你可以在 Jetbrains Marketplace 中直接从你的开发环境下载 CodeGym 插件。我们以 WebStorm 为例演示具体步骤，同样的操作也适用于 Intellij IDEA。

1. 进入 "设置"，Windows/Linux File - Settings，MacOS WebStorm - Preferences。如果没有设置选项，打开任意项目或创建新项目。

2. 在弹出的窗口中，侧边栏选择 Plugins，然后打开 Marketplace 标签。在搜索框中输入 codegym

3. 选择插件并点击 Install。
4. 重启 (Restart IDE) WebStorm，开始使用插件。
5. 你会发现界面稍微变了一点，上方横向工具栏会有一个 登录账号 的按钮。

点击后会弹出账号登录的窗口，输入你的密钥：

提醒：你的密钥可以在 “设置” → “安全性与登录” 中找到。

登录成功后项目和 Codegym SDK 开始加载（请不要改动版本）。

6. 要打开新任务，点击左侧垂直面板中的 Tasks，然后在左侧面板中选择任务卡，并在弹出窗口中点击 打开：

7. 你会看到一个有两个标签的窗口。一个是条件，另一个是代码输入。
8. 现在写入任务的解答代码，并点击 检查 按钮。

任务的站点和插件同步

任务列表和状态每五分钟会自动更新，或者在提交任何任务后（codegym 服务器）。

所以如果你在网站上完成了一个任务，插件中也会显示为已完成。如果想立即更新任务状态， 可以点击右上角的头像，在下拉菜单中选择 同步任务：

插件的新手模式

这对 WebStorm 和其他开发环境经验少（或者没有）的用户是简化版模式。在这个模式下隐藏了一些 WebStorm 功能。如果想关闭这个模式，点击右上角的头像，在下拉菜单中选择设置：

如何在 PRO 模式下隐藏导航面板

点击设置 (⚙️)，取消选中 "显示插件导航面板" 的选项：