Vue3 + TS4.8踩坑之配置husky问题env: sh\r: No such file or directory

一、基本情况:

硬件环境:MacOS 10.14.6

背景:

1,用vue3官方npm init vue@latest初始化创建的vue3 + ts4.8项目,IDE是 VS Cde 1.77.3版本

2,初始化项目之后给项目配置了.editorconfig,方便团队统一格式。

3,配置了husky,在git commit的时候做两个检查:

        1),检查commit的消息是否符合规范

        2),检查项目内容是否满足eslint要求

二、问题和解决方案:

问题1:git commit的时候提示:env: sh\r: No such file or directory

原因:

1,(修改)重新保存.husky/commit-msg之后,文件的编码变为了dos的,因为我的电脑是mac需要修改为unix的。

2,为什么保存之后会变为dos编码格式?是因为我的工程配置了.editorconfig,其中的一个配置项end_of_line = crlf导致保存的时候自动存成了dos编码格式的。

解决方案:

方案1, 修改文件编码,将.husky/commit-msg文件编码手工改为unix的,步骤参考:sh提示“no such file or directory”解决办法-百度经验

方案2,也可以用vs code 可视化的转换,点击IDE底部的CRLF或者LF弹出编码选项框选择

方案3,注释掉.editorconfig配置中的end_of_line = crlf

出问题的时候我的.editorconfig配置内容为:

# 表明是最顶层的配置文件
root = true
# 正则*匹配所有文件
[*]
# 编码格式
charset = utf-8
# 定义换行符,我查看了一下我们的代码中换行基本都是\r\n,因此使用crlf ,而不使用lf
end_of_line = crlf
# 缩进空格数
indent_size = 2
# 缩进方式
indent_style = space
# 文件是否以空白行结尾
insert_final_newline = true
# 是否去处行首行尾的空白字符
trim_trailing_whitespace = true
 
# 正则匹配以.md结尾的文件
[*.md]
 
# 保存文件时是否在结尾添加一个新行
insert_final_newline = false
# 在新行之前是否移除所有的空格字符
trim_trailing_whitespace = false

再三折腾之后,明确了是配置中的换行符定义导致的,再三思考,将其去掉吧。

于是.editorconfig变为如下,也就解决了问题:

# 表明是最顶层的配置文件
root = true
# 正则*匹配所有文件
[*]
# 编码格式
charset = utf-8
# 定义换行符,我查看了一下我们的代码中换行基本都是\r\n,因此使用crlf ,而不使用lf
# 可能会导致命令脚本在mac下保存后变为dos编码格式而无法执行,因此这一条规则注释掉
# end_of_line = crlf
# 缩进空格数
indent_size = 2
# 缩进方式
indent_style = space
# 文件是否以空白行结尾
insert_final_newline = true
# 是否去处行首行尾的空白字符
trim_trailing_whitespace = true
 
# 正则匹配以.md结尾的文件
[*.md]
 
# 保存文件时是否在结尾添加一个新行
insert_final_newline = false
# 在新行之前是否移除所有的空格字符
trim_trailing_whitespace = false

四、我的踩坑和排查经历,可看可不看。

我的husky配置步骤:

1,安装husky依赖

npm install husky --dev

2,在package.json中配置整个项目的初始化scripts(方便团队伙伴 npm install的时候自动install husky):

"scripts": {
  "prepare": "npx husky install"
 }

3,手动执行husky install,或者整体项目执行npm install,因为我已经安装过整体项目,就单独install husky

npx husky install

4,添加 commit-msg hook

npx husky add .husky/commit-msg "npx eslint --fix src/**/**.{ts,vue}"

这一个步骤会在.husky文件夹下添加一个文件名为commit-msg的命令执行文件。

里面的内容为:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx eslint --fix src/**/**.{ts,vue}

至此测试,git commit,一切还正常。

幺蛾子即将出现

5,我计划给commit-msg hook再配置一个消息的校验

于是用vs code 打开.husky/commit-msg,在里面增加一行 node scripts/verifyCommit.js 保存,里面的内容变为:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

node scripts/verifyCommit.js
npx eslint --fix src/**/**.{ts,vue}

同时在scripts文件夹下,增加verifyCommit.js,内容是网上通用的:

const fs = require('fs')
const msg = fs.readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim()
const commitRe  = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
const mergeRe = /^(Merge pull request|Merge branch)/
console.log('开始检测提交信息是否合规, msg = ', msg)
if(!commitRe.test(msg)) {
    if(!mergeRe.test(msg)) {
        console.log('git commit 信息格式校验【不】通过')
        console.error(`git commit 信息格式不对,需要使用 title(scope): desc的格式
        比如 fix: xxbug
        feat(test): add new
        具体校验逻辑请看 script/verifyCommit.js
        `)
        process.exit(1)
    }
} else {
    console.log('git commit 信息格式校验通过')
}

再次测试,到此问题出现:

env: sh\r: No such file or directory

删掉刚才添加的node scripts/verifyCommit.js行,保存,再测试,也不行。。。。

上百度,上google,我擦,跟我这现象的不太多啊,不是一个通用问题。就这么简单的一个操作,咋会出问题。各种折腾开始。。。

删掉整个.husky文件夹,重新install,

npx husky install

重新用命令添加hook: 

npx husky add .husky/commit-msg "npx eslint --fix src/**/**.{ts,vue}"

再测试,好了。

在网上看到过一篇文章说是钩子文件的编码格式问题,开始尝试

再打开.husky/commit-msg,什么都不做,直接保存一下。再测试,挂了。。至此,那肯定是.husky/commit-msg文件的编码格式问题了。

vim .husky/commit-msg

然后输入 :set ff 查看文件格式,果然,此时变成了fileformat=dos,郁闷。

再次输入 :set fileformat=unix 然后输入:wq保存退出,测试,好了。。

上面块中的步骤,其实可以用vs code显示的处理哈。

继续排查为什么保存commit-msg命令文件之后,就会有问题,直接猜测是配置文件.editorconfig导致的,于是改个名字试试看,把.editorconfig改为.888editorconfig,再次保存commit-msg文件,没问题了。

里面的哪个配置导致的呢,直接就怀疑是end_of_line = crlf,注释掉试试看。

果然是,真没想到这个配置会导致unix编码的文件变为dos格式。也没其他的影响,那就过段去掉吧。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/14508.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

scratch电子画板 少儿编程 电子学会图形化编程scratch编程等级考试二级真题和答案解析2023年3月

目录 scratch电子画板 一、题目要求 1、准备工作 2、功能实现 二、案例分析

世界读书日|这些值得程序员反复阅读的经典书

2023年是第28个世界读书日,每年的这个时候,小编都会准备一份书单与您分享。 与经典同行,伴书香成长。小编今天推荐一份值得程序员反复阅读的经典书。 1、浪潮之巅 第四版 这不只是一部科技产业发展历史集…… 更是在这个智能时代&#xff…

CocosCreator实战篇 | 实现刮刮卡和橡皮擦 | 擦除效果

📢博客主页:https://blog.csdn.net/dxt19980308 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📢本文由肩匣与橘编写,首发于CSDN🙉 📢生活依旧是美好而…

mysql数据库SQL语句orderBy排序同时limit分页出现数据重复问题

先说解决方案:排序中使用唯一值(例如主键id),保证每条数据不重复 SELECT * FROM table WHERE 1 1 ORDER BY create_time,id DESC LIMIT 0, 10;1、问题 MySQL官方描述: 如果多行在列中具有相同的值ORDER BY&#xff…

Linux->管道和共享内存通信

目录 1 管道 1.1 管道是什么 1.1 匿名管道通信 1.2 父子进程通信 1.3 匿名管道实现多进程文件的写入读取 1.4 命名管道 2 共享内存 1 管道 1.1 管道是什么 管道顾名思义,他就是一个像是连通器一样的东西,原本不存在联系的东西之间建立起一定的关…

Blender3.5 边的操作

目录 1. 边操作1.1 边的细分 Subdivide1.2 边的滑移 Edge Slide1.3 边的删除1.4 边的溶解 Dissolve1.5 边线倒角 Bevel1.6 循环边 Loop Edges1.7 并排边 Ring Edges1.8 桥接循环边 1. 边操作 1.1 边的细分 Subdivide 在边选择模式,选中一条边,右键&…

Shell编程之条件语句

目录 一、条件测试 1)test命令 ​编辑 2)文件测试 常用的测试操作符 ​编辑 4)整数值比较 常用的测试操作符 6)逻辑测试 常用的测试操作符 7)三元运算符 二、if语句 1)单分支结构 2&#xff09…

Kubernetes快速部署

2 Kubernetes快速部署 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具。 这个工具能通过两条指令完成一个kubernetes集群的部署&#xff1a; # 创建一个 Master 节点 $ kubeadm init# 将一个 Node 节点加入到当前集群中 $ kubeadm join <Master节点的IP和…

软件测试职业发展方向有哪些

随着人工智能时代的到来&#xff0c;IT行业受到了越来越多人的重视。软件测试作为把控软件质量必不可少的环节&#xff0c;其重要性可见一斑。 据第三方平台统计&#xff0c;北京软件测试工程师的平均薪资为16.2K&#xff0c;除了一线城市外&#xff0c;随着互联网行业逐渐下沉…

【Copula】考虑风光联合出力和相关性的Copula场景生成(Matlab代码实现)

&#x1f4a5; &#x1f4a5; &#x1f49e; &#x1f49e; 欢迎来到本博客 ❤️ ❤️ &#x1f4a5; &#x1f4a5; &#x1f3c6; 博主优势&#xff1a; &#x1f31e; &#x1f31e; &#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 …

【Python入门第五十四天】Python丨NumPy ufuncs

什么是 ufuncs&#xff1f; ufuncs 指的是“通用函数”&#xff08;Universal Functions&#xff09;&#xff0c;它们是对 ndarray 对象进行操作的 NumPy 函数。 为什么要使用 ufuncs&#xff1f; ufunc 用于在 NumPy 中实现矢量化&#xff0c;这比迭代元素要快得多。 它们…

哈希表(底层结构剖析-- 上)

文章目录 哈希表底层结构剖析哈希概念哈希冲突哈希函数 哈希冲突解决办法闭散列( 线性探测 二次探测)开散列 哈希表闭散列方法的模拟实现基本框架有关哈希数据的类插入函数删除函数查找函数增加仿函数将所有数据类型转换为整型 哈希表开散列方法的模拟实现(增加仿函数版) 哈希…

同城跑腿APP开发需具备哪些功能?

移动互联网的飞速发展加上人们生活水平的提高&#xff0c;生活工作闲暇之余&#xff0c;人们不愿意为买药、送文件、取东西、送花、排队等小事浪费时间或者是根本没有时间去处理类似的事情。这个时候就想如果能够花钱请人来替我做这些事就好了&#xff0c;于是同城跑腿就在这样…

S/MIME电子邮件证书,符合FDA邮件安全要求

美国食品和药物管理局 &#xff08;FDA&#xff09;要求合作伙伴提交或接收电子监管信息时&#xff0c;必须使用数字证书保障通信安全。 01 为什么FDA使用数字证书保障通信安全&#xff1f; 为了维护数据完整性、准确性,有组织地管理文件,FDA为接受机构的电子监管提交设置了电子…

ajax的介绍及使用

ajax的介绍 开发流程 前端 ajax:前后端沟通的桥梁 后端 ajax介绍 ajax叫做异步的Javascript和xml ajax通过浏览器与服务器&#xff08;后端&#xff09;进行少量数据交互&#xff0c;进行页面异步更新&#xff08;网页不会重新加载&#xff09; 优点&#xff1a; 减轻服务器负…

C/C++中的数据结构对齐,#pragma pack() 和 __attribute__

C/C中的数据结构对齐 总览 数据结构对齐是指在计算机内存中排列和访问数据的方式。它包含三个独立但相关的问题&#xff1a;数据对齐&#xff08;data alignment&#xff09;&#xff0c;数据结构填充&#xff08; data structure padding&#xff09;和打包&#xff08;pack…

1.2和1.3、GCC

1.2和1.3、GCC 1.2和1.3、GCC1.2.1、什么是GCC1.2.2、编程语言的发展1.2.3、GCC工作流程1.2.4、gcc和g的区别1.2.5、GCC常用参数选项实际操作①接下来进行预处理操作&#xff08;test.c为需要预处理的源代码&#xff0c;test.i为要生成的目标代码&#xff09;②汇编操作&#x…

【Linux】二、Linux的基本指令

1、ls指令 语法 &#xff1a; ls [ 选项 ][ 目录或文件 ] 功能 &#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; &#xff08;1&#xff09;、-a 列出目录下的所有文件&#x…

按照条件向Spring容器中注册bean

1.Conditional注解概述 Conditional注解可以按照一定的条件进行判断&#xff0c;满足条件向容器中注册bean&#xff0c;不满足条件就不向容器中注册bean。 package org.springframework.context.annotation;import java.lang.annotation.Documented; import java.lang.annota…

基于 Python 的 Meta AI —— SAM

Segment Anything Model&#xff08;SAM&#xff09;是 Facebook 的一个 AI 模型&#xff0c;旨在推广分割技术。在我们之前的文章中&#xff0c;我们讨论了 SAM 的一般信息&#xff0c;现在让我们深入了解其技术细节。SAM 模型的结构如下图所示&#xff0c;图像经过编码器得到…
最新文章