stylelint如何在vue3中使用

为什么要使用stylelint?

作为一个div工程师在项目的开发阶段我们会我们除了会写很多的html元素布局，同时我们还会对布局的元素进行美化，在一比一还原设计图时我们会写很多的css，当css越写越多时你的css代码就会变得难以维护，如果本人修改的话可能没有问题，但是其他同事接手时或者过了很长时间你自己需要对样式进行修改时...令人崩溃的问题产生了，你需要查看html是如何布局的，在查看css样式是如何实现的，如果使用了预处理器，scss或less可能还会有嵌套结构和逻辑，再加上新人根本不注重代码风格，空格缩进和不规则的命名，这样的问题就会大大的影响我们的团队协作，以及需求的产出！！！

什么是stylelint？

官方介绍： 一个强大的，现代的代码检查工具，可以帮助您避免错误并在您的样式中强制执行约定。

其实简单的来说就是一个项目样式的一个规范，可以对我们的css进行代码风格和语法进行检查，甚至可以自动修复

官网链接：stylelint.docschina.org/

如何在vue3中使用

yarn add stylelint stylelint-config-standard -D

首先通过yarn安装两个核心包，stylint自然是我们的核心包所有的东西都基于它， stylelint-config-standard是规则扩展相当于官方默认提供给我们的规范

在根目录创建.stylelintrc.js文件并写入以下内容：

module.exports = {
  extends: [
    'stylelint-config-standard',
  ]
}

写法的目的是告诉stylelint我们的规范继承于stylelint-config-standard,extends属性支持直接属性值参数也支持数组参数，你也可以继承多个规范，但是各个规范会有相同的规则，所以会出现数组下标的后一位会覆盖掉前一位的现象！！！

你也可以在对象当中配置rules来进行较为细颗粒度的控制

官网中的rules配置方法：stylelint.bootcss.com/user-guide/…

module.exports = { 
    "plugins": [ "stylelint-order" ], 
    "rules": {
        "order/properties-order": [ "width", "height" ] 
    } 
}

如何在项目当中产生报错提示，以vscode为例

步骤一：安装stylelint插件

步骤二：创建.vscode文件创建setting.json文件，并实现对应配置

这样编译器就有提示了

stylint可以通过命令检测不符合规范的文件，并且可以自动修复 修改package.json

"slint": "stylelint \"src/**/*.(vue|scss|css)\"", //检查不符合规范的文件 --fix自动修复

然后运行 yarn slint 对项目符合规范的文件进行检查，yarn slint:fix对文件进行修复

stylelint忽略

stylelint在运行命令时会检查所有的css等文件，但是有时我们会重置一些插件的的样式，例如会将element的样式重置为我们项目的主色调，但是element的命名不是符合stylelint规范的所以在格式化时就会报错，这是我们在项目根目录下创建.stylelintignore，方式和git的忽略一样,将文件路径填入就会跳过stylint的检查，同样stylelint可以单文件忽略,但是个人认为stylint的目的是为了规范化管理样式，但是单文件的形式会使管理变得很松散，不利于管理。所以单文件形式小伙伴们自己去官网查看吧

容易踩坑的点

stylelint不兼容vue3，这造成了加查样式时会报语法错误

建议：

1可以将核心包降三个大版本

2.安装社区建议的对应插件即可解决

https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-14.md

初次写文章，望大佬指教~