工具推荐

22.1 编辑器：VS Code

为什么选择 VS Code？

• 免费开源：完全免费，支持所有主流操作系统
• 轻量级：启动速度快，占用资源少
• 强大的插件系统：丰富的插件生态，满足各种开发需求
• 智能提示：内置代码补全、语法高亮、错误检测
• 集成终端：无需切换窗口，直接在编辑器中运行命令

推荐插件

1. JavaScript (ES6) code snippets：提供常用的 ES6 代码片段
2. Prettier - Code formatter：自动格式化代码，保持代码风格一致
3. ESLint：代码质量检查，帮助发现潜在问题
4. Live Server：启动本地服务器，实时预览网页
5. GitLens：增强 Git 功能，查看代码提交历史

基础配置

1. 主题设置：选择一个舒适的主题，如 Dark+ (默认深色) 或 Light+ (默认浅色)
2. 字体设置：推荐使用 Consolas 或 Fira Code 等等宽字体
3. 缩进设置：建议使用 2 个空格作为缩进
4. 自动保存：开启自动保存功能，避免忘记保存代码

22.2 在线运行工具：CodePen/JSBin

CodePen

• 优点：界面美观，社区活跃，支持多种前端技术栈
• 用途：快速原型开发，分享代码片段，学习他人代码
• 特点：支持 HTML、CSS、JavaScript 实时编辑和预览

JSBin

• 优点：简洁易用，加载速度快，适合快速测试代码
• 用途：快速验证 JavaScript 代码，调试问题
• 特点：支持代码分享和协作

22.3 学习文档：MDN Web Docs（官方权威）

为什么选择 MDN Web Docs？

• 官方权威：由 Mozilla 维护，内容准确可靠
• 全面详细：覆盖所有前端技术，包括 JavaScript、HTML、CSS 等
• 示例丰富：每个知识点都有详细的代码示例
• 更新及时：跟进最新的 web 标准和技术

如何使用 MDN Web Docs？

1. 直接搜索：在搜索引擎中输入 "MDN + 关键词"，如 "MDN JavaScript array"
2. 浏览目录：通过 MDN 的分类目录浏览相关知识点
3. 参考示例：查看代码示例，理解知识点的实际应用
4. 查阅兼容性：了解不同浏览器对特性的支持情况