在vue项目中添加stylelint

在项目中引入stylelint的意义

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

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

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 文件来忽略某些文件

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

3. 安装相关依赖

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

1. stylelint: 一个强大的现代 CSS 样式检查工具，用于确保 CSS 代码的一致性和避免错误。

2. stylelint-config-standard: stylelint 的标准配置，包含一组推荐的规则，帮助你快速开始使用 stylelint。

3. stylelint-config-standard-scss: stylelint 的标准配置，专门用于 SCSS（Sass）文件，包含一组推荐的规则。

4. stylelint-config-recommended-vue: stylelint 的推荐配置，专门用于 Vue.js 项目，包含一组推荐的规则。

5. stylelint-order: 一个 stylelint 插件，用于检查和修复 CSS 属性的顺序，确保代码的一致性。

6. postcss-html: 一个 PostCSS 插件，用于解析 HTML 文件中的 <style> 标签和内联样式，允许在 HTML 文件中使用 PostCSS 处理 CSS。

7. postcss-scss: 一个 PostCSS 插件，用于解析 SCSS 文件，允许在 SCSS 文件中使用 PostCSS 处理 CSS。

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

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

5. 执行命令

# 检查样式
npm run stylelint
# 自动修复样式问题
npm run stylelint:fix