---
title: ​初始化 IDE​​​​
---

上一章节中，我们已经创建了一个新的 Modern.js MWA 项目。

在开始写代码之前，我们将会在这一章节里先确认 IDE 相关功能。

Modern.js 框架默认提供了对 VS Code 和 WebStorm 的支持，本章以 VS Code 为例。

## 用 VS Code 打开项目根目录

```bash
cd hello-modern/
code .
```

![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-mwa.png)

:::info 补充信息
必须打开项目根目录，不能打开其他子目录或父目录，否则 IDE 支持不会生效。
:::

## 安装插件

点击左侧栏上的插件（Extensions）面板，过滤 `@recommanded` 列表，可以看到这里分为工作区推荐插件（Workspace Recommandations）和其他推荐插件（Other Recommandations）。

![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-plugin.png)

点击工作区推荐插件顶部的下载按钮，安装当前仓库推荐的（也就是 Modern.js 框架推荐的）所有 VS Code 插件，等待全部安装成功，重启 VS Code 让插件生效。

如果 VS Code 弹出这个确认框，点击 Allow 即可：

![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-alert.png)

也可以检查 VS Code 底栏右侧显示的 ESLint 状态，或 VS Code 的 Problem 面板，比如如果有下面这样的提示：

![vsc-bottom-bar](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-bottom-bar.png)

点击底栏上的 ESLint 就会弹出上面的对话框。

到这里，不需要做任何配置，IDE 就已经准备就绪，可以开始写代码了。

:::info 注
这些 VS Code 插件不会影响性能，如果实在不想一键安装所有插件，至少要安装以下插件：

- editorconfig
- eslint
- vscode-styled-components
- language-postcss
- eslint-disable-snippets
:::

本章节接下来的步骤，也起到检查 IDE 功能的作用，任一步骤不符合描述，都说明有问题。