前端项目配置 prettier、eslint、lint-stages、husky、commitlint 、style-lint设置代码书写和提交规范
prettier中文网:Options · Prettier 中文网
eslint中文网 :ESLint 中文网
github husky : https://github.com/typicode/husky
commitlint.js 官网:commitlint - Lint commit messages 、github:GitHub - conventional-changelog/commitlint: 📓 Lint commit messages
style-lint :Configuring | Stylelint
github lint-staged : https://github.com/okonet/lint-staged
prettier:
主要作用:格式化代码,新建配置文件进行 更加精细的 颗粒度配置
.prettierrc (看官网、配置文件名多种方式) 【rc 代表 run commond】
{"singleQuote": true,"trailingComma": "none","tabWidth": 2,"semi": true,"printWidth": 80,"arrowParens": "avoid"
}
eslint:
主要作用: 代码格式进行校验,配置文件进行精细的颗粒度配置
npm init @eslint/config 进行自定义配置
"lint": "eslint test1.js --ext .js src/",
"lint:fix": "eslint test1.js --ext .js src/ --fix",
启动命令:npm run lint 进行 格式校验,后缀是校验的 文件名和文件夹名
此处表示:对 根目录的 test1.js 和 src下的 .js文件进行校验 , --ext 是 extension(扩展 )的缩写
加 :fix对一下简单的不符规则进行修复 (逗号,分号,间隙,单引号等),
eslint 校验的格式可以与 prettier配置进行配合、 文件保存后就符合lint规则
具体内容看官网
.eslintrc 配置参考
module.exports = {env: {browser: true,es2021: true},extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],overrides: [{env: {node: true},files: ['.eslintrc.{js,cjs}', '*.js'],parserOptions: {sourceType: 'script'}}],parserOptions: {ecmaVersion: 'latest',sourceType: 'module'},plugins: ['vue'],rules: {indent: ['error', 2],'linebreak-style': ['error', 'unix'],quotes: ['error', 'single'],semi: ['error', 'always'],'max-len': ['error', { code: 150, tabWidth: 4 }] // 120 chars per line},ignorePatterns: [],
};
.eslintignore配置eslint忽略文件
eslint忽略文件
src/main.js
lint-staged
husky
@commitlint/cli
1、husky
husky 的读音为 /ˈhʌski/
Husky 是一个 Git Hook 工具,可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制,它允许在 Git 执行操作时自动运行特定脚本,以执行自定义操作。
使用 Husky,可以轻松地添加 Git Hooks,并在特定的 Git 事件(如提交代码)发生时执行自定义的脚本。例如,在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。
Husky 支持多种 Git Hooks,包括 pre-commit、pre-push 等,并可以配置多个钩子,以便在多个 Git 事件发生时执行自定义脚本。
Husky 是一个基于 Node.js 的工具,可以在 Node.js 项目中使用。
2、lint-staged
lint-staged 的读音为 /lɪnt steɪdʒd/。
lint-staged 是一个工具,可以在 Git 暂存区的文件上运行指定的 lint 工具,以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用,以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率,因为只需要针对本次提交的文件执行 lint 检查,而不是所有的文件。
lint-staged 支持多种 lint 工具,例如 ESLint、Prettier、Stylelint 等,并可以配置多个 lint 工具。它还支持使用 glob 模式来选择要运行 lint 工具的文件。
lint-staged 是一个基于 Node.js 的工具,可以在 Node.js 项目中使用。
1、npm install husky -D
2、npm pkg set scripts.prepare="husky install"npm run prepare
3、npx husky add .husky/pre-commit "npm test"git add .husky/pre-commitpackage.json 加lint-staged配置
4、"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "eslint --ext .js,.vue src/","lint:fix": "eslint --ext .vue,.js src/ --fix","prepare": "husky install"},"lint-staged": {"*.{js,jsx,vue,ts,tsx}": ["npm run lint","git add"]},
此时 在 commit '时 已经可以对代码格式校验。
如果有问题,代码提交不上来git
报错解决后【警告不影响】
但是现在问题是 【 git commit -m ’111‘ 】 也能提交成功,这对代码后期代码审核非常不利
于是我们用 @commitlint/cli 进行强制规范 提交信息格式
@commitlint/cli
@commitlint/cli 的读音为 /kəˈmɪtlɪnt kli/。
@commitlint/cli 是一个命令行工具,用于校验 Git 提交信息是否符合规范。它通常与 Husky 和 lint-staged 配合使用,以在提交代码前对提交信息进行校验,从而确保提交信息的格式和内容符合项目规范和约定。
@commitlint/cli 遵循 Conventional Commits 规范,可以自定义配置校验规则。它支持多种校验规则,例如校验提交信息的类型、描述和主体等,并可以在不同的提交阶段执行不同的校验规则。例如,在提交代码前只检查代码格式和 lint 检查,而在合并代码时进行更全面的提交信息校验。
@commitlint/cli 是一个基于 Node.js 的工具,可以在 Node.js 项目中使用。
注意:Commit Lint 是需要搭配Husky才能实现对Git 提交信息的校验的。
参考文章:git commit时进行代码检查(lint-staged)配置 - 简书
前端Vuer,请给你的项目加上 ESLint - 知乎
git规范代码提交格式:commitlint+husky安装_@commitlint/cli': ^13.1.0-CSDN博客
style-lint:
项目css校验 :
看项目demo配置。
重要
:把style-lint启动命令放到 pre-commit钩子里面,就可以在commit的时候对css进行校验。
规则demo .stylelintrc.js :
// 如果是vue项目,需要安装'stylelint-config-recommended-vue',
/*** https://stylelint.io/user-guide/configure* 启动钩子在 .husky/pre-commit 中* 校验:--fix 修复*/
module.exports ={"extends": ["stylelint-config-standard","stylelint-config-recommended-vue"],"unit-allowed-list": ["%","deg","px","rem","ms"],"declaration-property-unit-allowed-list": {"/^border/": ["px"],"/^padding|^gap/": ["rem"]},"rules": {"selector-max-id": 5}
}
参考:stylelint最佳实践 - 知乎
经过一番摸索,又将配置优化:
只用 在 .husky/pre-commit 钩子中配置
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
#解释一下这个命令的含义:
#"$0":表示当前脚本的路径和名称。
#dirname -- "$0":利用 dirname 命令获取脚本所在的目录路径。-- 是一个选项分隔符,用于处理特殊路径名称。
#$(...):表示将命令的输出作为参数返回。
#因此,"$(dirname -- "$0")/_/husky.sh" 的含义是获取当前脚本所在的目录路径,然后拼接上 _/husky.sh,得到一个完整的路径。
#根据上述解释,这个命令可能是在一个 Husky 钩子脚本中使用,用于获取 Husky 脚本所在的路径,然后调用相应的脚本文件。
#Husky 是一个 Git 钩子管理工具,可以在 Git 事件(如提交代码、切换分支等)发生时执行指定的脚本。在使用 Husky 时,通常会将 Husky 的相关脚本放在项目的特定位置,并在项目中的配置文件中指定相应的钩子和脚本路径。
npx lint-staged
等commit的时候 后走到 package.json中的 lint-staged字段【数组】
可以将所有的 lint 校验和修复规则配置在这里
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "eslint --ext .js,.vue src/","lint:fix": "eslint --ext .vue,.js src/ --fix","prepare": "husky install ","commitlint": "commitlint --edit"},"lint-staged": {"**/*.{js,jsx,vue,ts,tsx}": ["npx eslint **/*.{js,jsx,vue,ts,tsx} --fix "],"**/*.{css,less,scss,vue}": ["npx stylelint **/*.{css,less,scss,vue} --fix"],"**/*.{css,less,scss,vue,js,jsx,vue,ts,tsx}": ["npx pretty-quick --staged"]},"dependencies": {"core-js": "^3.8.3",
这样当 commit的时候 会执行 eslint、stylelint、prettier格式校验和格式化,当一些 lint错误(没加分号等 与你 .eslintrc配置的有关)简单的会自动帮你补全 ,一些严重的会 报错,无法提交。
执行命令需要去官网慢慢摸索,lint颗粒度去官网慢慢配置。
pretty-quick 需要安装。见:Pre-commit Hook · Prettier 中文网
nice
项目demo 地址
https://gitee.com/guoyongkun-123/prettier-eslint-lint-stages-husky-commitlint-gyk
相关文章:

前端项目配置 prettier、eslint、lint-stages、husky、commitlint 、style-lint设置代码书写和提交规范
prettier中文网:Options Prettier 中文网 eslint中文网 :ESLint 中文网 github husky : https://github.com/typicode/husky commitlint.js 官网:commitlint - Lint commit messages 、github:GitHub - conventiona…...

如何开始着手一篇Meta分析 | Meta分析的流程及方法
Meta分析是针对某一科研问题,根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法,对来源不同的研究成果进行收集、合并及定量统计分析的方法,最早出现于“循证医学”,现已广泛应用于农林生态,资源环境等方面。…...
【PID控制技术】
PID控制技术 简介控制原理相关术语调参技巧相互作用 相似算法与PWM对比 应用范围优缺点硬件支持 简介 PID控制是一种在工业过程控制中广泛应用的控制策略,其全称是比例-积分-微分(Proportional Integral Derivative)控制。它的基本原理是根据…...

docker openjdk:8-jdk-alpine 修改时区、添加字体
新建Dockerfile文件,制作新镜像 FROM openjdk:8-jdk-alpine 1、解决字体问题 RUN apk add --update ttf-dejavu fontconfig && rm -rf /var/cache/apk/* 2、解决时差问题 # 解决时差8小时问题ENV TZAsia/ShanghaiRUN ln -snf /usr/share/zoneinfo/$TZ /et…...

9+单细胞+实验验证,探讨单基因对癌细胞转移作用的思路方向
今天给同学们分享一篇单细胞实验的生信文章“Identification of RAC1 in promoting brain metastasis of lung adenocarcinoma using single-cell transcriptome sequencing”,这篇文章于2023年5月18日发表在Cell Death Dis期刊上,影响因子为9。 本研究旨…...

《计算机视觉中的多视图几何》笔记(7)
7 Computation of the Camera Matrix P P P 这章讲的是摄像机参数估计。摄像机标定,本质上就是求摄像机矩阵 P P P,当我们知道足够多的 X ↔ x X \leftrightarrow x X↔x,我们该如何计算 P P P?如果知道3D和2D点的对应ÿ…...

Python经典练习题(四)
文章目录 🍀第一题🍀第二题🍀第三题 🍀第一题 题目:打印出如下图案(菱形): 我们首先分析一下,本题实现的步骤主要有两个,分别是前四行和后三行 前四行:第一…...
Mac Pro在重装系统时提示“未能与恢复服务器取得联系”
检查网络连接: 确保你的Mac Pro连接到稳定的网络。尝试更换其他网络,例如切换到不同的Wi-Fi或使用有线连接。 系统时间校正: 错误的系统时间有时会导致与恢复服务器的连接问题。在恢复模式下打开终端(在实用工具菜单中选择终端&a…...
【C/C++】指针常量、常量指针、指向常量的常指针
目录 1.概念2. const pointer3. pointer to a constant3.1 (pointer to a constant)-constant3.2 poiner-constant3.3 (pointer to a constant)-variable3.4 poiner-variable3.5 多层级关系时的兼容3.6 用处 4. a constant pointer to a constant 1.概念 首先明确这几个术语的…...

【VUE复习·4】计算属性computed:原理、完整写法(不常用)、与 methods 的区别、简写(最常用)、应用案例!
总览 1.简介计算属性 2.computed 与 methods 的区别 3.computed 的简写(不修改计算属性,只显示) 4.经典应用场景 一、计算属性 1.为什么需要计算属性? 首先,如果我们要写一个插值语法,而 {{ }} 内的内容…...
Linux 基本语句_编译C过程
Linux撰写C语言并编译的过程 1、预处理 将所有的#define删除,并且展开所有的宏定义,并且处理所有的条件预编译指令,比如#if #ifdef #elif #else #endif等。处理#include预编译指令,将被包含的文件插入到该预编译指令的位置。删除…...

MYSQL8解压版 windows 主从部署步骤及配置(包含配置文件,教程文件,免积分下载)
MYSQL8解压版 windows 主从部署步骤及配置 一.安装MSYQL 这里只讲大概,详细步骤、my.ini文件、安装包等会在页尾文件中(正常情况按首个mysql安装,只是名字有区别) 1.主库my.ini配置 [mysqld] #典型的值是5-6GB(8GB内存),8-11GB(16GB内存), 20-25GB(32GB内存)&…...

RabbitMQ的基本介绍
什么是MQ 本质是一个队列,只不过队列中存放的信息是message罢了,还是一种跨进程的通信机制,用于上下游传递信息。在互联网架构中,MQ是一种非常常见的上下游“逻辑解耦物理解耦”的消息通信服务。使用了MQ之后,信息发送…...

AI智能视频监控技术如何助力美好乡村建设?
随着城市化发展,很多乡村设施也在逐渐完善,智能监控也成了乡村发展必不可少的一环,智能视频监控应该在乡村建设里如何发挥作用呢? 1、有效提升安全意识 通过在乡村重要区域、公共场所、道路等设置智能视频监控设备,可…...

【网络安全】2023年堡垒机品牌大全
随着大家网络安全意识的增加,随着国家等保政策的严格执行,越来越多的企业开始采购堡垒机。这里就给大家总结了部分堡垒机品牌,让大家参考参考。 2023年堡垒机品牌大全 1、行云堡垒 2、JumpServer 3、安恒 4、骞云 5、齐治 6、阿里云 …...

makefile相关知识的讲解
目录 makefile文件的介绍 step1:手动创建一个makefile文件 step2:在文件当中编辑指定的命令 step3:退出makefile文件并使用make执行文件当中的命令 step4:使用clean指令清除生成的文件 makefile当中的命令编写方式 目标文件和依…...

OpenCV中的HoughLines函数和HoughLinesP函数到底有什么区别?
一、简述 基于OpenCV进行直线检测可以使用HoughLines和HoughLinesP函数完成的。这两个函数之间的唯一区别在于,第一个函数使用标准霍夫变换,第二个函数使用概率霍夫变换(因此名称为 P)。概率版本之所以如此,是因为它仅分析点的子集并估计这些点都属于同一条线的概率。此实…...

Xilinx FPGA 程序固化重新上电程序不运行的问题
问题描述 FPGA直接下载bit文件,功能正常。 FPGA擦除FLASH,烧写FLASH,正常。 电源断电,重新上电,FALSH里面的程序没有启动,FPGA程序没有跑起来。–FLASH启动不正常。 解决办法 在XDC约束文件里边增加约束: ## Configuration options, can be used for all designs se…...

c++ 使用rapidjson对数据序列化和反序列化(vs2109)
RapidJSON是腾讯开源的一个高效的C JSON解析器及生成器,它是只有头文件的C库,综合性能是最好的。 1. 安装 在NuGet中为项目安装tencent.rapidjson 2. 引用头文件 #include <rapidjson/document.h> #include <rapidjson/memorystream.h> #…...
4.迭代最近点ICP及非线性优化求解
使用非线性优化方法求解ICP 文章目录 使用非线性优化方法求解ICP前情提要ICP问题回顾对矩阵变量求导数 ICP问题的非线性解法代码示例 欢迎访问个人网络日志🌹🌹知行空间🌹🌹 前情提要 在迭代最近点算法ICP及SVD求解中介绍了ICP问…...

接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...

智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...

华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...

Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...

JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...

mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...