css代码规范工具stylelint _stylelint

css样式的书写顺序及原理——很重要！很重要！很重要！
为什么重要？？？
概括讲就是，它涉及了浏览器的渲染原理：reflow和repaint

还想知道更多为什么可以参考：
https://blog.csdn.net/qq_36060786/article/details/79311244

如何优雅解决？
开源比较流行的 CSS lint 方案：Csslint、SCSS-Lint、Stylelint

【css代码规范工具stylelint】Stylelint 优点

其支持 Less、Sass 这类预处理器；
在社区活跃度上，有非常多的第三方插件；
在 Facebook，Github，wordPress/ target=_blank class=infotextkey>WordPress 等公司得到实践，能够覆盖很多场景。

步骤一：安装 stylelint 依赖
npm install stylelint stylelint-config-recess-order stylelint-config-standard stylelint-order stylelint-scss
stylelint-scss

scss 拓展，增加支持 scss 语法

stylelint-order

该插件的作用是强制你按照某个顺序编写 css 。例如先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性。这样可以极大的保证我们代码的可读性。

stylelint-config-standard

作用：配置 Stylelint 规则。

官方的代码风格：stylelint-config-standard 。该风格是 Stylelint 的维护者汲取了 GitHub、google、Airbnb 多家之长生成的。

stylelint-config-recess-order

stylelint-order 插件的第三方配置

步骤二：根目录添加.stylelintrc.json 文件
配置方式：

在 package.json 中的 stylelint 属性指定规则
在.stylelintrc 文件中指定，文件格式可以是 JSON 或者 YAML 。也可以给该文件加后缀，像这样：.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js
stylelint.config.js 文件，该文件 exports 一个配置对象 span>

按顺序查找，以上三种方式任何一项有值，就会结束查找

在项目根目录新建.stylelintrc.json 文件，复制以下内容

module.exports = {"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],"rules": {"at-rule-no-unknown": [true, {"ignoreAtRules" :["mixin", "extend", "content", "include"]}],"indentation": 4,"no-descending-specificity": null // 禁止特异性较低的选择器在特异性较高的选择器之后重写}}

rules 优先级大于 extends，建议采用 extends 方式统一管理

配置文件中单独配置 at-rule-no-unknown 是为了让 Stylelint 支持 SCSS 语法中的 mixin、extend、content 语法。

片段禁用规则

/* stylelint-disable */ /* （请说明禁止检测的理由）前端组件限制类名 */ .cropper_topContainer .img-preview {border: 0 none; } /* stylelint-enable */

fix 方式

stylelint --fix 就能搞定

更多语法规则请参考：
https://stylelint.io/user-guide/usage/cli

webstorm 可以配置 external tools 实现 autofix，添加 keymap 快捷键，

如果希望在保存时自动 fix，参考这里
https://blog.csdn.net/gyz718/article/details/70556188

步骤三：vscode 编辑器安装插件
在应用商店搜索扩展并安装：stylelint-plus、Vetur、Beautify

"stylelint.autoFixOnSave": true,// 保存自动格式化"vetur.format.defaultFormatter.html": "js-beautify-html",// 格式化模板"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned",// 第一个属性后开始折行，并对齐},

在 vscode 中安装插件：stylelint-plus
当然也可以选择普通的 stylelint 插件，不过 plus 版本有保存即 fix 的功能

使用
css 格式化：ctrl + s 自动修复