一、基本情況：

硬件環(huán)境：MacOS 10.14.6

背景：

1，用vue3官方npm init vue@latest初始化創(chuàng)建的vue3 + ts4.8項目，IDE是?VS Cde 1.77.3版本

2，初始化項目之后給項目配置了.editorconfig，方便團隊統(tǒng)一格式。

3，配置了husky，在git commit的時候做兩個檢查：

? ? ? ? 1），檢查commit的消息是否符合規(guī)范

? ? ? ? 2），檢查項目內容是否滿足eslint要求

二、問題和解決方案：

問題1：git commit的時候提示：env: sh\r: No such file or directory

原因：

1，（修改）重新保存.husky/commit-msg之后，文件的編碼變?yōu)榱薲os的，因為我的電腦是mac需要修改為unix的。

2，為什么保存之后會變?yōu)閐os編碼格式？是因為我的工程配置了.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
# 縮進空格數(shù)
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變?yōu)槿缦?，也就解決了問題：

# 表明是最頂層的配置文件
root = true
# 正則*匹配所有文件
[*]
# 編碼格式
charset = utf-8
# 定義換行符，我查看了一下我們的代碼中換行基本都是\r\n，因此使用crlf ，而不使用lf
# 可能會導致命令腳本在mac下保存后變?yōu)閐os編碼格式而無法執(zhí)行，因此這一條規(guī)則注釋掉
# end_of_line = crlf
# 縮進空格數(shù)
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，手動執(zhí)行husky install，或者整體項目執(zhí)行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的命令執(zhí)行文件。

里面的內容為：

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

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

至此測試，git commit，一切還正常。

幺蛾子即將出現(xiàn)

5，我計劃給commit-msg hook再配置一個消息的校驗

于是用vs code 打開.husky/commit-msg，在里面增加一行?node scripts/verifyCommit.js?保存，里面的內容變?yōu)椋?/p>

#!/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('開始檢測提交信息是否合規(guī), 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 信息格式校驗通過')
}

再次測試，到此問題出現(xiàn)：

env: sh\r: No such file or directory

刪掉剛才添加的node scripts/verifyCommit.js行，保存，再測試，也不行。。。。

上百度，上google，我擦，跟我這現(xiàn)象的不太多啊，不是一個通用問題。就這么簡單的一個操作，咋會出問題。各種折騰開始。。。

刪掉整個.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顯示的處理哈。

繼續(xù)排查為什么保存commit-msg命令文件之后，就會有問題，直接猜測是配置文件.editorconfig導致的，于是改個名字試試看，把.editorconfig改為.888editorconfig，再次保存commit-msg文件，沒問題了。

里面的哪個配置導致的呢，直接就懷疑是end_of_line = crlf，注釋掉試試看。

果然是，真沒想到這個配置會導致unix編碼的文件變?yōu)閐os格式。也沒其他的影響，那就過段去掉吧。。。文章來源地址http://www.zghlxwxcb.cn/news/detail-421931.html

到了這里，關于Vue3 + TS4.8踩坑之配置husky問題env: sh\r: No such file or directory的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！