stylelint总结

MingjunYang 发布于2019-08-23 14:00 / 1115人阅读

摘要：有一百多条校验规则这些规则可以分为三类用于校对风格的规则用于判别代码可维护性的规则以及用于判断代码错误的规则。所有规则默认都是关闭的。声明后还需要在中使用它，具体规则名称以及可能的取值需要去查看每个插件的文档。

stylelint有一百多条校验规则, 这些规则可以分为三类：用于校对风格的规则、用于判别代码可维护性的规则、以及用于判断代码错误的规则。虽然条数众多，但是不用怕，因为都是默认关闭的，我们可以灵活地进行配置

1、安装

npm install stylelint --save-dev
npm install stylelint-config-standard --save-dev

其中stylelint是运行工具，stylelint-config-standard是推荐的配置，

2、配置文件

创建配置文件有3种方式：
（1）.stylelintrc

{
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

(2) stylelint.config.js

module.exports = {
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

(3) package.json

{
    ......
    "stylelint": {
        "rules": {
            "color-hex-case": "lower"
        }
    }
}

主要的配置项有extends、rules等
extends
extends用来扩展配置项

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

rules
rules是一个对象，属性名为规则名称，属性值为规则取值，它告诉stylelint该检查什么，该怎么报错。所有规则默认都是关闭的。
规则的类型不同，取值也不同。规则的取值请戳这里：规则的取值

{
  "rules": {
    "at-rule-blacklist": string|[],
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true
    ...
  }
}

规则的值为null时表示禁用该规则

{
  "rules": {
    "block-no-empty": null
  }
}

rules还可以支持一些自定义配置，给规则传递一个数组即可，数组第一项是规则值，第二项是自定义配置。例如：
（1）指定错误级别：

"indentation": [2, { 
  "severity": "warning" 
}]

（2）自定义错误信息

"color-hex-case": ["lower", {
    "message": "Lowercase letters are easier to distinguish from numbers"
}]

plugins
插件一般是由社区提供的，对stylelint已有规则进行扩展，一般可以支持一些非标准的css语法检查或者其他特殊用途。一个插件会提供一个或者多个检查规则。
plugins声明后还需要在rules中使用它，具体规则名称以及可能的取值需要去查看每个插件的文档。

{
  "plugins": [
    "../some-rule-set.js"
  ],
  "rules": {
    "some-rule-set/first-rule": "everything",
    "some-rule-set/second-rule": "nothing",
    "some-rule-set/third-rule": "everything"
  }
}

3、webpack的使用

webpack需要使用插件stylelint-webpack-plugin
具体用法如下：

var StyleLintPlugin = require("stylelint-webpack-plugin");
 
module.exports = {
  // ... 
  plugins: [
    new StyleLintPlugin(options),
  ],
  // ... 
}

简单配置示例

stylelink.config.js

module.exports = {
    "extends": "stylelint-config-standard",
    "rules": {
        "declaration-block-trailing-semicolon": null
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99925.html

Lint Your Code

摘要：形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。其中是可选的，如果没有则禁用所有规则，如果有则禁用所有规则。也可以定义一个命令同时运行这两个命令，我在这里使用了我们定义了在钩子触发时会执行命令。形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。本文简单介绍JS、CSS、 Git Commit 的规范工具及用法。 Lin...

hidogs 2019-08-23 10:27 评论0 收藏0
如何为你的 Vue 项目添加配置 Stylelint

摘要：如何为你的项目添加配置如何为你的项目添加配置现在已经是年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如已经不再维护，以及之后文件只剩下部分等。如有疑问或授权协商请与我联系。如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不...

番茄西红柿 2019-04-23 11:56 评论0 收藏0
CSS代码检查工具stylelint

摘要：所以校验规则的行动迫在眉睫。是一个强大的现代检测器，可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍代码检查工具概述拥有超过条的规则，包括捕捉错误最佳实践控制可以使用的语言特性和强制代码风格规范。但是，该命令一定要慎用。前面的话　　CSS不能算是严格意义的编程语言，但是在前端体系中却不能小觑。 CSS 是以描述为主的样式表，如果描述得混乱、没有规则，对于其他开发者一定是一个定...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
引入stylelint对CSS/Sass做代码审查

摘要：规范越早引入越好，规范的约束永远不嫌多。是什么是一个基于的代码审查工具，它易于扩展，支持最新的语法，也理解类似的语法。是一个强大和现代的审查工具，有助于开发者推行统一的代码规范，避免样式错误。规范越早引入越好，规范的约束永远不嫌多。 stylelint是什么？ stylelint 是一个基于 Javascript 的代码审查工具，它易于扩展，支持最新的 CSS 语法，也理解类似 CS...

klinson 2019-08-29 12:14 评论0 收藏0
stylelint 搭配 stylelint-order，更随心所欲的编码 CSS

摘要：对于而言，不能算是严格意义的编程语言，但是在前端体系中却不能小觑。为什么这么难学不是科学，而是艺术所以校验规则的行动迫在眉睫，立即执行。如何遵守提交的时候，以的形式人工校验。以语法表示文件的路径。嗯，这点很重要。原文链接：http://hangyangws.win/2017/06... 为什么需要校验 CSS 规则对于编程语言进行「语法、书写」校验，能有效「归并」不同开发者的「不...

Carson 2019-08-29 13:52 评论0 收藏0