ESLint 和 Prettier 是现代 JavaScript 开发中不可或缺的代码质量工具，它们帮助我们维护一致的代码风格、发现潜在错误，并确保代码遵循最佳实践。

工具简介

ESLint

• 作用: 静态代码分析工具，检查代码错误和风格问题
• 功能: 语法错误检测、代码规范检查、最佳实践建议
• 配置: 高度可配置，支持自定义规则

Prettier

• 作用: 代码格式化工具，自动格式化代码
• 功能: 统一代码风格、自动格式化、保存时格式化
• 特点: 固执己见的格式化，减少配置复杂度

两者的区别和配合

• ESLint: 关注代码质量和逻辑错误
• Prettier: 关注代码格式和视觉呈现
• 配合使用: ESLint 负责逻辑检查，Prettier 负责格式化

安装和基础配置

1. 安装 ESLint

Jest 是 Facebook 开发的现代 JavaScript 测试框架，具有零配置、内置断言、模拟功能和代码覆盖率等特性，是现代 JavaScript 项目的首选测试解决方案。

Jest 简介

核心特性

• 零配置: 开箱即用，无需复杂配置
• 快照测试: 自动生成和比较组件输出快照
• 并行测试: 自动并行运行测试，提高效率
• 代码覆盖率: 内置代码覆盖率报告
• 模拟功能: 强大的 mock 和 spy 功能
• 监听模式: 文件变化时自动重新运行测试

适用场景

• 单元测试
• 集成测试
• 快照测试
• React/Vue 组件测试
• Node.js 应用测试

安装和基础配置

1. 安装 Jest

Babel 是现代 JavaScript 开发的核心工具，它能将 ES6+ 代码转译为向后兼容的 JavaScript 版本，让我们能够在各种环境中使用最新的语言特性。

Babel 简介

什么是 Babel？

Babel 是一个 JavaScript 编译器，主要用于：

在现代前端开发中，不同项目可能需要不同版本的 Node.js。NVM (Node Version Manager) 让我们能够轻松地在多个 Node.js 版本之间切换。

为什么需要切换 Node.js 版本？

常见场景

1. 项目兼容性：旧项目可能依赖较老的 Node.js 版本
2. 工具要求：某些工具对 Node.js 版本有特定要求
3. 测试需求：需要在不同版本下测试应用兼容性
4. 团队协作：保持团队成员使用相同版本

实际例子

苹果开发者计划的退订入口好找也不好找。好找是因为就在手机端，操作简单；不好找是因为惯性思维在网页端寻找，找不到的。
在我电话联系客服之后，给我发了个「取消订阅」的帮助文档，并帮我申请了退款流程。

问题表现

1. 打开 modal 后，点击输入框，软键盘弹出。
2. 关闭软键盘后：
   • modal 内容未能恢复到正确位置。
   • 元素“视觉上”在某一位置，但实际点击响应区域发生偏移（如按钮点击无效或响应错位）。

解决方法

经过多种尝试，发现仅通过 CSS 布局无法彻底解决该问题。

防抖（debounce）和节流（throttle）都是前端开发中用于优化频繁触发事件（如 scroll、resize、input、mousemove 等）的方法，但它们的应用场景和实现思路所有不同。

在 React 项目中，有时我们需要处理 JSX 字符串并将其转换为真正的 React 元素，比如从 CMS 获取模板或构建可视化编辑器时。本文介绍三种实用方案及其优缺点。

1. react-jsx-parser：安全简单型

react-jsx-parser 是一个简单安全的方案，

现代 JavaScript 开发环境是一个完整的工具链生态，它让我们能够使用最新的语言特性、保证代码质量、进行自动化测试，并优化开发体验。

现代开发环境的核心组成

一个完整的 JavaScript 开发环境通常包含以下组件：

项目初始化是构建 JavaScript 开发环境的第一步，正确的初始化配置能为后续开发工作奠定坚实基础。

一、创建项目目录

1. 创建项目根目录