ESLint 和 Prettier 代码质量工具配置

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

  • 作用: 静态代码分析工具,检查代码错误和风格问题
  • 功能: 语法错误检测、代码规范检查、最佳实践建议
  • 配置: 高度可配置,支持自定义规则
  • 作用: 代码格式化工具,自动格式化代码
  • 功能: 统一代码风格、自动格式化、保存时格式化
  • 特点: 固执己见的格式化,减少配置复杂度
  • ESLint: 关注代码质量和逻辑错误
  • Prettier: 关注代码格式和视觉呈现
  • 配合使用: ESLint 负责逻辑检查,Prettier 负责格式化
# 安装 ESLint
npm install --save-dev eslint

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

交互式配置选项:

Jest 单元测试框架配置

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

  • 零配置: 开箱即用,无需复杂配置
  • 快照测试: 自动生成和比较组件输出快照
  • 并行测试: 自动并行运行测试,提高效率
  • 代码覆盖率: 内置代码覆盖率报告
  • 模拟功能: 强大的 mock 和 spy 功能
  • 监听模式: 文件变化时自动重新运行测试
  • 单元测试
  • 集成测试
  • 快照测试
  • React/Vue 组件测试
  • Node.js 应用测试
# 安装 Jest
npm install --save-dev jest

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

创建 jest.config.js 文件:

使用 NVM 切换 Node.js 版本详解

在现代前端开发中,不同项目可能需要不同版本的 Node.js。NVM (Node Version Manager) 让我们能够轻松地在多个 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 文件:

Web Modal 弹窗在移动端因软键盘导致元素错位与点击异常

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

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

JSX 字符串转 React Element 的几种方案

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

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