React + TypeScript + Vite

基本能力

产品定位

mcp-client-server-demo 是一个前端开发模板，旨在简化 React 和 TypeScript 项目的初始配置，提升开发效率。

核心功能

1. React + TypeScript 支持：提供 React 和 TypeScript 的集成开发环境。
2. Vite 构建工具：支持快速的开发构建和热模块替换（HMR）。
3. ESLint 规则检查：内置 ESLint 配置，支持类型感知的 lint 规则。
4. 插件支持：提供官方插件（如 @vitejs/plugin-react 和 @vitejs/plugin-react-swc）以支持 Fast Refresh。

适用场景

1. 快速启动 React 项目：适用于需要快速搭建 React + TypeScript 项目的开发者。
2. 前端开发学习：适合初学者学习 React 和 TypeScript 的开发环境配置。
3. 生产应用开发：支持生产环境的 ESLint 配置优化。

工具列表

1. @vitejs/plugin-react：使用 Babel 实现 Fast Refresh。
2. @vitejs/plugin-react-swc：使用 SWC 实现 Fast Refresh。
3. eslint-plugin-react：提供 React 相关的 ESLint 规则。

常见问题解答

1. 如何扩展 ESLint 配置？
2. 更新 parserOptions 以启用类型感知的 lint 规则。
3. 替换 tseslint.configs.recommended 为 tseslint.configs.recommendedTypeChecked 或 tseslint.configs.strictTypeChecked。
4. 可选添加 ...tseslint.configs.stylisticTypeChecked。
5. 安装 eslint-plugin-react 并更新配置。

使用教程

使用依赖

1. 确保已安装 Node.js 和 npm/yarn。
2. 安装 Vite： bash npm install -g vite

安装教程

1. 克隆项目或使用模板创建新项目。
2. 安装依赖： bash npm install
3. 启动开发服务器： bash npm run dev

调试方式

1. 检查 ESLint 配置是否正确： bash npx eslint .
2. 使用 Vite 的 HMR 功能实时调试代码。

许可证

None