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

news/2024/10/17 16:25:44/

一、基本情况:

硬件环境: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: xxbugfeat(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.ppmy.cn/news/51167.html

相关文章

基于ansible初始化linux服务器基础环境。

大家好,今天我要和大家分享一个关于搭建centos环境的新方法。 以前我们经常会看到一些文章介绍如何搭建centos环境,但很多时候都会出现一些问题。不过现在有了一种新的方法,就是使用ansible脚本来实现。 虽然这种方法仅适用于centos7&#…

Redis 快速上手 Java 增删改查(包含 RedisTemplateConfig 的编写)

一:Redis 数据类型 先了解 redis 的五种基本数据类型。 String 字符串类型:name: "value1"List 列表:names: ["value1", "value2", "value2"]Set 集合:names: ["value1", &qu…

shell编程规范与变量

shell脚本编程规范 shell脚本概述 将要执行的命令按顺序保存到一个文本文件给该文件可执行权限可结合各种Shell控制语句以完成更复杂的操作 Shell脚本应用场景 重复性操作交互性任务批量事务处理服务运行状态监控定时任务执行 什么是Shell 就是与内核沟通的界面、应用程序等…

logback日志框架集成方式

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、logback是什么?二、使用步骤1.使用方式控制台输出配置文件输出配置html输出配置定期删除配置方式 总结 前言 提示:这里可以添加本文…

【C++】右值引用(极详细版)

在讲右值引用之前,我们要了解什么是右值?那提到右值,就会想到左值,那左值又是什么呢? 我们接下来一起学习! 目录 1.左值引用和右值引用 1.左值和右值的概念 2.左值引用和右值引用的概念 2.左值引用和右…

达梦数据迁移问题罗列

目录 一、前言 二、问题罗列 一、前言 最近小编接触到国产的数据库达梦数据库,然后在用达梦数据迁移工具MySQL迁移至达梦的时候遇到了一系列的问题现在罗列一下在这里。目前关于国产的数据库达梦这些资料比较少,希望能够帮到有需要的同志们&#xff01…

Java面试题面向对象部分

面向对象 面向对象概述 面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机、嵌入式 开发、Linux/Unix等一般采用面向过程开发&#xf…

Hibernate的持久化类

Hibernate是一个开源的ORM(对象关系映射)框架,用于将Java程序中的对象映射到数据库中的关系型数据。在Hibernate中,持久化类是用来映射Java对象和关系型数据库表的类。 编写Hibernate持久化类需要遵循以下规则: 持久…