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

相关推荐
Nan_Shu_6147 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店17 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖27 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒27 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser29 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan32 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family34 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_1 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理1 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构