嗨，我是芦苇Z。本文是 macOS新手入门系列。

很多刚接触 MacBook 的朋友，都会有这样的疑问：触控板没有明显的左右键，怎么实现“右键点击”？其实，macOS 早已为你准备了多种便捷的右键方式，无论是日常文件管理，还是网页操作，都离不开它。下面就带你一步步设置和使用。

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

工具简介

ESLint

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

Prettier

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

两者的区别和配合

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

安装和基础配置

1. 安装 ESLint

# 安装 ESLint
npm install --save-dev eslint

# 交互式初始化配置
npx eslint --init

交互式配置选项：

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

Jest 简介

核心特性

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

适用场景

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

安装和基础配置

1. 安装 Jest

# 安装 Jest
npm install --save-dev jest

# 安装类型定义（TypeScript 项目）
npm install --save-dev @types/jest

2. 基础配置

创建 jest.config.js 文件：

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. 团队协作：保持团队成员使用相同版本

实际例子

# 旧项目可能需要 Node.js 14
# 新项目使用最新的 Node.js 20
# 某些工具如 Wrangler 可能对版本敏感

基本切换操作

查看可用版本

# 查看已安装的版本
nvm ls

# 查看当前使用的版本
nvm current
# 输出示例：v18.17.0

# 查看可安装的版本
nvm ls-remote --lts  # 查看所有 LTS 版本

安装并切换到指定版本

# 安装 Node.js 18
nvm install 18.17.0

# 安装最新的 LTS 版本
nvm install --lts

# 安装最新版本
nvm install node

切换到已安装的版本

# 切换到 Node.js 18
nvm use 18.17.0

# 切换到最新 LTS 版本
nvm use --lts

# 切换到最新版本
nvm use node

# 使用主版本号（自动选择最新的子版本）
nvm use 18

实际应用场景

场景一：解决工具兼容性问题

# 某些工具（如 Wrangler）可能在最新版本遇到问题
# 切换到兼容版本
nvm install 18
nvm use 18

# 安装工具
npm install -g wrangler

# 验证工具是否正常工作
wrangler --version

场景二：项目开发环境管理

# 项目 A 使用 Node.js 16
cd project-a
nvm use 16.20.0

# 项目 B 使用 Node.js 18
cd project-b
nvm use 18.17.0

场景三：使用 .nvmrc 文件自动切换

在项目根目录创建 .nvmrc 文件：

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

问题表现

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

解决方法

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

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

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

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

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

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

现代开发环境的核心组成

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