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