初始化前端项目配置 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…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
