前言
我们在书写 css 样式时，总是随心所欲，杂乱无章，没有一个特定的顺序，代码不美观。那我们可以通过 stylelint 来帮我们做这件事！但是网上关于stylelint的配置很多都不能生效，所以记录一下自己的简单配置。先看效果
安装
安装官方stylelint vscode 插件对我好像并不生效，最后安装的 vscode-stylelint-stzhang 这个插件。
# 可以一起安装，为了代码好看所以每一个都隔了一行
npm i stylelint -D
npm i stylelint-order -D
npm i stylelint-config-standard -D
npm i stylelint-config-rational-order -D
npm i stylelint-config-recommended-scss -D
配置
// .stylelintrc.js 是不是简单到不能忍
module.exports = {
root: true,
extends: [
'stylelint-config-standard',
'stylelint-config-rational-order',
'stylelint-config-recommended-scss'
],
rules: {
'at-rule-no-unknown': null,
'scss/at-rule-no-unknown': true
}
}
stylelint-config-rational-order 这个包可以很好的保证css的书写顺序，比 stylelint-order 更加省心，强烈推荐五颗星 ⭐️⭐️⭐️⭐️⭐️! 他默认按照如下顺序帮我们格式化css
- Positioning
- Box Model
- Typography
- Visual
- Animation
- Misc
/* demo.css */
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
/* Box Model */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
/* Typography */
color: #888;
font: normal 16px Helvetica, sans-serif;
line-height: 1.3;
text-align: center;
/* Visual */
background-color: #eee;
border: 1px solid #888;
border-radius: 4px;
opacity: 1;
/* Animation */
transition: all 1s;
/* Misc */
user-select: none;
}
报错
配置完成之后会报一些莫名其妙的错如：
Missed semicolon (CssSyntaxError)stylelint(CssSyntaxError)
Unknown word (CssSyntaxError)stylelint(CssSyntaxError)
解决办法就是新建 .stylelintignore 文件 然后重启编辑器
node_modules
bin
dist
*.*
!*.css
!*.scss
结语
在代码lint 这块可能很多项目都只是配了 eslint，很少有项目去配置 stylelint，stylelint 配好了能大大提高咱们的代码美化度与可读性，值得拥有！
