其他踩坑记录

用于记录不好分类的踩坑记录

stylelint v15

今天按照我自己文章统一代码风格和规范项目代码搭建项目时，走到配置 stylelint 这步时出现了问题:

按照步骤安装了 stylelint 和一系列相关依赖
新建了stylelintrc.cjs等文件
添加script脚本命令"lint:stylelint": "stylelint \"./**/*.{css,less,scss,vue,html}\" --fix"
运行脚本命令

然后就发现了报错:

运行相关命令后的报错

一系列的 unknown...

原因是我安装了的stylelintv15 以上的版本，stylelint 的 github issues 中已经有提出到这个bug并且已经关闭了，原因就是 v15 已经废弃了"stylelint-config-prettier"

原文: 从 Stylelint v15 开始，所有与样式相关的规则已被弃用。如果您使用的是 v15 或更高版本并且不使用这些已弃用的规则，则不再需要此插件。

所以删掉这行代码重启 IDE 即可:

// stylelintrc.cjs
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-prettier', 
    'stylelint-config-recommended-scss',
    'stylelint-config-standard-vue'
  ]
}

commit 报错

使用git-cz来提交项目代码时，执行pnpm commit后会出现报错:

运行pnpm commit的报错

将.commitlintrc.cjs的编码改成 utf-8 即可。

eslint 报错

有可能在项目中碰到下面这种情况:

.vue文件报错Parsing error: Unexpected token <

.ts文件报错Parsing error: The keyword 'xxx' is reserved

你可能会以为是eslint文件的配置有问题，后来发现配置正常；你也可能会以为是ts.config.json配置有问题，后来发现配置也是正常的。

其实问题原因是在于你的eslint文件的格式，当你的eslint版本大于等于v8.21时，且文件格式为eslint.config.js就会出现这种问题，这时候只需要打开 vscode 的一项配置即可:

vscode eslint config

TIP

另外，可能会以为配置文件改成.eslintrc.js就可以了，这样确实没错，但是要注意的是官方将在 v9 版本中废弃这种格式。 https://zh-hans.eslint.org/docs/latest/use/configure/configuration-files

新版 Volar(vue-official)

这个 bug 应该会在后期修复，记录下我当时碰到的时间点(2024-03-21)。

最近打开 vscode 会有提示说volar已经废弃，建议使用新插件Vue-official，更新之后，会发现很多项目都会报错无法识别导入的文件、和方法啥的。这在仓库 issues 中也有提出各种各样的 bug。应该就是新的插件还不稳定，这只能等官方修复了。

但是项目一直爆红那也没办法开发了，那怎么办呢？亲测把插件降级到v1.8.27版本能解决这个问题。但是有时候还是不生效，需要频繁来回切换版本才能解决。

Safari 上音频播放显示错误 ~new

这个问题是由于你加载的文件类型错误的原因，可以看看 network 中文件请求的 response type 是不是application/json或者application/octet-stream等，要确保加载的音频为audio/xxx,在 Safari 上才能播放正确。请找你的后端帮你处理成音频类型返回吧。

Safari 网页遮挡 ~new

在 Safari 浏览器中网页会被遮挡底部或顶部。

移动端浏览器

不管是新的还是就的 ios，它们的 safari 浏览器的屏幕高度(screen height)都是包括了工具栏和地址栏的。就是图中括起来的部分，可以看到网页会被地址栏工具栏遮挡掉一部分，而且上下滑动也无法解决。而安卓的屏幕高度并不会包括工具栏地址栏。

所以，尽量避免给标签设置100vh单位的高度，这将会导致网页在 safari 浏览器被遮挡一部分。

TIP

当然你也可以通过给标签设置padding或margin让页面被遮挡部分留空，但是这并不是一个好的办法。

其他踩坑记录 ​

stylelint v15 ​

commit 报错 ​

eslint 报错 ​

新版 Volar(vue-official) ​

Safari 上音频播放显示错误 ~new ​

Safari 网页遮挡 ~new ​