stylelint 基础包

styline-order 顺序包，只有下载了顺序包，才能自定义顺序，也就是你下载了这个包，最后规则还是需要你自己来定义。

stylelint-config-recommended-vue 规则包， 专门用来给vue文件使用的。

我在这里踩了好多坑，我之前下载的是stylelint-config-recommended ，在vue文件中总是报错，是用不了。

我去问up博主，给我的解释是配置项的问题，害的我一直查文档改配置项,浪费了大量时间。

最后我就在想报错也有可能是规则包本身就下错了，

stylelint 是作为样式包，但是我们使用vue框架样式写在vue文件中，

vue文件和css文件可不一样，所以检验css和vue文件一定是两个不同的包。

stylelint-config-recommended 是用来专门检验css文件

stylelint-config-recommended-vue 是用来检验vue文件中的样式。

在注意一点

如果你要使用在html文件当中,那也需要下载响应的包

stylelint-config-html 用来解析html文件中的样式。

如果你想要在webpack中使用。

stylelint-webpack-plugin 需要下载这个包。

在webpack配置文件中

引入

const StylelintWebpackPlugin = require('stylelint-webpack-plugin')

在配置项中

plugins:[new StylelintWebpackPlugin(

{

                  // 要检查的文件后缀

                  files:['**/*.{html,vue,css}'],

                  //  自动修复

                  fix:true,

                  //  发现错误警告

                  failOnError:false,

                  //  检查stylelint配置文件的路径

                  onfigFile:'.stylelintrc.js'

             })

)]

在files这个选项中， 我有点不太明白 **/*  这是啥意思，这也不是正则表达式，反正最后的匹配结果就是 括号中的后缀名文件。

如果有明白 " **/* "具体是什么样的意思。就在评论下方留言，或者私信我都可以。

最后 我还是给大家解释一下，  安装完后这些包，你还需要进行一个配置。

在根目录下创建一个.stylelintrc.js文件

module.exports = {

  // root: true,

  plugins: ['stylelint-order'],

  extends: ['stylelint-config-html','stylelint-config-recommended-vue'],

  "rules": {

    "order/order": [

      "custom-properties",

      "declarations"

    ],

    //  属性顺序

    "order/properties-order": [

      "position",

      "width",

      "height",

      "border"

    ]

  },

    // 排除一下后缀名文件

  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']

}.

属性顺序有什么用。

 

重排和重绘.

这个是浏览器优化里面的知识。

重排一定会引发重绘,重绘不一定引发重排。

影响重排的属性: 定位  脱离文本流，top left 等。

所以在属性中，一般和定位有关系的，就是影响盒子布局的都会放在前面。

这样也能提高渲染效率,也更加方便你观看样式。

stylelint 中，只需要注意 你如果要解析css以外的文件，就需要下载其它的包。为什么要说其它的包。

因为stylelint官网上，只告诉你解析css文件所用到的包。