关于前端:stylelint-接入实战踩坑总结

前言

团队单干时，当每个人的代码都领有自定义的格式化形式时，在提交 merge 的时候往往要解决很多抵触，此时咱们能够应用 eslint+stylelint 来对团队的代码进行束缚。eslint的配置引入比较简单，网上有比拟多的教程，而 stylelint 的教程大多语焉不详。在这里，我会介绍一下我在引入 stylelint 所遇到的坑，以及解决办法。

注释

stylelint是一个弱小的，古代的代码查看工具，能够帮忙你在团队单干中强制执行 款式约定。

1. 装置 stylelint

yarn add -D stylelint

2. 配置文件

应用 stylelint 检测器须要一个 配置对象，你能够应用三种形式来创立这个对象。

• package.json 中的 stylelint 属性。
• .stylelintrc.js文件
• stylelint.config.js 文件输入的 js 对象

一旦发现它们中的任何一个，将不再持续进行查找，进行解析，将应用解析后的对象。本次应用的是.stylelintrc.js 文件来进行配置。

3. 应用 stylelint

装置官网文档的说法你能够依照以下办法运行 stylelint 检测款式代码。

--fix 用来主动修复，但不能修复所有的问题。

// package.json
"scripts":{"lint:css":"stylelint src/**/*.css --fix"}

踩坑点 1：

因为我的我的项目里应用的款式语言是 less。所以检测 css 是必定不对的，所以这里咱们须要做一点改变

// package.json
"scripts":{"lint:css":"stylelint src/**/*.less --fix"}

于是咱们能够运行这串代码了

yarn lint:css postcss-less

大家能够看到，这里报了一些揭示，简略翻译为让咱们用对应的语法去解析咱们的款式。而这对应的语法解析器是须要咱们去装置的。

yarn add -D   postcss-less

于是再次对脚本进行批改。

// package.json
"scripts":{"lint:css":"stylelint src/**/*.less --fix  --custom-syntax postcss-less"}

OK 到这里咱们就能够失常的去跑 lint 命令对咱们的款式代码进行格式化了。接下来咱们来配置 lint 规定

4. 配置规定

stylelint 目前是有些工作者帮忙翻译出了中文文档，如果对浏览英文文档有肯定排斥性的同学能够查看中文文档。

咱们首先须要装置三个 npm 包帮忙咱们欠缺规定

yarn add -D stylelint-config-standard stylelint-order stylelint-config-css-modules

stylelint-config-standard 是 stylelint 的举荐配置，stylelint-order是用来在格式化 css 文件时对代码的属性进行排序。stylelint-config-css-modules 是 css-module 的计划来解决款式文件

我的配置文件长这样：

// .stylelintrc.js
module.exports = {processors: [],
    plugins: ['stylelint-order'],
    extends: [
        "stylelint-config-standard",
        "stylelint-config-css-modules"
    ],
    rules: {
        "selector-class-pattern": [ // 命名标准 -
            "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
            {"message": "Expected class selector to be kebab-case"}
        ],
        "string-quotes":"single", // 单引号
        "at-rule-empty-line-before": null,
        "at-rule-no-unknown":null,
        "at-rule-name-case": "lower",// 指定 @规定名的大小写
        "length-zero-no-unit": true,  // 禁止零长度的单位（可主动修复）"shorthand-property-no-redundant-values": true, // 简写属性
        "number-leading-zero": "never", // 小数不带 0
        "declaration-block-no-duplicate-properties": true, // 禁止申明快反复属性
        "no-descending-specificity": true, // 禁止在具备较高优先级的选择器后呈现被其笼罩的较低优先级的选择器。"selector-max-id": 0, // 限度一个选择器中 ID 选择器的数量
        "max-nesting-depth": 3,
        "indentation": [2, {  // 指定缩进  warning 揭示
            "severity": "warning"
        }],
        "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',
            'margin-collapse',
            'margin-top-collapse',
            'margin-right-collapse',
            'margin-bottom-collapse',
            'margin-left-collapse',
            'overflow',
            'overflow-x',
            'overflow-y',
            'clip',
            'clear',
            'font',
            'font-family',
            'font-size',
            'font-smoothing',
            'osx-font-smoothing',
            'font-style',
            'font-weight',
            "line-height",
            'letter-spacing',
            'word-spacing',
            "color",
            "text-align",
            'text-decoration',
            'text-indent',
            'text-overflow',
            'text-rendering',
            'text-size-adjust',
            'text-shadow',
            'text-transform',
            'word-break',
            'word-wrap',
            'white-space',
            'vertical-align',
            'list-style',
            'list-style-type',
            'list-style-position',
            'list-style-image',
            'pointer-events',
            'cursor',
            "background",
            "background-color",
            "border",
            "border-radius",
            'content',
            'outline',
            'outline-offset',
            'opacity',
            'filter',
            'visibility',
            'size',
            'transform',
        ],
    }
};

• processors 属性因为此次并没有应用，所以不做介绍，有趣味的同学能够查问官网文档。
• plugins 是由社区创立的规定或规定集，反对方法论、工具集，非标准 的 CSS 个性，或十分特定的用例。
• extends 继承一个已存在的配置文件。（在我的配置中，继承了 css-module 和官网举荐的配置）
• rules 规定决定检测器要查找什么和要解决什么，所以，通过该选项你就能够开启相应规定，进行相应的检测。所有规定必须显式的进行配置，因为 没有默认值。

另外还有 defaultSeverity和 ignoreFiles也能够在这里配置，有须要的同学能够在文档中找到。

因为我在配置文件中曾经对相应规定做了正文，解释了他的作用，如果有同学对此有疑难，欢送留言或者加我好友进行交换~

留神： null为禁用规定。能够在 rules 外面重写笼罩官网举荐的配置规定。

5. 疏忽 lint 文件

此时咱们曾经能够失常的应用 stylelint 来格式化款式代码了。然而在我的项目中往往会存在一些不须要格式化的代码，比方咱们会独自抽离一个 overrides 文件来重写 antd 的款式。显然这里是不须要格式化的，因为 antd 的选择器命名可能跟咱们的标准不尽相同。所以咱们须要在运行 lint 时疏忽这个文件。

• 1. 咱们能够在 .stylelintrc.js 中配置ignoreFiles。
• 2. 创立 .stylelintignore 文件。
• 3. 咱们能够通过 /* stylelint-disable */的办法，来对代码快进行疏忽 lint 检测。

我采纳的是第二种办法，配置如下：

// .stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
*.css
src/styles/antd-overrides.less

6. 主动格式化

在进行完上文的配置之后，其实咱们曾经达到了标准的目标，然而如果每次都要跑一次 lint 无疑就会减轻咱们的编码累赘。这里介绍两种形式在咱们写款式代码时，对代码主动格式化的办法。

6.1 stylelint vs-code 插件

咱们能够在 vs-code 插件市场中搜寻 stylelint 插件，它大略长这个样子

能够看到我这里是彩色的，这是因为我不必这个插件，它有一些 bug。

简略介绍一下 bug 所在：

在 antd-overrides 中有一些代码过了咱们配置的 lint 规定，然而没有这个插件会给咱们报一个CssSyntaxError。而且在删除一些问题代码之后，这个插件还会报一些逻辑代码谬误。这是我不能承受的。于是果决弃用。大家能够依照本人我的项目理论状况进行抉择~

6.2 webpack plugin

你能够很轻松的找到 webpack 的 stylelint-plugin。代表这个插件曾经宽泛应用~ 你能够释怀的接入。

为什么一个 webpack 插件能够帮忙咱们格式化款式代码呢，这是因为咱们在热更新从新编译的时候，这个插件会帮咱们检测代码。并依据 .stylelintrc.js 文件中配置的规定进行fix。如果有 lint 谬误能够抉择让我的项目无奈运行，防止将没有 lint 的款式上传到代码库。

于是我在应用这个插件的时候踩了好多坑，接下来我一一的说。

6.3 插件踩坑集锦

最开始时。按百度到的各路大神的写法，只须要这么配置就能够：

new StyleLintPlugin({
    context: "src",
    configFile: path.resolve(__dirname, './stylelintrc.js'),
    files: '**/*.less',
    failOnError: false,
    quiet: true,
    syntax: 'less'
})

终局不出预料，没有用。最恐怖的是他会给你一种 假象，你本地运行的时候没有工作问题，让你误以为你的代码没有任何问题！其实，是这个插件没有作用到。

另外这么配置如果应用 stylelint 的 vscode 扩大时，还会有一大堆的让你心态爆炸的 红波浪~~~~。

通过我的踩坑，终于实现了一个没有报错，没有假象，没有谬误查看，没有疏忽我的疏忽配置的配置！

    new StylelintPlugin({configFile: path.resolve(__dirname, './.stylelintrc.js'),
      extensions: ['less'],
      files: 'src/**/*.less',
      fix: true,
      customSyntax: 'postcss-less',
      lintDirtyModulesOnly: true,
      threads: true,
      exclude: ['node_modules', 'src/styles/antd-overrides.less'],
    })

这里我想具体的解释一下各字段的用法。

• configFile 没什么好说的，加载配置文件。
• extensions 指定要查看的扩展名。这里肯定要配置，不然会去检测你的 tsx。
• files 指定检测目录。
• fix 这个是重点。这就是主动格式化的要害配置所在。
• customSyntax 这又是要害！！！！肯定要加这个配置，百度到的大佬配置中应用的是 syntax。这个配置曾经过期了，须要应用customSyntax，并且 value 肯定要是你之前装置过的postcss-less 包。这个配置居然连 webpack 官网文档中都没有。我曾经筹备去提 issue 了
• lintDirtyModulesOnly仅查看有变动的文件，启动时跳过查看。
• threads 会依据 cpu 的数量主动决定池子的大小。
• exclude 这个十分重要。因为我在实践中发现 webpack-plugin 没有读取我在 .stylelintignore 中配置的疏忽规定，而导致我的项目在运行时报了一大堆谬误。肯定要配！！！！

7. commit 检测

这个就比较简单了，如果我的项目之前配置过 eslint 时的 commit 检测，这里只须要在脚本中退出检测款式就能够。配置如下

  "lint-staged": {"*.{ts,tsx}": [
      "eslint --ext js,ts,tsx --fix",
      "git add"
    ],
    "*.less": [
      "stylelint --fix  --custom-syntax postcss-less",
      "git add"
    ]
  }

这里其实是不须要跑 yarn lint:css 的，因为如果这样在 commit 时会全量检测所有 src 下的款式，然而其实咱们只须要检测批改的文件即可。特地留神： 肯定要加上 --custom-syntax postcss-less。

好了，到这里咱们就。。。。还没完结。

咱们来梳理一下 stylelint 的工作流程

• .stylelintrc配置规定。
• package.json配置脚本命令
• .stylelintignore配置疏忽规定
• stylelint-webpack-plugin配置主动格式化规定
• lint-staged配置 commit 规定

首先运行我的项目时会去读取 .stylelintrc 文件，并依据外面的规定通过 webpack-plugin 去查看代码，主动格式化。在运行 lint:css时，会读取 .stylelintignore 检测时疏忽相干文件。在批改完代码后 commit 时 lint-staged 会帮咱们在做一次提交前检测，防止上传没有格式化的代码。

7.1 梳理流程时发现的坑

在我做完 stylelint 相干配置之后，开始了激情编码环节。然而我依据设计图去给元素设置一个带有透明度的色彩 rgba 时。贴心 的插件就会帮忙我，把 rgba 格式化成 rbg 色彩。像这样:

主动格式化后，嘟 变成了这样

rgb(0 0 0 / 12%) 这是什么货色？起初我并不在意，直到我发现了在页面上这个款式变成了这样

这不是逗我吗，你格式化就格式化，怎么变成了这玩意？？？

于是连忙去百度，百度不到答案。。。而后又谷歌，终于找到了一个看起来像答案的答案

简略解释一下。这是一个比拟新的 css 标准。sass 标准还不反对。类比到我的 less。也就是我的 less 标准还不反对。因为我的项目里用的 less 版本是 3 +。还不是最新的。所以不反对几乎是再失常不过的事。我的 less 把我的新标准的带透明度的 rgb 辨认成了第三个参数前面的 / 是除法。 0 除以 12%大声通知我是多少？还是 0 吧

所以我的 less 没有错 错的是这个世界！

报着尝试的心态我去浏览器间接写了一个rgb(0 0 0 / 12%) 看看支不反对。后果如下：

没错，浏览器反对！那好办了，摆在咱们背后有两个解决办法

1. 让 less 反对这种色值计划
2. 让 stylelint 不格式化

带着办法我去查找了 less 的官网仓库的 changelog 我妄图尝试在最新版的更新里哪怕提到半个 rgb 的字眼，然而并没有。也可能是我的眼神不太好~~。总之第一条办法失败了。

那么咱们用第二种办法，首先要晓得是 stylelint 的哪条规定把 rgba 格式化成了rgb。我做了大量的尝试。并且做了大量的百度。不出我所料。百度不到。尝试也都不对。路走窄了。

于是我换了一个思路，我去看看官网举荐的stylelint-config-standard 配置库。如图：大家留神红框

在 23 版本时，色彩曾经是百分比了。这也是最新版本，也是我我的项目里的版本。那么能够确定的是，肯定是这个库帮我格式化了！！！

那么咱们该怎么让他不格式化呢？去查看这个库其余的版本，凡是哪个版本里呈现了 rgba，那他这个版本就不会主动格式化。

功夫不负有心人。我只找了一个版本，就找到了

于是对我的项目里的库版本做降级解决~，这样就不会把 rgba 格式化成 rgb 了！功败垂成。

后记

遇到问题不可怕，可怕的是百度不到答案。

如果百度不到还能够谷歌。切记切记。