rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
56 lines (34 loc) • 2.09 kB
Markdown
title: 初始化 IDE
上一章节中，我们已经创建了一个新的 Modern.js MWA 项目。
在开始写代码之前，我们将会在这一章节里先确认 IDE 相关功能。
Modern.js 框架默认提供了对 VSCode 和 WebStorm 的支持，本章以 VSCode 为例。
## 用 VSCode 打开项目根目录
```bash
cd hello-modern/
code .
```
:::info 补充信息
必须打开项目根目录，不能打开其他子目录或父目录，否则 IDE 支持不会生效。
:::
## 安装插件
点击左侧栏上的插件（Extensions）面板，过滤 `@recommanded` 列表，可以看到这里分为工作区推荐插件（Workspace Recommandations）和其他推荐插件（Other Recommandations）。
点击工作区推荐插件顶部的下载按钮，安装当前仓库推荐的（也就是 Modern.js 框架推荐的）所有 VSCode 插件，等待全部安装成功，重启 VSCode 让插件生效。
如果 VSCode 弹出这个确认框，点击 Allow 即可：
也可以检查 VSCode 底栏右侧显示的 ESLint 状态，或 VSCode 的 Problem 面板，比如如果有下面这样的提示：
点击底栏上的 ESLint 就会弹出上面的对话框。
到这里，不需要做任何配置，IDE 就已经准备就绪，可以开始写代码了。
:::note 注
这些 VSCode 插件不会影响性能，如果实在不想一键安装所有插件，至少要安装以下插件：
- editorconfig
- eslint
- vscode-styled-components
- language-postcss
- Eslint-disable-snippets
:::
本章节接下来的步骤，也起到检查 IDE 功能的作用，任一步骤不符合描述，都说明有问题。