使用 stylelint检查CSS(2)

你可以禁止!important的使用,或者你的浏览器并不支持的brower hacks。如果你使用Autoprefixer(或者说你应该使用),你可以禁止在源样式表中使用供应商前缀。

如果你想要更加严谨 -- 你可以花费一些时间在配置上,以保证绝对的一致性 -- 你可以强制执行样式表属性的顺序,并为黑名单,白名单提供属性,值,函数还有单位。

执行代码样式的约定

stylelint具有自动执行代码样式的约定,所以你和你的队友无需主动设置。我们致力于使这些规则更加全面灵活。

这些规则主要针对于空格,但是同样针对于其它的细节,如;引号,大小写字母,在小数前写零,使用关键字以及拼读出值等等。

梦想你和你的队友可以建立一个格式约定(例如我们始终在声明冒号之后留有一个空格),并在你的stylelint配置中进行修改,之后你们就不会为此再次讨论。让其执行于机器王国。

制定以及扩展一切

Nicholas Zakas,ESLint(以及 CSS Lint)的创作者,写到ESLint的成功在于它的扩展性。stylelint试图遵循ESLint的领先优势,并且提供给CSS 作者一个linter,同样具有扩展性。

你可以书写并且发布自己的规则插件。现在已经具有了一大堆可以使用的;并且我们渴望看到别人的优秀插件。

配置是可扩展的,因此可以共享。至于插件,我们从ESLint了解了这一功能的价值性。检查其中包括WordPress和SUITCSS配置的,并且已经公布的。

如果你不喜欢 stylelint 的内置提示,你可以手工创建属于你自己的风格,甚至可以为你的组织进行创建。你还可以自定义用于提供警告信息的规则。

使用stylelint的API,你可以创建文本编译器的插件,并进行测试使stylelint 融入到你的工作流的每个方面。

如果你有关于stylelint扩展的想法,请让我们知道!

预期问题的答案

在你的心中可能存在几个疑问。这里有几个最为常见问题的解释:

是否可以在SCSS或者Less中使用stylelint?

答案是肯定的,你可以在SCSS中使用stylelint,并且在Less中也得到了支持!自从PostCSS允许自定义解析器,stylelint可以很轻松的支持各种各样的非标准语法 - 你可以自定义一个PostCSS解析器进行解析。

正因为PostCSS解析器 -- 因此stylelint支持SCSS,Less以及新SugarSS。如果你想要实现另外一个自定义语法的支持,你可以通过PostLess得以实现!

当然,还有一定的规则在你的非标准语法面前得到羁绊(如迷惑于Sass id选择器的 #{$interpolation})。因为stylelint试图掩盖我们样式表的样式 - 一些人使用标准CSS,一些人使用扩展语言如SCSS,一些人使用一些怪异的自定义属性等等 - 这些难免都会产生一些漏洞需要去填补。但是,我们一直在处理我们找到的这些错误;在此期间的任何规则可以完全被关闭或者逐次样式表或者逐次行的进行禁用。

stylelint是否可以使用未来CSS语法?

是的!类似于上面所述的答案: stylelint可以理解PostCSS所理解的任何东西,包括启用未来任何的CSS语法(可能通过PostCSS插件)。事实上,一些stylelint规则专门处理未来CSS语法和一些自定义属性。

stylelint配置是巨大的,我应该从哪儿开始呢?

我们建议三种配置方式:

扩展一个发布的配置。我们维持stylelint-配置标准,以便于为用户提供一个固有的基准。并且许多的配置也已经公布。从头开始,一次添加一条规则。默认情况下,没有一条规则被开启,所以通过手动添加规则你就会知道哪一个会被强制执行,并且可以理解你添加的每条规则。启动复制粘贴配置,决定使用哪些选项并选择性进行删除。

值得庆幸的是,你不需要一遍又一遍的书写巨大的stylelint配置。你可以选择一个你喜欢的风格并且可以在任何地方使用它。

运行stylelint最简单的方式?

对于大多数人而言,最简单的方式就是通过它的命令行。

如果你更偏爱gulp插件,你可以使用gulp-stylelint。对于webpack,这里有很多选择的可能性。我们希望这些插件可以激励你们创建其它的stylelint插件,例如,适用于Grunt的插件。(你可以在开源项目中去寻找!)

你也可以使用PostCSS 插件运行stylelint,包括插件中所包含的任何东西。这就意味着你可以在任何可以使用PostCSS(几乎涵盖于每一个编译工具)的地方使用stylelint!

此外,这里也存在一个适用于Atom,Sublime Text,VS Code的stylelint文本编译插件,以提供最快的反馈。关于更多信息,请查阅 stylelint 网站上的互补工具列表。

如下所示,在命令行中,你所期待看到的结果:

使用 stylelint检查CSS

在Atom中显示如下;

使用 stylelint检查CSS

stylelint是否可以修补我的错误?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzppxg.html