安装stylelint

  1. 如果项目不存在package.json，先npm init生成一个

    1
    npm init

  2. 保证nodejs版本为（^14.18.0、^16.14.0或>=18.0.0）

    1
    npm init stylelint
    1. 会安装默认的插件以及生成默认的.stylelintrc.json配置文件,但是我们约定配置文件都用.js，所以项目中会是.stylelintrc.js
    2. 由于stylelint对less的支持度不高，没有特定的相关插件使用，所有考虑项目使用react+scss，结合项目本身我们约定安装以下插件(其他类型项目再补充，如有vue项目需要添加适配vue的插件)
      • stylelint
      • stylelint-config-standard-scss
      • stylelint-config-prettier-scss
      • stylelint-order
      • stylelint-config-rational-order

  3. 简易运行检测命令

    1
    npx stylelint yourfile.css

  4. package.json中加入通用命令

    1
    2
    3
    4
    "scripts": {
      "stylelint": "stylelint  ./src/**/*.{scss,css}",
      "stylelint-fix": "stylelint --fix ./src/**/*.{scss,css}",
    }

  5. 使用eslint-loader/eslint-webpack-plugin+webpack对项目运行前检查，这里使用eslint-webpack-plugin

    1
    npm install stylelint-webpack-plugin --save-dev
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const StylelintPlugin = require('stylelint-webpack-plugin');

    module.exports = {
      // ...
      plugins: new StylelintPlugin({
        extensions: ['css', 'scss', 'sass'], // 告诉插件要检查的文件类型
        failOnError: true,
      }),
      // ...
    };

  6. 辅助插件配置

  • vscode可以安装stylelint插件对代码进行错误高亮提示

image.png

  • webstorm

配置文件约定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
module.exports = {
  extends: [
    'stylelint-config-standard-scss', // 升级了 stylelint-config-standard 并且 合并了  stylelint-config-recommended-scss
    'stylelint-config-prettier-scss', // 关闭所有不必要的或可能与 Prettier（扩展stylelint-config-prettier）冲突的 CSS 和 SCSS 规则
    // 配置按照以下顺序对相关属性声明进行分组
    // Positioning
    // Box Model
    // Typography
    // Visual
    // Animation
    // Misc
    // .declaration-order {
    //   /* Positioning */
    //   position: absolute;
    //   top: 0;
    //   right: 0;
    //   bottom: 0;
    //   left: 0;
    //   z-index: 10;

    //   /* Box Model */
    //   display: block;
    //   float: right;
    //   width: 100px;
    //   height: 100px;
    //   margin: 10px;
    //   padding: 10px;

    //   /* Typography */
    //   color: #888;
    //   font: normal 16px Helvetica, sans-serif;
    //   line-height: 1.3;
    //   text-align: center;

    //   /* Visual */
    //   background-color: #eee;
    //   border: 1px solid #888;
    //   border-radius: 4px;
    //   opacity: 1;

    //   /* Animation */
    //   transition: all 1s;

    //   /* Misc */
    //   user-select: none;
    // }
    'stylelint-config-rational-order',
  ],
  rules: {
    // stylelint 参考文档 https://www.stylelint.com.cn/user-guide/rules
    // 'rule-empty-line-before': 'never', // 选择器前空行
    'comment-empty-line-before': 'never', // 注释前空行
    'selector-pseudo-element-no-unknown': null, // 使用 未知的 选择器 ::abc 这种  争议在于 ::input-placeholder也是未知的
    'no-descending-specificity': null, // 优先级越高的选择权必须按顺序放到后面
    'selector-class-pattern': null, // 为类选择器指定一个模式
    'color-function-notation': 'legacy', // a { color: rgb(0, 0, 0) }  a { color: rgb(0 0 0) }
    'media-feature-range-notation': 'prefix', // @media (min-width: 1px) {}  @media (width >= 1px) {}
    'alpha-value-notation': 'number', // a { opacity: 0.5 }  a { opacity: 50% }
    'font-family-no-missing-generic-family-keyword': null, // 使用其他字体
    // stylelint-scss 参考文档 https://github.com/stylelint-scss/stylelint-scss  List of rules
    'scss/double-slash-comment-empty-line-before': 'never', // 注释前空行
    'scss/at-mixin-pattern': null, // 似 Sass/SCSS 的混合名称指定模式
    'scss/no-global-function-names': null, // scss方法 abs/nth
  },
}