搭建Vite、React、TypeScript、EsLint和Prettier用于React项目开发

目录

一、项目搭建

二、eslint与prettier依赖的安装

三、配置.eslintrc.cjs文件及创建.prettierrc.cjs文件

1、.eslintrc.cjs文件的设置内容

2、ESlint忽略规则的.eslintignore文件

3、.prettierrc.cjs文件的具体配置

4、prettier忽略规则的.prettierignore文件

三、在页面中展示错误信息

1、vite-plugin-eslint插件的安装步骤

2、vite.config.ts文件的相关配置说明

本文将详细讲解如何利用vite作为开发框架搭建react项目，同时引入eslint实现代码规范管理，并通过prettier完成代码格式美化工作。为了提高效率，直接提供相关代码示例进行说明。

一、项目构建与实施

    pnpm create vite
    
    

二、安装eslint和prettier的依赖

在vite脚手架工具中，eslint依赖包已被预先集成，这意味着在完成项目初始化后，系统已自动包含eslint及其相关依赖。因此，用户只需额外安装prettier及其配套的依赖包即可满足格式化需求。

    pnpm add  -D eslint prettier @typescript