stylelint初体验

SQC 发布于2019-08-29 11:05 / 1274人阅读

摘要：当初在用的时候用过来检查语法。现在用替代，而插件市场上那款插件目前不支持配置文件，有些不爽，于是研究了下其它相关插件。就在这个期间发现，粗粗看了看，甚合我意。所有配置项配置项说明配置项说明提示请使用花括号来包围声明。

当初在用sublime的时候用过csslint来检查css语法。
现在用vscode替代sublime，而vscode插件市场上那款csslint插件目前不支持配置文件，有些不爽，于是研究了下其它相关插件。就在这个期间发现stylelint，粗粗看了看，甚合我意。主要有如下几点：

支持配置文件

对less的支持程度比csslint好（粗粗看下来是比较好的）

~~可作为eslint插件使用~~

使用和eslint很像，定制化更高

资源

看了看github上的文档，很快就安装好。

所有配置项

配置项说明

配置项说明

提示：请使用花括号来包围声明。

规则

at-rule- 支持自定义黑白名单

代码块

block-opening-brace-和block-closing-brace- 大括号格式。
block-no- 两个不允许

代码块内声明不能为空

代码块内代码不能写在一行

颜色值

color- 颜色值，主要检查十六进制

注释

comment- 支持黑名单（感觉不太会用，还需要慢慢熟悉）

声明

declaration-bang-space- 一条完整的声明前后的空白格式
declaration-block-no- 三个不允许

不允许在一个代码块中重复申明

不允许出现忽略的属性

不允许缩写属性,比如#333

declaration-block-properties-order 属性出现的顺序（视使用者的个人情况来决定要不要启用）
declaration-block-semicolon-newline- 声明后分号格式
declaration-block-single-line-max-declarations 一行中出现的申明最大条数
declaration-block-trailing-semicolon 每个代码块内最后一条申明必须带上分号
declaration-colon- 声明中冒号的格式
declaration-empty-line-before 每条申明前必须 | 禁止有空白行(不能有空格或tab等)
declaration-no-important 禁用!important
declaration-property-unit- 属性单位黑白名单
declaration-property-value-属性值黑白名单

字体

font-family-name-quotes 字体系列中命名时带引号
font-weight-notation 字重的值使用命名还是数值

函数

function- 没怎么用过css的函数,有待研究

通用配置

indentation 代码缩进
keyframe-declaration-no-important keyframe申明中禁用!important
length-zero-no-unit 值为0时不使用单位
max-empty-lines 最大连续空行数
max-line-length 一行字符最大长度
max-nesting-depth 嵌套深度

待续

GPU云服务器云服务器初体验 stylelint 初长成小白初

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

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

如何为你的 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
推荐几个前端开发插件

摘要：提高开发效率简单的集成到了生成的项目上项目地址一集成管理团队的信息步奏安装添加规则根目录添加文件，并添加规则，必须为格式添加到中安装并添加命令在中添加查看详情二集成管理团队编写规范步奏安装提高开发效率简单的集成到了vue-cli生成的项目上项目github地址 A Vue.js project Build Setup # install dependencies npm inst...

张宪坤 2019-08-23 12:07 评论0 收藏0