vite+react+ts+eslint+prettier构建react开发项目

一、构建项目

eslint%E5%92%8Cprettier%E7%9A%84%E4%BE%9D%E8%B5%96-toc" style="margin-left:40px;">二、安装eslint和prettier的依赖

eslintrc.cjs%2C%E5%88%9B%E5%BB%BA.prettierrc.cjs-toc" style="margin-left:40px;">三、修改.eslintrc.cjs,创建.prettierrc.cjs

eslintrc.cjs%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE-toc" style="margin-left:80px;">1、.eslintrc.cjs文件配置

prettierrc.cjs%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE-toc" style="margin-left:80px;">2、.prettierrc.cjs文件配置

三、将错误显示在页面上

vite-plugin-eslint%E6%8F%92%E4%BB%B6-toc" style="margin-left:80px;">1、安装vite-plugin-eslint插件

vite.config.ts%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE-toc" style="margin-left:80px;">2、vite.config.ts文件配置

本文将介绍vite作为脚手架构建react开发项目，使用eslint进行代码规范，prettier进行代码美化。花话不多说，直接上代码。

一、构建项目

pnpm create vite

eslint%E5%92%8Cprettier%E7%9A%84%E4%BE%9D%E8%B5%96">二、安装eslint和prettier的依赖

在vite脚手架当中已经内置了eslint依赖包，也就是在项目创建完成后已经有了eslint以及eslint相关的依赖，因此只需要安装prettier和prettier相关的依赖包即可。

pnpm add prettier  eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-html -D

eslintrc.cjs%2C%E5%88%9B%E5%BB%BA.prettierrc.cjs">三、修改.eslintrc.cjs,创建.prettierrc.cjs

eslintrc.cjs%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE">1、.eslintrc.cjs文件配置

module.exports = {
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
    'plugin:react/jsx-runtime'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  settings: {
    react: {
      version: 'detect'
    },
    'html/html-extensions': ['.html', '.we'] // consider .html and .we files as HTML
  },
  plugins: ['react-refresh', 'react', '@typescript-eslint', 'prettier', 'html'],
  rules: {
    'react-refresh/only-export-components': 'warn',
    'prettier/prettier': 'error',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off'
  }
};

prettierrc.cjs%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE">2、.prettierrc.cjs文件配置

module.exports = {
  semi: true,
  endOfLine: 'auto',
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  vueIndentScriptAndStyle: false,
  'jsxBracketSameLine:': true,
  htmlWhitespaceSensitivity: 'ignore',
  wrapAttributes: true,
  overrides: [
    {
      files: '*.html',
      options: {
        parser: 'html'
      }
    }
  ]
};

三、将错误显示在页面上

如果希望在开发的过程中将代码中的错误或者不规范的地方反应在页面上，可以使用vite-plugin-eslint来完成

vite-plugin-eslint%E6%8F%92%E4%BB%B6">1、安装vite-plugin-eslint插件

pnpm add vite-plugin-eslint -D

vite.config.ts%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE">2、vite.config.ts文件配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import viteEslint from 'vite-plugin-eslint';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  console.log('🚀 ~ file: vite.config.ts:6 ~ command:', command);
  console.log('🚀 ~ file: vite.config.ts:6 ~ mode:', mode);
  const boo = mode === 'dev';
  const alias = {
    '@': resolve(__dirname, './src')
  };
  return {
    plugins: [
      react(),
      viteEslint({
        //  failOnError: false
        include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.jsx', 'src/**/*.ts'],
        //  exclue: ['./node_modules/**'],
        cache: false
      })
    ],
    resolve: {
      alias
    },
    css: {
      devSourcemap: boo
    },
    server: {
      host: '0.0.0.0',
      port: 5000,
      open: true
    }
  };
});

以上就是vite+react+ts+eslint+prettier构建react开发项目，如果需要开箱即用可以下载模板,我已经配置好的项目模板，里面也已经安装了redux依赖进行状态管理，tailwind.css来进行样式使用。因此，直接拉下来，就可以配置并启动启动你的项目。