初始化前端项目配置 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…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
在 Spring Boot 中使用 JSP
jsp? 好多年没用了。重新整一下 还费了点时间,记录一下。 项目结构: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ,不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源(最常用) conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...
