• Home
  • home > OMD > codeGuide >

    CSS代码检查工具stylelint配置使用详解

    Author：zhoulujun Date：

    如何使用stylelingt，快速配置推荐@blueking stylelint-config-bk，一键配置。如何关闭、禁用或者忽略一个规则？stylelint规则中文翻译说明

    往期回顾：

    《vue2老项目添加typescript与eslint支持(不用TSlint)》

    《Eslint静态代码检查——参数配置详细说明》

    《webstorm/intellij关于script标签的缩进问题》

    《治愈代码洁癖prettier药到病除》



    使用stylelint

    安装stylelint、stylint-config-standard和stylelint-order

    npm install stylelint --save-dev
npm install stylelint-config-standard --save-dev
npm install stylelint-order --save-dev
npm install stylelint-order stylelint-config-recommended-scss  --save-dev

    其中

    • stylelint是运行工具

    • stylelint-config-standard是stylelint的推荐配置

    • stylelint-order是CSS属性排序插件

    • stylelint-config-recommended-scss是sass 检查

    当然，有我们配置好的，比如：@blueking/stylelint-config-bk

    在项目根目录创建 .stylelintrc 配置文件

    module.exports = {
  defaultSeverity: 'error',
  extends: ['@blueking/stylelint-config-bk'],
  "rules": {
    'declaration-no-important': [true, {'severity': 'warning'}],
    'no-descending-specificity': [true, {'severity': 'warning'}],
    // 'no-descending-specificity': null,
    'selector-max-id': 2,
    'no-empty-source': null,
  }
};

    在npm加入："lint:style": "stylelint --fix ./**/*.{scss,css,vue}",

    WX20221201-213314.png


    忽略检查：Ignoring code

    Within files

    You can temporarily turn off rules using special comments in your CSS. For example, you can either turn all the rules off:

    /* stylelint-disable */
a {}
/* stylelint-enable */

    Or you can turn off individual rules:

    /* stylelint-disable selector-max-id, declaration-no-important */
#id {
  color: pink !important;
}
/* stylelint-enable selector-max-id, declaration-no-important */

    You can turn off rules for individual lines with a /* stylelint-disable-line */ comment, after which you do not need to explicitly re-enable them:

    #id { /* stylelint-disable-line */
  color: pink !important; /* stylelint-disable-line declaration-no-important */
}

    You can also turn off rules for the next line only with a /* stylelint-disable-next-line */ comment, after which you do not need to explicitly re-enable them:

    #id {
  /* stylelint-disable-next-line declaration-no-important */
  color: pink !important;
}

    Stylelint supports complex, overlapping disabling & enabling patterns:

    /* stylelint-disable */
/* stylelint-enable foo */
/* stylelint-disable foo */
/* stylelint-enable */
/* stylelint-disable foo, bar */
/* stylelint-disable baz */
/* stylelint-enable baz, bar */
/* stylelint-enable foo */

    Caveat: Comments within selector and value lists are currently ignored.

    You may also include a description at the end of the comment, after two hyphens:

    /* stylelint-disable -- Reason for disabling Stylelint. */
/* stylelint-disable foo -- Reason for disabling the foo rule. */
/* stylelint-disable foo, bar -- Reason for disabling the foo and bar rules. */

    Important: There must be a space on both sides of the hyphens.

    Files entirely

    You can use a .stylelintignore file to ignore specific files. For example:

    vendor/**/*.css

    The patterns in your .stylelintignore file must match .gitignore syntax. (Behind the scenes, node-ignore parses your patterns.) Your patterns in .stylelintignore are always analyzed relative to process.cwd().

    Stylelint looks for a .stylelintignore file in process.cwd(). You can also specify a path to your ignore patterns file (absolute or relative to process.cwd()) using the --ignore-path (in the CLI) and ignorePath (in JS) options.

    Alternatively, you can add an ignoreFiles property within your configuration object.


    stylelint 规则说明（中文翻译)

    规则确定了linter寻找和抱怨的内容。默认情况下，所有规则默认是关闭的，而且没有默认选项。这些规则遵循统一的命名惯例，协同配合，你可以在  关于规则中了解更多相关信息。

    除了这些规则，还有插件，它们是社区支持的方法、工具集，非标准的   CSS 特性，或特定的用例。查看插件了解更多。

    在下文中带有的图标的规则可以使用 stylefmt   进行自动修复。

    规则清单

    以下是 stylelint 的所有规则，并参照css vocabulary进行分类。

    具体查看：https://stylelint.io/user-guide/rules


    颜色

    字体系列

    字体重量

    功能

    数

    字符串

    • string-no-newline：禁止在字符串中使用（非转义的）换行符。

    • string-quotes：指定字符串使用单引号还是双引号           。

    长度

    时间

    • time-no-imperceptible：禁止 animation 和                      transition 小于或等于 100ms。

    单元

    值

    值清单

    Custom property

    Shorthand property

    Property

    关键帧声明

    声明

    声明块

    块

    选择

    选择列表

    根规则

    规则

    媒体功能

    自定义媒体

    媒体查询列表

    At-rule

    stylelint-disable 注释

    注释

    一般/表

    用户指南


    转载本站文章《CSS代码检查工具stylelint配置使用详解》,
    请注明出处：https://www.zhoulujun.cn/html/Operation/codeGuide/8891.html

    收藏
    上一篇：parserOptions.project has been set for @typescript-eslint/parse
    下一篇：webstrom升级taro报ESLint: TypeError: this.libOptions.parse is not a function