前语

年前为公司升级了新的monorepo项目架构，近来不必加班，在家得闲。便想再搭个monorepo项目，随便记载一下。
用到以下pnpm + vite3 + vue3 + ESLint + Stylelint + TypeScriptmonorepe实战记载，此篇为其间一个的简略介绍。

Css规范以往都不太受重视，团队不同人编写的Css代码格局也是千差万别。因而容易出现问题，比方影响其他款式，乱用!important，款式名太长等。
Stylelint作为Css代码查看东西，可躲避一些Css过错，并坚持一致的编码风格。
感觉相对来说我们都更了解ESLint吧，Stylelint和ESLint在功用和运用上较为相似的。

装置

装置stylelint、stylelint-config-standard

pnpm add stylelint stylelint-config-standard -D

stylelint: 东西包，用于执行检测指令。
stylelint-config-standard: 标准规范装备。

装备文件

能够经过以下办法装备stylelint规矩。

  • 在package.json中增加stylelint特点，例如。

    {
  "stylelint"{
    "extends": "stylelint-config-standard"
  }
}

  • .stylelintrc.*文件，支撑(.json，.yaml/.yml, .js)

  • style.config.js文件，当packge.json中指定"type": "module"，后缀需为.cjs。导出一个js对象，例如。

    module.exports  = {
  extends: 'stylelint-config-standard'
}

执行npx stylelint [文件]指令对进行校验，增加--fix参数可主动修正问题，例如

npx stylelint "**/*.css" --fix

一般推荐增加到scripts

{
  "scripts": {
    "lint:css": "npx stylelint \"**/*.css\" --fix"
  }
}

更多参数指令行参数请前往Stylelint 指令行参数

疏忽文件

新建.stylelintignore文件，能够将一些第三方包文件，打包文件等不需要校验的文件加入其间。比方

# .stylelintignore stylelint疏忽文件
/node_modules/*
/dist/*
/public/*

常用装备

extends

能够经过extends直接承继一个现有的装备(能够是npm装备包的包名或本地其他装备文件的途径)，那么这个的装备规矩能够直接作用于当时装备。 比方官方的标准规范装备。

module.exports  = {
  extends: 'stylelint-config-standard'
}

rules

rules装备是个对象，键为规矩名，值为规矩装备。 规矩装备有以下格局:

  • null：表示封闭规矩 
    module.exports  = {
   rules: {
     'selector-class-pattern': null
   }
}
  • 一个值: (主选项) 
    module.exports  = {
   rules: {
     'max-empty-lines': 2,
     'unit-allowed-list': ['em', 'rem', '%', 's']
   }
}
  • 只要两个值的数组（[主选项，辅佐选项]） 
    module.exports  = {
  rules: {
    'indentatio': ['tab', { except: ['value'] }],
  }
}

Stylelint内置了170多个规矩，默认这些规矩都是封闭状态。必须将规矩显现装备才收效。
也就是说需要将规矩装备在rules中才收效，当然经过extends承继的规矩也能收效。当时装备文件的规矩优先级大于承继的规矩，当存在相同的规矩名，当时装备的规矩会覆盖承继的规矩。

plugins

插件是社区构建的支撑办法、东西集、非标准CSS 功用或非常详细的用例的规矩或规矩集。
运用插件能够扩展一些才能，要运用插件需将插件装备到plugins中(装备办法和extends相同)，并在rules中为插件供给选项。比方经过stylelint-order能够在格局化时对款式特点进行排序。

// 需要先装置
pnpm add stylelint-order -D
// 装备文件 演示用的stylelint.config.cjs
module.exports = {
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-order'], // 运用插件
  rules: {
     // 为插件供给选项
    'order/properties-order': [
      'display',
      'position',
      'float',
      // ...篇幅有限，其他顺序先省掉
    ],
  }
}

先试下插件作用，检测收效。

Stylelint
加上--fix，主动给调整了特点位置。
Stylelint

overrides

经过overrides特点，能够为某些款式运用特殊装备。例如

module.exports = {
  overrides: [
    {
      // 为scss文件指定语法解析器
      files: ['*.scss','**/*.scss'],
      customSyntax: 'postcss-scss'
    },
    {  
      // 为h5文件下的css设置嵌套最深3层
      files: [ 'h5/**/*.css'],  
      rules: {  
        'max-nesting-depth': 3  
      }
    }
  ]
}

以上就是比较常用的装备选项，更多装备选项请前往Stylelint中文官网，或Stylelint中文文档

VS Code增加Stylelint插件

经过Stylelint指令行东西能够查看款式风格，能够经过VS Code的Stylelint插件，在编写时给出提示，还可装备保存时主动格局化。

  • 编码提示
    装置Stylelint插件

    Stylelint

    vscode的Stylelint插件会依据装备文件校验款式，并给予提示。
    Stylelint

  • 保存主动格局化
    修正settings.json文件，当我们保存文件时，stylelint就会主动修正一些规矩。

    // settings.json
{
    // ...
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true, 
        "source.fixAll.stylelint": true, // 新增修正
    },
    "stylelint.validate": [ "css", "sass", "scss", "vue"] // 新增修正
}

vite3 + vue3 + scss项目支撑Stylelint

1, 装置并装备vite插件 vite-plugin-stylelint

pnpm add vite-plugin-stylelint -D

// vite.config.js
// ...
import stylelint from 'vite-plugin-stylelint'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...
    stylelint({ fix: true })
  ],
})

2，装置装备vue的相关stylelint依赖

pnpm add postcss-html stylelint-config-standard-vue stylelint-config-standard-scss -D
  • postcss-html: vue文件款式解析器。
    不同的css扩展语言需运用不同的解析器，如下。
    • .sass: postcss-sass
    • .less: postcss-less
    • .js, .jsx, .ts, .tsx: postcss-css-in-js
    • .vue: postcss-html
  • stylelint-scss: scss插件
  • stylelint-config-standard-vue[/scss]: vue标准装备，经过overrides选项调整了.vue文件款式规矩，承继了stylelint-config-standard[-scss]和stylelint-config-recommended-vue[/scss]规矩。
  • stylelint-config-standard-scss: scss标准装备

修正stylelint.config.cjs装备

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-standard-vue/scss'
  ],
  plugins: [
    'stylelint-order',  
    'stylelint-scss'
  ],
  // ...
}

// 对应版别
"postcss-html": "^1.5.0",
"stylelint": "^15.4.0",
"stylelint-config-standard": "^32.0.0",
"stylelint-config-standard-scss": "^7.0.1",
"stylelint-config-standard-vue": "^1.0.0",
"stylelint-order": "^6.0.3",
"stylelint-scss": "^4.6.0",

规矩列表

stylelint中文规矩列表

结合Prettier

装置pnpm add prettier stylelint-prettier stylelint-config-prettier -D

  • prettier：prettier东西
  • styleline-prettier: 基于 prettier 代码风格的 stylelint 规矩
  • stylelint-config-prettier：禁用与prettier抵触的stylelint规矩
module.exports = {
  extends: [ 
    // ... 其他装备在前
    'stylelint-prettier/recommended',
    'stylelint-config-prettier',
  ], 
  plugins: [
   // ...
   'stylelint-prettier'
  ],
  // ... 
}