在vue项目中添加stylelint

在项目中引入stylelint的意义

保证团队代码风格一致性
提高代码质量和开发效率
优化css文件，间接性的提高渲染速度

1. 创建 .stylelintrc.cjs 配置文件

js 复制代码

module.exports = { extends: [ 'stylelint-config-standard', 'stylelint-config-standard-scss', 'stylelint-config-recommended-vue' ], plugins: ['stylelint-order'], rules: { // 指定声明块内属性的顺序 'order/properties-order': [ 'position', 'top', 'right', 'bottom', 'left', 'z-index', 'display', 'float', 'width', 'height', 'max-width', 'max-height', 'min-width', 'min-height', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'border', 'border-style', 'border-width', 'border-color', 'border-top', 'border-top-style', 'border-top-width', 'border-top-color', 'border-right', 'border-right-style', 'border-right-width', 'border-right-color', 'border-bottom', 'border-bottom-style', 'border-bottom-width', 'border-bottom-color', 'border-left', 'border-left-style', 'border-left-width', 'border-left-color', 'border-radius', 'background', 'background-color', 'background-image', 'background-repeat', 'background-position', 'background-size', 'color', 'font', 'font-family', 'font-size', 'font-weight', 'line-height', 'text-align', 'text-justify', 'text-indent', 'text-overflow', 'text-decoration', 'white-space', 'vertical-align', 'cursor', 'opacity' ], // 允许 global 关键字 'selector-pseudo-class-no-unknown': [ true, { ignorePseudoClasses: ['global'] } ], // 允许空源 'no-empty-source': null, // 允许未知单位 'unit-no-unknown': null, // 允许未知属性 'property-no-unknown': null, // 允许未知伪类选择器 'selector-pseudo-element-no-unknown': null, // 允许未知伪元素选择器 'selector-type-no-unknown': null, // 允许未知规则 'at-rule-no-unknown': null, // 允许未知函数 'function-no-unknown': null }, overrides: [ { files: ['**/*.vue'], customSyntax: 'postcss-html' }, { files: ['**/*.scss'], customSyntax: 'postcss-scss' } ] }

2. 创建 .stylelintignore 文件来忽略某些文件

bash 复制代码

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

3. 安装相关依赖

shell 复制代码

npm install --save-dev stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-order postcss-html postcss-scss

stylelint: 一个强大的现代 CSS 样式检查工具，用于确保 CSS 代码的一致性和避免错误。
stylelint-config-standard: stylelint 的标准配置，包含一组推荐的规则，帮助你快速开始使用 stylelint。
stylelint-config-standard-scss: stylelint 的标准配置，专门用于 SCSS（Sass）文件，包含一组推荐的规则。
stylelint-config-recommended-vue: stylelint 的推荐配置，专门用于 Vue.js 项目，包含一组推荐的规则。
stylelint-order: 一个 stylelint 插件，用于检查和修复 CSS 属性的顺序，确保代码的一致性。
postcss-html : 一个 PostCSS 插件，用于解析 HTML 文件中的 <style> 标签和内联样式，允许在 HTML 文件中使用 PostCSS 处理 CSS。
postcss-scss: 一个 PostCSS 插件，用于解析 SCSS 文件，允许在 SCSS 文件中使用 PostCSS 处理 CSS。

4. 在项目中package.json中添加脚本

json 复制代码

{ // ... 其他配置 "scripts": { // ... 现有脚本 "stylelint": "stylelint \"src/**/*.{css,scss,vue}\"", "stylelint:fix": "stylelint \"src/**/*.{css,scss,vue}\" --fix" } }