StyleLint 使用指南
StyleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint
类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误.
安装stylelint
npm install -d -save-dev stylelint
安装stylint-config-standard和stylelint-order
npm install stylelint-config-standard stylelint-order --save-dev
其中,stylelint是运行工具,stylelint-config-standard是stylelint的推荐配置,stylelint-order是CSS属性排序插件(先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)。
配置方式:
按顺序查找,任何一项有值,就会结束查找
在 package.json 中的
stylelint
属性指定规则在 .stylelintrc 文件中指定,文件格式可以是
JSON
或者YAML
。也可以给该文件加后缀,像这样: .stylelintrc.json , .stylelintrc.yaml , .stylelintrc.yml , .stylelintrc.jsstylelint.config.js 文件,该文件 exports 一个配置对象
语法格式:
rules优先级大于extends,建议采用extends方式统一管理
module.exports = {
processors: [],
plugins: [],
extends: "stylelint-config-standard", // 这是官方推荐的方式
rules: {
"at-rule-empty-line-before": "always"|"never",
"at-rule-name-case": "lower"|"upper",
"block-no-empty": true,
}
};
配置项解析
rules
rules
是一个对象,属性名为规则名称,属性值为规则取值,它告诉stylelint
该检查什么,该怎么报错。所有规则默认都是关闭的。
所有stylelint
的规则详情戳这里。
规则名称
- 由连字符组成的小写单词
- 由两个部分组成:
- 第一部分描述该规则应用于什么东西
- 第二部分表示该规则检查了什么
"number-leading-zero"
// ↑ ↑
// the thing what the rule is checking
规则应用于整个样式表时只包含,第二个部分:
"no-eol-whitespace"
"indentation"
// ↑
// what the rules are checking
规则取值
规则类型不同,支持的值也不同,所有取值戳这里,以下是几个示例:
{
"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
}
}
除了规则本身的取值之外,stylelint
还支持一些自定义配置,给规则传递一个数组即可,数组第一项是规则值,第二项是自定义配置。
"selector-pseudo-class-no-unknown": [true, {
"ignorePseudoClasses": ["global"]
}]
通过配置项,你可以指定:
severity
,错误级别,取值"warning"
或者"error"
。默认情况下,所有规则的错误级别都是"error"
,通过defaultSeverity
可以修改此默认值。不过,需要针对某规则修改错误级别就需要用到该属性。
"indentation": [2, {
"severity": "warning"
}]
message
,自定义错误信息。
"color-hex-case": ["lower", {
"message": "Lowercase letters are easier to distinguish from numbers"
}]
如果你需要严格的定制,写一个自定义格式化器会给你最大控制权
extends 扩展插件
stylelint的配置可以 extend 一个已存在的配置文件(无论是你自己的还是第三方的配置)。当一个配置继承了里一个配置,它将会添加自己的属性并覆盖原有的属性
。
你也可以将extends
设置为一个数组,每一项都是一个独立的stylelint
配置项,后一项将会覆盖前一项,而接下来你自己书写的 rules 规则可以覆盖他们所有。
以下示例中,rules
中的indentation
和number-leading-zero
将会覆盖stylelint-config-standard
中对应的规则。
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": "tab",
"number-leading-zero": null
}
}
以下,./myExtendableConfig
中的配置将会覆盖stylelint-config-standard
中的对应配置,而rules
中的indentation
将会覆盖./myExtendableConfig
中对应的规则。
{
"extends": [
"stylelint-config-standard",
"./myExtendableConfig"
],
"rules": {
"indentation": "tab"
}
}
说清楚优先级之后,我们来详细了解一下extends
的取值情况。
extends
的值实际上一个定位器
(或者一个包含若干定位器
的数组),所有可以通过require
来使用的资源都可以作为extends
的值。因此,可以使用 Node 的 require.resolve()
算法适应任何格式。这意味着一个“定位器”可以是:
node_modules
中的某个模块名称 ,该模块的主文件需要返回一个配置对象 (比如,stylelint-config-standard
;模块的main
文件必须是一个有效的 JSON 配置)- 一个带有
.js
或.json
扩展名的文件 (which makes sense 如果你在 Node 上下文中创建了一个 JS 对象,并将它传入也是有效的)的绝对路径。 - 一个带有
.js
或.json
扩展名的文件的相对路径,相对于引用的配置 (例如,如果 configA 是extends: "../configB"
,我们将查找configB
相对于 configA)。
正因为extends
,你可以创建和使用可分享的 stylelint 配置。 如果你要发布你的配置到 npm,在你的 package.json
文件中使用 stylelint-config
关键字。
plugins 插件列表:
插件一般是由社区提供的,对stylelint
已有规则进行扩展,一般可以支持一些非标准的css
语法检查或者其他特殊用途。一个插件会提供一个或者多个检查规则。
plugins
是一个数组,包含一组插件的定位器
,这些定位器
的取值跟extends
一致。
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"
}
}
processors 处理器列表:
你还可以在stylelint
的处理流中加入自己的处理函数,就是这里的processors
。
processors
只能作为 命令行 和 Node API 使用,PostCss
的插件会忽略它们。
通过processors
,我们可以让styleline
去处理html
中style
标签里面的css
代码,MarkDown
里面的css
代码块或者js
里面一段包含css
的字符串。
使用方法如下:
{
"processors": [
"stylelint-html-processor",
[ "some-other-processor", { "optionOne": true, "optionTwo": false } ]
],
"rules": {..}
}
processors
的每一项也是一个定位器
,需要额外的参数时,可以传递一个数组,第一项是定位器
,第二项是需要的参数。
defaultSeverity
所有在第二个选项中没有指定严重级别的规则的默认严重级别。severity
可用的值为:
"warning"
"error"
ignoreFiles
一个文件匹配规则,或者一组文件匹配规则,来指定需要忽略的文件。
更高效的忽略文件的方法是通过 .stylelintignore 文件或者调整一下你的文件匹配规则。
ignoreFiles方式
// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff
片段禁用规则
/* stylelint-disable */
/* (请说明禁止检测的理由)前端组件限制类名 */
.cropper_topContainer .img-preview {
border: none;
}
/* stylelint-enable */
fix方式
stylelint --fix 就能搞定 更多语法规则
一键fix
在 package.json 中的 scripts 添加指令,然后 npm run lintcss 即可
{
"scripts": {
"lintcss": "stylelint 'src/**/*.css' --fix",
}
}
手动fix
不放心的话,就针对指定文件自己执行, 文件一定要用""
括起来
stylelint "src/less/bulma-cloud.less" --fix
问题排除:
错误提示:
Unexpected unknown at-rule "@function" (at-rule-no-unknown) Unexpected unknown at-rule "@each" (at-rule-no-unknown) Unexpected unknown at-rule "@if" (at-rule-no-unknown) Unexpected unknown at-rule "@return" (at-rule-no-unknown)
最开始只安装了官方推荐的定义规则"stylelint-config-standard",我想是不是我缺少插件的问题,所以我就多安装了一个"stylelint-scss"插件,错误已然存在,最后通过"stylelint-scss"的github找到了答案,就是需要添加排除规则。具体内容请点击访问
添加排除规则之后就好了。
{
"extends": [
"stylelint-config-standard",
"stylelint-config-css-modules"
],
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": [ true, {
ignoreAtRules: ['extend', 'at-root', 'debug', 'warn', 'error', 'if', 'else', 'for', 'each', 'while', 'mixin', 'include', 'content', 'return', 'function']
}]
}
}
参考:
StyleLint 使用指南的更多相关文章
- 如何规范git commit提交
相信很多人使用SVN.Git等版本控制工具时候都会觉得每次提交都要写一个注释有什么用啊?好麻烦,所以我每次都是随便写个数字就提交了,但是慢慢的我就发现了,如果项目长期维护或者修改很久之前的项目,没有一 ...
- VSCode常用插件之vscode-stylelint使用
更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...
- Sentry 开发者贡献指南 - 前端(ReactJS生态)
内容整理自官方开发文档 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Map ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- UE4新手之编程指南
虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...
- JavaScript权威指南 - 对象
JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...
- JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...
- const extern static 终极指南
const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...
- Atitit.研发管理软件公司的软资产列表指南
Atitit.研发管理软件公司的软资产列表指南 1. Isv模型下的软资产1 2. 实现层面implet1 3. 规范spec层1 4. 法则定律等val层的总结2 1. Isv模型下的软资产 Sof ...
随机推荐
- angular 控件间的通信
先引入 设置meta元素 http://blog.sina.com.cn/s/blog_51048da70101cgea.html //设置 虚拟窗口的大小等于设备的大小 <meta name= ...
- Property - 特性(Python)
Property - Python 特性 不同的书籍对 property 一词的翻译有所不同, 我们将 property 翻译成 '特性' 以区别于 attribute 一词. 先看看 propert ...
- qt creator源码全方面分析(2-3-1)
目录 Using External Tools 使用Qt语言学家 预览QML文件 使用外部文本编辑器 配置外部工具 Using External Tools 您可以直接从Qt Creator中使用外部 ...
- 038.Python关于TCP黏包问题
黏包现象 1 黏包现象演示 服务端 #服务端 import socket sk = socket.socket() # 注册主机到网络 sk.bind( ("127.0.0.1", ...
- 论文《A Generative Entity-Mention Model for Linking Entities with Knowledge Base》
A Generative Entity-Mention Model for Linking Entities with Knowledge Base 一.主要方法 提出了一种生成概率模型,叫做en ...
- H5监听浏览器滚动条scrollbar
监听滚动条scrollbar(适配手机) 1. document.documentElement.scrollHeight:整个html的高度,含被隐藏界面高度 2. window.pageYOffs ...
- JVM源码分析之临门一脚的OutOfMemoryError完全解读
概述 OutOfMemoryError,说的是java.lang.OutOfMemoryError,是JDK里自带的异常,顾名思义,说的就是内存溢出,当我们的系统内存严重不足的时候就会抛出这个异常(P ...
- JS水仙花数
题目:3位数==个位立方+十位的立方+百位的立方.这个3位数就是水仙花数.要求打印出所有的水仙花数 <body> <div id=d1> </div> <sc ...
- C# bubble sort,selection sort,insertion sort
static void Main(string[] args) { InsertionSortDemo(); Console.ReadLine(); } static void InsertionSo ...
- NServiceBus 入门到精通(一)
什么是NServiceBus?NServiceBus 是一个用于构建企业级 .NET系统的开源通讯框架.它在消息发布/订阅支持.工作流集成和高度可扩展性等方面表现优异,因此是很多分布式系统基础平台的理 ...