标签：stylelint no color 书写 width border order css
stylelint 配置使用，自动修复css，书写顺序
https://juejin.cn/post/6940127032932040735
阿离王
lv-4
2021年03月16日 13:58 · 阅读 5100
关注
stylelint 配置使用
安装 stylelint 和 Standard 规范
npm install --save-dev stylelint stylelint-config-standard
复制代码
然后再根目录创建 .stylelintrc.js 文件, 并写下以下内容
{
"extends": "stylelint-config-standard"
}
复制代码
在 package.json 文件的 scripts 加上命令, 规则检查自动修复css
"style": "stylelint "src/**/*.(vue|scss|css)" --fix",
复制代码
vscode配置
安裝 StyleLint
在 settings.json 文件设置， win + , 快捷键可以快速打开
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
}
复制代码
设置完之后，在vscode就可以有提示了，也保存自动修复了
自定义css属性顺序规则
除了使用设定默认的 standard 规则外，我们还可以在 .stylelintrc.js 内添加自己喜欢的规则
先安装 stylelint-order
npm install stylelint-order --save-dev
复制代码
在 .stylelintrc.js 设置代码如下
module.exports = {
"plugins": [
"stylelint-order"
],
"rules": {
"order/properties-order": [
"width",
"height"
]
}
}
复制代码
先引入 plugins 插件， 在 order/properties-order 里面写css属性的先后顺序，
完整的 .stylelintrc.js 如下
module.exports = {
"extends": [
"stylelint-config-standard"
],
"plugins": [
"stylelint-order"
],
"rules": {
// 颜色指定大写
"color-hex-case": "upper",
// 禁止空块
'block-no-empty': true,
// 颜色6位长度
"color-hex-length": "long",
// 兼容自定义标签名
"selector-type-no-unknown": [true, {
"ignoreTypes": []
}],
// 忽略伪类选择器 ::v-deep
"selector-pseudo-element-no-unknown": [true, {
"ignorePseudoElements": ["v-deep"]
}],
// 禁止低优先级的选择器出现在高优先级的选择器之后。
"no-descending-specificity": null,
// 不验证@未知的名字，为了兼容scss的函数
"at-rule-no-unknown": null,
// 禁止空注释
"comment-no-empty": true,
// 禁止简写属性的冗余值
"shorthand-property-no-redundant-values": true,
// 禁止值的浏览器引擎前缀
"value-no-vendor-prefix": true,
// property-no-vendor-prefix
"property-no-vendor-prefix": true,
// 禁止小于 1 的小数有一个前导零
"number-leading-zero": "never",
// 禁止空第一行
"no-empty-first-line": true,
// 属性的排序
"order/properties-order": [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"justify-content",
"align-items",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"border",
"border-style",
"border-width",
"border-color",
"border-top",
"border-top-style",
"border-top-width",
"border-top-color",
"border-right",
"border-right-style",
"border-right-width",
"border-right-color",
"border-bottom",
"border-bottom-style",
"border-bottom-width",
"border-bottom-color",
"border-left",
"border-left-style",
"border-left-width",
"border-left-color",
"border-radius",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"font-size",
"font-family",
"font-weight",
"text-align",
"text-justify",
"text-indent",
"text-overflow",
"text-decoration",
"white-space",
"color",
"background",
"background-position",
"background-repeat",
"background-size",
"background-color",
"background-clip",
"opacity",
"filter",
"list-style",
"outline",
"visibility",
"box-shadow",
"text-shadow",
"resize",
"transition"
],
}
}
复制代码
忽略stylelint对css的检验
忽略整个文件，在首行加入 /* stylelint-disable /
/ stylelint-disable /
html {}
复制代码
忽略多行
/ stylelint-disable /
html {}
.div {
color: red;
}
/ stylelint-enable /
复制代码
忽略一行， 在样式前加入 / stylelint-disable-next-line */ 以忽略该行
id {
/* stylelint-disable-next-line /
color: pink !important;
}
复制代码
在 .stylelintrc.js 內设定需要忽略的文件
{
ignoreFiles: ["dist/**/", "src/assets/scss/abc.scss"]
}
复制代码
stylelint 官网
标签：stylelint,no,color,书写,width,border,order,css 来源： https://www.cnblogs.com/ellafive/p/16598041.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。