Next.js配置Eslint+Prettier+husky规范代码开发

Next.js配置代码格式化和校验

本文概括:

  1. ESLint 可以给项目加上代码校验
  2. Prettier可以格式化代码
  3. Git的钩子可以在提交时自动修复格式化

安装和配置Prettier

Next.js项目已经配置好了EsLint,可以自己加上prettier进行格式化:

官网文档链接:nextjs.org/docs/app/ap...

安装Prettier依赖:

arduino 复制代码
npm install --save-dev eslint-config-prettier

eslint.config.mjs 中加入prettier

ini 复制代码
const eslintConfig = [
    ...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
];

prettier已经可以完成代码格式化了,我们项目中一般会用tailwindCSS,所以可以顺便格式化一下tailwind的类名(下面两个按需使用)

css 复制代码
npm i -D prettier-plugin-organize-imports prettier-plugin-tailwindcss

新建一个 .prettierrc.json 来放置格式化的规则,下面会具体介绍

新建一个 .prettierignore 来放置不需要格式化的内容

格式化命令(可以放钩子里提交之前格式化一下):

perl 复制代码
# 下面的命令会直接帮你格式化
npx prettier . --write
# 下面的命令会检测,不格式化
npx prettier . --check

在IDEA编辑器中配置代码格式化,打开下面的选项:

然后可以给prettier绑定一个快捷键(我这里改成了和默认的格式化是同一个,这样就可以使用默认格式化的同时格式化代码了):

安装和配置husky

huskylint-staged 可以在 Git 提交代码时进行 ESLint 的代码校验和 prettier 的格式化

husky官网:typicode.github.io/husky/get-s...

安装依赖(husk+lint-staged):

arduino 复制代码
npm install --save-dev husky lint-staged
# 下面这个可以在package.json里设置  "prepare": "husky install" 当别人安装依赖的时候会自动执行prepare脚本
npm pkg set scripts.prepare="husky install" 

husky配置:

csharp 复制代码
npx husky init

修改 .husky/pre-commit 文件内容,放入我们需要执行的npx lint-staged

新建一个 .lintstagedrc.json文件,用来配置格式化内容,这里我只格式化src目录下的文件

css 复制代码
{
    "src/**/*.{js,jsx,ts,tsx}": ["eslint --fix"],
    "src/**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
}

现在提交代码之后就会自动进行格式化了。

相关推荐
Bug生产工厂7 小时前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
wordbaby7 小时前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
2401_853406888 小时前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
薛定谔的算法8 小时前
手写React:从Dideact理解前端框架的核心原理
前端·react.js·架构
bug_kada8 小时前
手把手教你做一个React Hooks (Todos)应用(一)
前端·react.js
小鱼儿亮亮1 天前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
小鱼儿亮亮1 天前
使用Redux的combineReducers对数据拆分
前端·react.js
xiaominlaopodaren1 天前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
weixin_423391931 天前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js