开发环境设置

5.1 选择 IDE

想要写代码，那就得写代码。这话有理。不过要开始写代码，先要装个 IDE（编程专用的小工具），然后再创建个项目。

IDE 有很多选择，拿来学 Web 开发都够用，毕竟项目代码最终都会在浏览器里跑 😊

以下是 4 个最火的选择：

• Visual Studio Code 来自 Microsoft
• Intellij IDEA Community Edition
• Atom 来自 GitHub
• WebStorm Community Edition ()

我个人偏爱 WebStorm，不过选哪个都行，区别真不大。下面有几个设置 IDE 的关键截图。

5.2 下载 WebStorm

步骤 1. 首先得下 WebStorm。搜索 Google 或直接点链接。你会看到这样漂亮的界面：

步骤 2. 大胆点击“下载”，下载就开始了。如果一切顺利，你会看到这样的提示：

步骤 3. 操作系统通常会自动识别。但如果没有识别正确，可以在这个页面选择——下载 WebStorm：

5.3 安装 WebStorm

下载好 WebStorm 的合适版本后，就可以开始安装了。以下是几个关键步骤：

步骤 1. 打开安装程序，你应该看到这样的窗口：

步骤 2. 勾选几个选项，像我这样：

步骤 3. 不需要重启：

5.4 WebStorm 非商业用途

如果你是出于学习等非商业目的使用这些 IDE，可以免费用哦。

1. 启动 WebStorm。
2. 启动时会弹出一个窗口，可以选择非商业用途的版本。
3. 登录你的 JetBrains 账户，或新建一个账户。
4. 接受“Toolbox 非商业用途订阅协议”。
5. 享受开发的乐趣吧。

如果你已经开始试用期或用付费许可激活了 IDE，也可以按照以下步骤转为非商业订阅：

1. 对于 WebStorm，进入 Help | Register。
2. 在弹出的窗口中点击 Remove License 按钮。
3. 选择 Non-commercial use（非商业用途）。
4. 登录你的 JetBrains 账户或新建一个账户。
5. 接受“Toolbox 非商业用途订阅协议”。
6. 享受开发的乐趣吧。

5.5 创建第一个项目

安装好 WebStorm 后，只需启动它并创建第一个项目。按照下面的步骤操作：

步骤 1. 启动 WebStorm。你会看到这样的窗口：

步骤 2. 创建新项目——点击 New Project 按钮。

接下来你需要：

• 为你的第一个项目选个名字。
• 指定你的第一个项目的文件夹（Location 字段）。如果 WebStorm 默认提供了 Admin 文件夹，最好换掉，这样以后问题会少些。

我这大概是这样设置的：

步骤 3. 如果一切顺利，你会看到这样的界面：