前端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文件自动保存没有被格式化 要先设置一下默认的格式化配置

相关推荐
小猪猪屁3 小时前
前端实时通信怎么选?HTTP、WebSocket、SSE 一文看懂
前端·websocket·http
掘金安东尼3 小时前
React 19 发布:useTransition 平滑异步过渡!
前端·javascript·github
用户47949283569153 小时前
ESLint支持多线程Linting啦
前端·javascript·面试
不一样的少年_3 小时前
Onion CLI:3秒建项目,10秒出包的Chrome插件开发脚手架神器
前端·vue.js·chrome
猪哥帅过吴彦祖3 小时前
JavaScript Symbol:那个被忽视的"隐形"数据类型
前端·javascript·面试
前端刚哥3 小时前
el-table 表格封装公用组件,表格列可配置
前端·vue.js
漫漫漫丶4 小时前
Vue2存量项目国际化改造踩坑
前端
Juchecar4 小时前
解决Windows下根目录运行 pnpm dev “无法启动 Vite 前端,只能启动 Express 后端”
前端·后端·node.js
薛定谔的算法4 小时前
面试官问你知道哪些es6新特性?赶紧收好,猜这里一定有你不知道的?
前端·javascript·面试