前端规范(三)之stylelint

本文主要是介绍前端规范(三)之stylelint，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

**相关章节**

前端规范(一)之ESlint以及@antfu/eslint-config
前端规范(二)之Prettier
前端规范(三)之stylelint
前端规范(四)之husky+lint-staged+commitizen+commitlint

前端规范stylelint

stylelint 用来检查样式文件 css less sass 等是否符合规范
stylelint中文官网

1. vscode插件安装

相信你肯定已经安装过了
在这里插入图片描述

2. 项目中安装相关包

此处介绍几种常用的包

stylelint：核心包
stylelint-config-standard：共享的常见的css书写规范（标准）
stylelint-config-recommended：共享的常见的css书写规范（推荐）
stylelint-config-recommended-scss:推荐的scss增强
stylelint-config-recommended-vue:推荐的vue增强
stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则
stylelint-order：提供给css属性排序的功能
postcss：postcss-html 的依赖包，可以用于转换 css 代码
postcss-html：用于解析 HTML（和类似 HTML）的 PostCSS 语法，可以用于识别 html 或者 vue 中的样式
stylelint-config-html：Stylelint 的可共享 HTML 配置。

npm i -D stylelint stylelint-config-standard stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-prettier stylelint-order postcss postcss-html stylelint-config-html

3. package.json 中配置scripts

 "scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint:stylelint": "stylelint --fix src/**/*.{css,less,scss,vue,sass}"},

4.创建.stylelintrc.js

module.exports = {extends: ['stylelint-config-standard','stylelint-config-prettier','stylelint-config-html/vue','stylelint-config-recommended-vue/scss','stylelint-config-recommended-scss',],plugins: ['stylelint-order'],customSyntax: 'postcss-html',ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json',],overrides: [{files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],extends: ['stylelint-config-recommended'],rules: {'keyframes-name-pattern': null,'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['deep', 'global'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],},],},},],
};

5. 创建忽略文件.stylelintignore

/dist/*
/public/*
public/*
/node_modules/**

6. 运行命令

npm run lint:stylelint

如下图所示，触发的规则是不允许存在样式空模块，当然你写代码的时候已经触发了stylelint,可以看到有红色的破浪线，无须执行命令
在这里插入图片描述

7. 保存的时候自动格式化

{"editor.codeActionsOnSave": {"source.fixAll": true,"source.fixAll.eslint": true, //eslint保存的时候触发"source.fixAll.stylelint": true //stylelint保存的时候触发},"editor.formatOnSave": true,//开启保存的时候自动格式化"editor.defaultFormatter": "esbenp.prettier-vscode",//指定格式化的插件为Prettier"[vue]": {//局部设置，优先级较高，此处的局部设置，是防止用户区设置干扰到工作区设置"editor.defaultFormatter": "esbenp.prettier-vscode"},// 配置stylelint检查的文件类型范围"stylelint.validate": ["css","less","postcss","scss","sass","vue"],"stylelint.enable": true,//开启stylelint
}