nextjs项目配置eslint+prettier
2023-07-06
80 字约 1 分钟
...一、安装eslint + prettier + eslint-plugin-prettier
pnpm i eslint prettier eslint-plugin-prettier -D
二、配置.eslintrc.json
{
"extends": ["next/core-web-vitals"], // 这个是nextjs官网推荐的写法
"env": {
"es6": true,
"node": true
},
"plugins": ["prettier"], //这个是为了整合我们自己配置.prettierrc.js
"rules": {
"prettier/prettier": "error"
}
}
三、配置.prettiterrc.js
module.exports = {
singleQuote: true, // 使用单引号代替双引号
printWidth: 200, // 超过最大值换行
semi: false, // 结尾不用分号
useTabs: true, // 缩进使用tab, 不使用空格
tabWidth: 4, // tab 样式宽度
bracketSpacing: true, // 对象数组, 文字间加空格 {a: 1} => { a: 1 }
arrowParens: 'avoid', // 如果可以, 自动去除括号 (x) => x 变为 x => x
proseWrap: 'preserve',
htmlWhitespaceSensitivity: 'ignore',
trailingComma: 'all',
}如果您觉得这篇文章有帮助,请点个赞吧~
相关文章
更多文章 →前端规范2024-12-04
Husky(husky9.x版本适配) + Lint-staged + Commitlint + Commitizen
Husky Husky 是 钩子工具,可以设置在 git 各个阶段(pre commit、commit msg 等)触发。 官方网站: Husky 安装方式: 安装命令: 自动生成的 目录和指令: Lint staged lint staged 是一个在 git add 到暂存区的文件运行 linters (ESLint/Prettier/StyleLint) 的工具,避免在 git commit 提交时在整个项目执行。 可以让你当前的...
学习
前端规范2024-09-11
✨ feat: 自动给git提交添加emoji 无需手动输入
很多人都用过 ,或者类似的工具,但这些工具都需要靠手动书写、命令行工具、vscode插件来添加emoji,不太方便,本身emoji意义不大只是锦上添花的东西, 本文通过几行简单的自定义脚本来自动添加emoji , 锦上添花的同时没有任何额外负担 不用手动输入 ,根据type自动添加,也可以根据type scope组合 支持用任何工具提交 命令行 GUI图形化 自定义emoji映射 feat(core): 🥇 feat(ui): 🥈...
学习
前端规范2024-09-10
从HTML活动页面到 Vue、React 大型项目都通用的 git hooks 配置
git提交时不加审核,团队内的git规范很容易被一次次的样式拉扯修改、小bug调整等git提交给冲得稀烂。这时候可以使用 git 原生的 hooks,在 commit 之前监听一下 commit 内容。但是原生 git hooks 的配置默认是不同步到仓库的,这样一来,配置好的 hooks 事件其实就是本地单机事件,无法很好的团队共享。而 + 刚好能处理这个场景。 Husky Husky 是一个 Git Hook 工具,它允许开发者在...
学习
八股文2026-07-30
一、TypeScript与类型系统(20题)
1\. 在定义AI接口返回的嵌套数据结构(如多轮对话、工具调用结果)时,如何用TypeScript的泛型与条件类型实现灵活的类型推导? 场景:为“AI助手”定义统一的消息类型系统,需兼容不同模型供应商(OpenAI/Anthropic)及内部(Moonshot)的返回格式。 核心答案: 构建一个以泛型为基础、条件类型为分支的层次化类型系统。核心是利用泛型参数化“消息内容”、“工具调用”和“提供商”,再通过条件类型精确匹配不同场景下的数据...
学习
godot2026-07-27
Godot 4 常用 UI 节点详解
Godot 4 常用 UI 节点详解 在 Godot 4 中,UI 系统基于 Control(控件) 节点构建。所有 UI 节点都继承自 Control,形成一棵完整的 UI 树。与游戏引擎中常见的"Canvas + DOM"模式不同,Godot 的 UI 系统是声明式的——你在场景中搭好节点树,引擎自动完成布局计算。 一、布局系统:Container 家族 Container 是 Godot UI 的 骨架 。它决定了子节点的大小和位...
学习
cocos2026-07-22
🎯 Cocos Creator 生命周期详解
Cocos Creator 生命周期详解 一、前言 Cocos Creator 作为主流的游戏开发引擎,其组件化架构的核心就是 生命周期回调函数 。理解这些回调的触发时机、执行顺序和使用场景,是写出高质量游戏逻辑的基础。 本文基于 Cocos Creator 3.x ,系统梳理从引擎启动到场景切换、从节点创建到销毁的完整生命周期。 二、组件生命周期回调总览 Cocos Creator 的生命周期回调按触发顺序排列如下: | 回调函数 |...
学习
评论
请登录后发表评论
去登录