umi4 项目样式提交 display: -webkit-box 报错
.description {
height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
}
提交代码时,display: -webkit-box
会被修改为 display: box
直接提交。
原因是文件中存在配置
//.lintstagedrc
{
"*.{css,less}": [
"max lint --fix --stylelint-only",
"prettier --cache --write"
],
}
max lint --fix --stylelint-only
,校验和修正所有的 css 或 less 文件prettier --cache --write
, prettier 解析器会解析缓存的 css 或 less 文件,将格式化后的结果写回原文件,而不是仅仅输出到控制台
报错
Unexpected vendor-prefix "-webkit-box" value-no-vendor-prefix
这是因为禁止值使用浏览器前缀。
查看:https://stylelint.io/user-guide/rules/value-no-vendor-prefix/
value-no-vendor-prefix
: 禁止值添加供应商前缀
解决
//.stylelintrc.js
module.exports = {
extends: require.resolve("@umijs/max/stylelint"),
rules: {
"value-no-vendor-prefix": [
true,
{
ignoreValues: ["box"],
},
],
},
};
stylelint
的一些其他配置
alpha-value-notation
,指定 alpha 值的百分比或数字表示法。custom-property-pattern
,自定义属性模式selector-class-pattern'
,指定类选择器的模式(https://stylelint.nodejs.cn/user-guide/rules/selector-class-pattern/)
umi4 项目中.lintstagedrc
文件
{
"*.{md,json}": [
"prettier --cache --write"
//格式md,json文件 --cache表示只修复暂存区改动过的文件
],
"*.{js,jsx}": [
// 支持只校验和 修正 js、jsx 类型文件;--fix 修正代码 max lint --eslint-only 支持只校验 js、ts、tsx、jsx 类型文件
"max lint --fix --eslint-only",
"prettier --cache --write"
],
"*.{css,less}": [
// umi lint --stylelint-only 支持只校验 css、less 等样式文
"max lint --fix --stylelint-only",
"prettier --cache --write"
],
"*.ts?(x)": [
"max lint --fix --eslint-only",
"prettier --cache --parser=typescript --write"
// --parser=typescript: 指定Prettier解析器应使用TypeScript解析器来处理这些文件,这对于正确理解TypeScript特有的语法结构至关重要。
// --write: 或 -w,这是一个标志,指示Prettier直接修改文件内容,将格式化后的结果写回原文件,而不是仅仅输出到控制台。
// --cache: 启用缓存功能,这样Prettier在格式化文件时会检查是否有先前格式化过的版本且未发生变化,以加快处理速度。
// --no-error-on-unmatched-pattern: 如果没有找到匹配此glob模式的文件,Prettier不会抛出错误并中断进程。
]
}