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"]
}

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

相关推荐
小菜全1 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
duansamve6 小时前
React 18项目中使用环境变量(适用于不同环境下的配置常量)
react.js
小刘鸭地下城9 小时前
告别服务端渲染卡顿!useSyncExternalStore 优化水合作用全解析
react.js
Winson℡11 小时前
如何理解 React Native 中的 useEffect
javascript·react native·react.js
乖女子@@@13 小时前
React-props的children属性
前端·javascript·react.js
八月十八13 小时前
React常用Hooks及使用示例大全
前端·javascript·react.js
wayne21416 小时前
React Native启动性能优化实战:Hermes + RAM Bundles + 懒加载
react native·react.js·性能优化
殇蓝16 小时前
react-lottie动画组件封装
前端·react.js·前端框架
一條狗16 小时前
学习日报 20250928|React 中实现 “实时检测”:useEffect 依赖项触发机制详解
前端·react.js
Gazer_S16 小时前
【React 状态管理深度解析:Object.is()、Hook 机制与 Vue 对比实践指南】
前端·react.js·前端框架