【stylelint】快速入门

安装依赖

pnpm add -D stylelint postcss-html stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-order stylelint-config-recess-order

• stylelint
  • CSS 代码检查工具
• postcss-html
  • 解析 Vue 文件中 style 标签，提取出 style 标签内容
• stylelint-config-standard-scss
  • 为 SCSS 语法定制的官方预设配置
  • 扩展了 stylelint-config-standard，添加了特定于 SCSS 的规则
• stylelint-config-recommended-vue
  • 为 Vue 单文件组件（.vue 文件）中的样式部分设计的预设
  • 专注于 Vue 单文件组件中样式部分的特殊性，ex.:deep()
• stylelint-order
  • 用于强制执行 CSS 属性的排序规则
  • 该插件本身并没有默认的排序规则
• stylelint-config-recess-order
  • 提供了一套完整的 CSS 属性排序规则
  • 基于 Twitter 的 Recess CSS 风格指南

配置说明

• 默认情况下，stylelint 只能处理纯 CSS 文件
• overrides 部分指定了处理 .vue 文件时使用的自定义语法解析器

// stylelint.config.mjs
export default {
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue',
    'stylelint-config-recess-order'
  ],
  plugins: ['stylelint-order'],
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html'
    }
  ],
  rules: {
    // 配置自定义规则
  }
}

配置忽略文件

// .stylelintignore
node_modules/
dist/
public/
*.js
*.ts
*.jsx
*.tsx
*.json
*.md 

插件相关

vscode/cursor 搜索并安装插件

stylelint.vscode-stylelint

插件功能：语法高亮，代码提示，代码格式化...

插件相关配置：

// settings.json
{
  "stylelint.enable": true, // 启用插件
  "editor.codeActionsOnSave": { // 保存文件时修复
    "source.fixAll.stylelint": "explicit"
  },
  // 校验的文件类型
  "stylelint.validate": ["css", "scss", "vue"],
  // 关闭编辑器默认的验证功能
  "css.validate": false,
  "scss.validate": false,
}