跳转到主文档

​初始化 IDE​​​​

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

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

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

用 VS Code 打开项目根目录

cd hello-modern/
code .

vsc-alert

补充信息

必须打开项目根目录,不能打开其他子目录或父目录,否则 IDE 支持不会生效。

安装插件

点击左侧栏上的插件(Extensions)面板,过滤 @recommended 列表,可以看到这里分为工作区推荐插件(Workspace Recommendations)和其他推荐插件(Other Recommendations)。

vsc-alert

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

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

vsc-alert

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

vsc-bottom-bar

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

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

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

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

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