React+Vite+eslint基础配置

如今的前端框架基本以 React 和 Vue 为主， Vite 好似与Vue更配，但是对 React的支持也是很友好的，在我们使用 React脚手架初始化项目时候，默认使用的还是 Webpack，当我们开发项目到达一定的程度，Webpack的构建时间就会很长，所以尝试使用Vite来替换，Vite 开发环境下使用 esbuild，他不会对整个项目打包，使得他的项目运行速度非常快，开发体验也就比 Webpack 要好。

兼容性注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

当我们初始化一个 Vite + React 也很简单

npm create vite@latest my-app

image.png

生成玩的文件结构如下:

image.png

配置 less，不需要在 vite.config.ts 中添加任何配置

npm install less less-loader -D

配置 eslint

npm install eslint --D

npx eslint --init

.eslintrc.json 文件配置

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "react-app"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "no-console": "warn",
        "no-debugger": "warn",
        "no-alert": "warn",
        "camelcase": "warn",
        "react-hooks/rules-of-hooks": "error", 
        "react-hooks/exhaustive-deps": "warn"
    }
}

// 如果不生效可查看是否安装以下依赖，如果没有安装需安装
npm install eslint-plugin-react-hooks eslint-config-react-app -D

配置 alias 别名

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
    open: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

// tsconfig.json
{
  ...,
  "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
}