我们在书写 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
/* 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
!*.css
!*.scss
在代码lint 这块可能很多项目都只是配了 eslint，很少有项目去配置 stylelint，stylelint 配好了能大大提高咱们的代码美化度与可读性，值得拥有！
  
分类：
 前端
 
标签：
 
CSS
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    dota李天王