前言stylelint是一个强大的现代CSS审查工具，帮助开发者实现统一的代码规范，避免样式错误。它支持less和sass等预处理器。目前，stylelint的验证规则已经超过100条，而且这个数字还在不断增加。一、stylelint的具体作用是什么Stylelint有一百多条校验规则，可以分为三类：校对样式的规则是针对空格（例如冒号附近的空格）、换行、缩进等在。用于确定代码可维护性的规则确定是否在CSS选择器中使用ID，或者是否在声明中应用important关键字。判断代码错误的规则检测错误的十六进制颜色书写或简写属性是否会覆盖其他声明语句。2、安装依赖于安装stylelintnpmi-Dstylelintstylelint-config-stand安装适应预处理语法的插件，以sass为例：npmi-Dstylelint-scss安装webpack插件npmi-Dstylelint-webpack-plugin3.通过npm命令运行//package.json{"scripts":{"lint:css":"stylelint**/*.{html,vue,css,sass,scss,less}"}}可以在命令行手动运行：npmrunlint:css4.通过webpack插件运行//vue.config.jsconstStyleLintPlugin=require('stylelint-webpack-plugin');module.exports={...configureWebpack:{plugins:[newStyleLintPlugin({files:['**/*.{vue,htm,html,css,sss,less,scss,sass}'],fix:false,//是否自动修复cache:true,//是否缓存emitErrors:true,failOnError:false,})],},};5.按照以下顺序编写配置和搜索。如果任何项目有值，则搜索将结束。package.json中的stylelint属性规范规则在.stylelintrc文件中指定，文件格式可以是JSON或YAML。您还可以向文件添加扩展名，.stylelintrc.json、.stylelintrc.yaml、.stylelintrc.yml、.stylelintrc.js。stylelint.config.js文件，默认导出一个配置对象规则，没有开启规则，也没有默认值。每个规则都必须明确配置以启用它。defaultSeverity只支持“warning”和“error”，用于定义全局默认的错误级别。extends可以扩展现有的配置（无论是自己的配置还是第三方的配置）是社区构建的规则或规则集、支持方法、工具集、非标准的CSS特性，或者非常具体的用例。处理器是社区构建的功能，可以连接到stylelint的管道，在进入stylelint的过程中修改代码，并在退出时修改结果。我们不鼓励使用内置语法，因为处理器与自动修复功能不兼容。ignoreFiles忽略特定文件，node_modules是默认忽略的目录。但是，如果设置了ignoreFiles，它将被覆盖。注意：这不是忽略大量文件的有效方法。如果您想有效地忽略大量文件，请使用.stylelintignore或调整文件范围。//stylelint.config.jsmodule.exports={defaultSeverity:'error',extends:['stylelint-config-standard'],//官方推荐规则:{},};6.忽略项目和目录下添加的文件.stylelintignore文件，配置规则同.gitignore和.eslintignore规则。#.stylelintignore#不需要打包的旧样式库*.min.css#其他类型文件*.js*.jpg*.png*.eot*.ttf*.woff*.json#测试和打包目录/test//dist/七、stylelint和eslint同时使用git-hooks配置//package.json{..."lint-staged":{"*.{html,vue,css,sass,scss,less}":["npmrunlint:css"]},"gitHooks":{"pre-commit":"lint-staged"},}
