<返回更多

css代码规范工具stylelint

2020-05-05    
加入收藏

css样式的书写顺序及原理——很重要!很重要!很重要!

为什么重要???

概括讲就是,它涉及了浏览器的渲染原理:reflow和repaint

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

如何优雅解决?

开源比较流行的 CSS lint 方案:Csslint、SCSS-Lint、Stylelint

 

Stylelint 优点

 

步骤一:安装 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 文件

 

配置方式:

  1. 在 package.json 中的 stylelint 属性指定规则
  2. 在.stylelintrc 文件中指定,文件格式可以是 JSON 或者 YAML。也可以给该文件加后缀,像这样:.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js
  3. 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 方式

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

如果希望在保存时自动 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 自动修复

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>