初始化前端项目配置 eslint、prettier、husky 等等
每次新项目都要重新配置一遍,有点麻烦,记录一下。
一、配置 ESLint
1.1 核心配置
执行 npm init @eslint/config 命令进行初始化,根据提示一路下一步即可,完成后会自动生成 eslintrc 文件并安装相关依赖。
1.2 React 编译模式配置
如果 React 使用的是新的编译模式(无需手动导入 React),需要在 extends 中加入 plugin:react/jsx-runtime。
{"extends": ["plugin:react/jsx-runtime",],
}
同时 tsconfig 文件中的 “jsx”: “react-jsx” 也是对应的新模式。
1.3 React 属性自动排序规则配置
React 组件的属性可以借助 eslint 的能力来进行自动排序,在配置文件的 rule 中打开即可。
{"rules": {"react/jsx-sort-props": ["error",{"callbacksLast": true}]}
}
二、配置 Prettier
2.1 核心配置
# 安装 prettier
ni -D prettier# 安装 prettier 整合 eslint 的库
ni -D eslint-plugin-prettier eslint-config-prettier
新建 .prettierrc 文件,并写入以下内容:
{"singleQuote": true,"tabWidth": 2,"semi": false,"trailingComma": "none","plugins": []
}
在 eslint 配置文件中加入
{"extends": ["plugin:prettier/recommended"]
}
2.13 安装扩展插件
# package.json 字段排序插件
ni -D prettier-plugin-packagejson# import 顺序自动调整插件
ni -D prettier-plugin-organize-imports
在配置文件中指定上述两个插件:
{"plugins": ["prettier-plugin-packagejson", "prettier-plugin-organize-imports"]
}
三、配置 commitlint
安装依赖:
ni -D @commitlint/{cli,config-conventional}
生成配置文件:
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
验证是否生效:
npx commitlint --from HEAD~1 --to HEAD --verbose
如果遇到报 ES Module 相关错误,将
commitlint.config.js文件后缀改为cjs即可。
四、配置 stylelint
安装依赖:
ni -D stylelint stylelint-config-recess-order stylelint-config-standard-scss stylelint-prettier
新建 .stylelintrc.json 文件并加入以下配置:
{"plugins": ["stylelint-prettier"],"rules": {"prettier/prettier": true},"extends": ["stylelint-prettier/recommended","stylelint-config-recess-order","stylelint-config-standard-scss"]
}
五、配置 lint-staged
安装依赖:
ni -D lint-staged
新建配置文件 .lintstagedrc.json 并写入如下内容:
{"*.{css,scss}": "stylelint --fix","*": "prettier --ignore-unknown --write","*.{js,jsx,ts,tsx}": "eslint --fix"
}
六、配置 Husky
安装依赖:
ni -D husky
生成相关配置文件:
npm pkg set scripts.prepare="husky install"
npm run prepare
添加钩子:
# git commit 时检查提交信息是否符合规范
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'# git commit 时触发 lint-staged,使用上面的那些 lint 工具检查并格式化一遍有改动的代码文件。
npx husky add .husky/pre-commit "npx lint-staged"
相关文章:
初始化前端项目配置 eslint、prettier、husky 等等
每次新项目都要重新配置一遍,有点麻烦,记录一下。 一、配置 ESLint 1.1 核心配置 执行 npm init eslint/config 命令进行初始化,根据提示一路下一步即可,完成后会自动生成 eslintrc 文件并安装相关依赖。 1.2 React 编译模式配…...
嵌入式存储器为AI的实现提供了实现架构
近年来,大脑启发式计算机领域的研究活动获得了巨大的发展。主要原因是试图超越传统的冯诺依曼架构的局限性,后者越来越受存储器-逻辑通信的带宽和等待时间的局限性的影响。在神经形态架构中,内存是分布式的,可以与逻辑共定位。鉴于…...
iOS开发-格式化时间显示刚刚几分钟前几小时前等
iOS开发-格式化时间显示刚刚几分钟前几小时前等 在开发中经常遇到从服务端获取的时间戳,需要转换显示刚刚、几分钟前、几小时前、几天前、年月日等格式。 主要用到了NSCalendar、NSDateComponents这两个类 NSString *result nil;NSCalendarUnit components (NSC…...
ffmpeg视频音频命令
视频音频合并 视频音频合并,以视频时间为主,音频短了循环 方法1:混音,视频权重0,volume调节音量,aloop无限循环,duration:first为第一个素材的长度 ffmpeg -i video.mp4 -i audio.mp3 -filter_…...
Jenkins工具系列 —— Jenkins 安装并启动
文章目录 安装涉及相关链接选择安装Jenkins版本安装JenkinsJenkins web页面启动卸载Jenkins 安装涉及相关链接 Jenkins官网: https://www.jenkins.io/zh/ Jenkins下载安装步骤: https://www.jenkins.io/zh/download/ 安装各种版本OpenJDK: h…...
使用中间人攻击的arp欺骗教程
文章目录 前言一、查看网络接口配置第 1 步:从受害者处获取 IP 配置第 2 步:在 Linux 中打开数据包转发第 3 步:使用 arpspoof 将包重定向到您的计算机步骤4:拦截来自路由器的包裹步骤5:从目标的浏览器历史记录中嗅探图…...
设计模式、Java8新特性实战 - List<T> 抽象统计组件
一、背景 在日常写代码的过程中,针对List集和,统计里面的某个属性,是经常的事情,针对List的某个属性的统计,我们目前大部分时候的代码都是这样写,每统计一个变量,就要定义一个值,且…...
【JavaEE初阶】博客系统后端
文章目录 一. 创建项目 引入依赖二. 设计数据库三. 编写数据库代码四. 创建实体类五. 封装数据库的增删查改六. 具体功能书写1. 博客列表页2. 博客详情页3. 博客登录页4. 检测登录状态5. 实现显示用户信息的功能6. 退出登录状态7. 发布博客 一. 创建项目 引入依赖 创建blog_sy…...
day51-Mybatis-Plus/代码生成器
1.Mybatis-Plus 定义:是一个Mybatis的增强工具,只在Mybatis基础上增强不做改变,简化开发,提升效率 2.MP实战 2.1 创建springboot工程,勾选web,引入依赖 <dependency> <groupId>mysql<…...
22.Netty源码之解码器
highlight: arduino-light 抽象解码类 https://mp.weixin.qq.com/s/526p5f9fgtZu7yYq5j7LiQ 解码器 Netty 常用解码器类型: ByteToMessageDecoder/ReplayingDecoder 将字节流解码为消息对象;MessageToMessageDecoder 将一种消息类型解码为另外一种消息类…...
R语言【Tidyverse、Tidymodel】的机器学习方法
机器学习已经成为继理论、实验和数值计算之后的科研“第四范式”,是发现新规律,总结和分析实验结果的利器。机器学习涉及的理论和方法繁多,编程相当复杂,一直是阻碍机器学习大范围应用的主要困难之一,由此诞生了Python…...
vscode 第一个文件夹在上一层文件夹同行,怎么处理
我的是这样的 打开终端特别麻烦 解决方法就是 打开vscode里边的首选项 进入设置 把Compact Folders下边对勾给勾掉...
[JavaScript游戏开发] 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测
系列文章目录 第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测 第四章 绘制Q版地图、键盘上下左右地图场景切换 文章目录 系列文章目录前言一、本章节…...
【NLP概念源和流】 01-稀疏文档表示(第 1/20 部分)
一、介绍 自然语言处理(NLP)是计算方法的应用,不仅可以从文本中提取信息,还可以在其上对不同的应用程序进行建模。所有基于语言的文本都有系统的结构或规则,通常被称为形态学,例如“跳跃”的过去时总是“跳跃”。对于人类来说,这种形态学的理解是显而易见的。 在这篇介…...
服务器运行python程序的使用说明
服务器的使用与说明 文章目录 服务器的使用与说明1.登录2.Python的使用2.1 服务器已安装python32.2 往自己的用户目录安装python31.首先下载安装包2.解压缩3.编译与安装 2.3 新建环境变量2.4 测试 3 创建PBS作业并提交 1.登录 windowsr打开运行命令窗口,在运行框中…...
8.2一日总结
1.记录更新: untracked: 未追踪(新增的文件) unmodefied: 未修改 modefied: 已修改 staged: 已暂存 2、添加指定文件到暂存区: git add 文件名 gi…...
JavaScript(四)DOM及CSS操作
1、DOM简介 DocumentType: Html的声明标签 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docume…...
window中,关闭java占用端口的进程
查看端口被占用的情况 netstat -ano|findstr "端口号"使用Tasklist查看对于 PID 的进程名 tasklist|findstr "PID号"通过 taskkill 命令方式结束进程 taskkill /f /t /im Pid...
【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 中的元素 )
文章目录 一、RDD#sortBy 方法1、RDD#sortBy 语法简介2、RDD#sortBy 传入的函数参数分析 二、代码示例 - RDD#sortBy 示例1、需求分析2、代码示例3、执行结果 一、RDD#sortBy 方法 1、RDD#sortBy 语法简介 RDD#sortBy 方法 用于 按照 指定的 键 对 RDD 中的元素进行排序 , 该方…...
Elasticsearch官方测试数据导入
一、数据准备 百度网盘链接 链接:https://pan.baidu.com/s/1rPZBvH-J0367yQDg9qHiwQ?pwd7n5n 提取码:7n5n文档格式 {"index":{"_id":"1"}} {"account_number":1,"balance":39225,"firstnam…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
