[JavaScript知识库]vue 使用stylelint

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文件所用到的包。