首页/文章/前端规范

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 工具,它允许开发者在...
学习
http-网络2026-10-15
OAuth 2.0是什么,以及如何正确接入
一、先从一个需求理解 OAuth 2.0 假设你开发了一个相册整理工具,用户希望它读取某个云盘里的照片。 把云盘密码交给工具,会带来几个问题:工具拿到的权限太大,密码可能泄漏,用户也难以只撤销这个工具的访问。 OAuth 2.0 提供一套 委托授权机制 :用户在云盘自己的页面确认授权,工具取得一个有权限范围和有效期的访问令牌,再用它调用云盘 API。用户的云盘密码不交给工具。 可以把它理解为:给工具一张“限定用途的通行证”。但令牌泄漏同...
学习
前端2026-10-15
前端动画全景指南
一、前端动画到底是什么 前端动画,就是让画面随时间、用户输入或页面状态连续变化。变化的对象可以是按钮的位置、弹窗的透明度、SVG 的线条、Canvas 里的粒子,也可以是三维场景中的镜头。 先把三个问题分开: | 问题 | 常见答案 | | | | | 画什么? | DOM/CSS、SVG、Canvas 2D、GPU 渲染的场景、预制动画素材 | | 怎样变化? | CSS 过渡/关键帧、Web Animations API、逐帧计算、...
学习
flutter2026-10-14
Flutter Android 正式签名实战:生成密钥、配置构建与验证 APK
Flutter Android 正式签名实战:生成密钥、配置构建与验证 APK Android 正式签名不需要购买证书。开发者可以自己生成密钥,用它给 APK 签名;密钥的用途是建立稳定的应用身份。签名有效并不等于应用已经通过商店审核,也不等于应用功能已完成真机验收。 本文面向 Flutter Android 项目,介绍从开发签名切换到独立正式签名的完整流程。应用名称、目录、包名和证书信息均使用通用示例,不包含真实项目密码、私钥、签名指...
学习

评论

请登录后发表评论

去登录
加载评论中...