前端eslint工程化配置

背景：没有好好记录过项目搭建的流程，现在准备记录一下。这里是基于eslintv9 主要从几方面开始记录，这个项目将作为以后得一个react+tsx的项目模版。

一、react项目搭建总结

1、创建vite项目

react-ts 是vite提供的 react + typesctrpt的模板假如你要自己选末班你就先执行下面这段命令

js 复制代码

pnpm create vite@latest my-react-ts-app

直接创建react-ts模板的命令

js 复制代码

pnpm create vite@latest my-react-ts-app --template react-ts

2、配置工程化（antfu）

1.安装依赖

eslint这里我用的是v9，规则太多,这里我们一键使用antfu的配置,

js 复制代码

pnpm i eslint @antfu/eslint-config --save-dev

2.在根目录创建eslint.config.js

基础配置如下：

js 复制代码

import antfu from '@antfu/eslint-config'

export default antfu({})

加入react hooks的校验安装依赖react的插件依赖

sql 复制代码

# 确保 React 类型依赖正确（供 ESLint 解析 React 语法）
pnpm i @types/react @types/react-dom --save-dev
pnpm i eslint-plugin-react-hooks --save-dev

生效配置：

js 复制代码

import antfu from '@antfu/eslint-config'
import reactHooks from 'eslint-plugin-react-hooks'

export default antfu({
  type: 'react',
  plugins: {
    'react-hooks': reactHooks,
  },
  rules: {
    // 强制启用 Hooks 核心规则
    'react-hooks/rules-of-hooks': 'error', // 检查 Hooks 调用位置
    'react-hooks/exhaustive-deps': 'error', // 检查依赖项完整性
  },
})

3.配置package.json脚本

js 复制代码

  "scripts": {
    "lint": "eslint .", // 检查所有文件
    "lint:fix": "eslint . --fix" // 自动修复可修复的问题
  }

3、根目录创建prettier.config.js

代码块自己任意发挥一下，还没有完全完善

js 复制代码

export default {
  semi: false, // 不使用分号
  singleQuote: true, // 使用单引号
  arrowParens: 'avoid', // 单参数箭头函数省略括号
  jsxBracketSameLine: false, // 强制闭合括号换行
  printWidth: 120,
  bracketSpacing: true,
  endOfLine: 'auto', // 换行符自动
  tabWidth: 2, // 缩进
  plugins: [
    'prettier-plugin-tailwindcss',
  ],
}

5、.vscode文件配置

实现保存自动格式化

js 复制代码

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  } // 保存时自动修复eslint错误
}

6、遇到的问题：

1、json文件自动保存没有被格式化要先设置一下默认的格式化配置