[JavaScript]（译）Stylelint: 私たちが常に望んでいたスタイル シート リンター_html/css_WEB-ITnose

元のアドレス: https://www.smashingmagazine.com/2016/05/stylelint-the-style-sheet-linter-weve-always-wanted/

誰もがクリーンで一貫性のあるものを望んでいます。使用される開発言語に関係なく、コードベース。多くの開発者は、JavaScript や Python などのプログラミング言語でリンターを設定することに慣れていますが、スタイルシートでリンターを使用することはほとんどありません。この記事では、スタイルシートのリンターである stylelint を紹介します。

スタイルシートで lint を使用することがなぜ重要なのか、stylelint がどのようにスタイルシートに命令を発行するのか、そしてエラーを回避する方法をすぐに見ていきます。最後に、stylelint の使用方法を見て、できるだけ早く使い始めます。

スタイル シートで lint を使用することが重要な理由

linter は、コードの一部が指定されたリンター設定ルールを満たさない場合にコードを分析し、エラーを報告するために使用されるツールです。

私たちの多くは、オープンソースのコードベース環境で働いています。コード スタイルの厳密なルールがなければ、コードはすぐに混乱してしまう可能性があります。もしかしたら、コードがすでに混乱しているため、コードを定期的にクリーンアップして自動的にクリーンアップしたいと考えているかもしれません。作業にスタイル シートのみが含まれる場合でも、コードの一貫性も必要です。

もちろん、チームには、Wiki または他の場所にコード スタイルを記述するプレーン テキストが記述されている場合があります。しかし、意図した目的を達成できない人的要因が常に存在します。人は、たとえ意図的ではなかったとしても間違いを犯します。

さらに、コーディング スタイルの要件に正確に従っていたとしても、同僚やオープン ソース プロジェクトの参加者はそうでない可能性があります。リンターを使用しない場合は、スタイルのコードとエラーを自分でチェックする必要があります。自動的に実行できることに時間を費やす資格のある人は誰もいません。リンターを使用すると、スタイルのチェックやすべてのエラーの注釈付けに時間を費やす必要がなくなるため、コードのプレビューにかかる時間を大幅に削減できます。コードがどのように見えるかではなく、コードが何を実行するかを自由に検査してください。

Stylelint

Stylelint は、David Clark、Richard Hallows、Evilebot Tnawi およびコミュニティによって JavaScript 言語で書かれた、非常に実用的でスタイリッシュなスタイルシート リンターです。そのルールの速度、互換性、コードの品質は、主観的に変更することはできません。 Sylelint には 100 を超えるルールがあり、その数は増え続けています。ただし、心配する必要はありません。デフォルトではすべてのルールが無効になっており、使用したいルールのみを使用できます。 Stylelint は CSS だけでなく、Sass、SugarSS、および PostCSS が解析できるその他の構文も検出できます (Stylelint がその上に記述されているため)。

スタイルシートに対する Stylelint は、JavaScript に対する ESLint と同じです。

ルール

Stylelin には 100 を超えるルールがあり、スタイル ルール、コードの保守性 ルール、およびコードの目的を変更するエラー のチェック ルールの 3 つのグループに分類できます。ブラウザ。スタイル仕様では、区切り文字 (コロンなど)、改行、インデントなどがチェックされます。 ID がセレクターで使用されている場合、またはキーワード ! important が宣言で使用されている場合、コード保守性ルールによってエラーが報告される場合があります。チェック エラー ルールでは、間違った 16 進数の色や、他の宣言をオーバーライドする略語が報告される場合があります。

ここではスタイルルールについては詳しく説明しません（ルールが多すぎるため）。ただし、エラーを維持および防止するために役立つルールをいくつか紹介します。

略語が他の宣言をオーバーライドすることを防ぐルール (または、stylelint 構文では、declaration-block-no-shorthand-property-overrides) により、次のような状況が防止されます。

div {    padding-left: 20px; /* 该属性被覆盖了 */    padding: 10px;} 

Stylelin Likewise 不正な 16 進色の使用を防ぎます。 (color-no-invalid-hex):

p {    color: #44;} 

重複するプロパティも禁止します (declaration-block-no-duplicate-properties):

p {    color: #000; /* 该属性是重复的 */    margin: 0 0 1.25em;    color: #777;} 

傾斜効果を実現するために古い構文を使用する可能性があります。 Stylelint は次のようにチェックします (function-linear-gradient-no-nonstandard-direction):

/* 不正确的属性 */.block {    background: linear-gradient(bottom, #fff, #000);} /* 正确的属性 */.block {    background: linear-gradient(to bottom, #fff, #000); 

このプロパティでキーワード ! important を使用すると、現在のプロパティを別のルールでオーバーライドする必要がある場合に問題が発生する可能性があります。 !重要なルールと宣言なしの重要なルールを一緒に使用することは避けてください。

セレクター ( #main ) での ID の使用とタイプ セレクター (つまり、HTML 要素に基づくセレクター - 例: .block p ) の使用は、開発方法論 (例: BEM) で無効になっている可能性があります。この場合、selector-no-id と selector-no-type が便利です。

場合によっては、スペルが間違っていたり、スタイルシートに何かを追加し忘れたりすることがあります。たとえば、アニメーション シーンでは、アニメーション オブジェクト名が @keyframes ルールに準拠していない場合、no-unknown-animations はエラーを報告します。

当我们有了 Autoprefixer 的时候你干嘛还让值、属性名和选择器的前缀来烦你？让 Autoprefixer 来解决这些，使用 value-no-vendor-prefix , property-no-vendor-prefix 和 selector-no-vendor-prefix 规则来防止前缀被添加。

当然，Stylelint 还有更多的规则。

插件

除了默认规则，stylelint 也支持插件，所以你还可以扩展使用新的规则。现在还没有太多可使用的插件，不过现有的这几个非常方便。

有时候，开发者会过度嵌套。因为所有的预处理器都支持嵌套，而嵌套太深导致的结果是增加选择器特异性而且会引起这些规则的维护问题。这里有一个典型的例子：

.header {    .nav {        .item {            .link {                color: blue;                 &:hover {                    color: red;                }            }        }    }} 

呈现结果如下：

.header .nav .item .link {    color: blue;}.header .nav .item .link:hover {    color: red;} 

Stylelint 针对这一问题并没有立即可用的规则，但有一个可以为嵌套深度添加规则的插件（ stylelint-statement-max-nesting-depth ）.

使用任何插件之前需要安装：

npminstallstylelint-statement-max-nesting-depth --save-dev 

然后，在 plugins 数列中添加插件到配置文件里。添加新的规则并进行配置：

{    "plugins": [        "stylelint-statement-max-nesting-depth"    ],    "rules": {        "statement-max-nesting-depth": 2    }} 

在以上的配置文件中，我们把嵌套深度设定成最大为 2。所以，我们会被提示将我们的早期示例简化成一个低嵌套的示例（在这个例子中，两级）：

.nav {    .link {        color: blue;         &:hover {            color: red;        }    }} 

或者我们可以进一步简化至一级嵌套：

.nav-link {    color: blue;     &:hover {        color: red;    }} 

我们在此不会对插件进行一一详述，但还是要推荐一二：

• 防止不合格的选择器 ，比如 ul.nav , div#mian 和 input[type="submit"]. （每个选项可以单独启用。）
• 尽可能执行 速记值
• 如果你遵照 BEM 或者 SUIT 方法论，那么你可能想检查你的选择器对它们的有效性。插件 stylelint-selector-bem-pattern 有为 BEM 和 SUIT 预先设定的模式，并且可以被配置为其他的方法学。

如果你想要一个新的规则， 你可以写自己的插件 。

配置文件

配置是使用 linter 过程中最困难的部分，而且也是最耗时的。但我们这里有捷径和不同的策略使stylelint 更加容易配置。

你的配置文件会变的越来越大，所以存储 stylelint 的配置文件最简单的方法是把它存储在一个单独的 JSON 文件中，命令为 .stylelintrc 。通过这种方式，这个文件可以在命令行界面使用，或者在一个构建工具或者代码编辑器中使用。

一个非常简单的配置文件可能是下面的样子：

{    "rules": {        "color-hex-case": "lower",        "color-hex-length": "short",        "color-no-invalid-hex": true    }} 

有三种配置 策略 。 首先 ，一种简单的方式，是扩展别人的配置文件（stylelint 可以支持的），然后添加、去除或者优化你想要改变的规则。开发者已经使配置文件基本符合大多数人的需求。你可以使用 npm 包来安装一个：

npminstallstylelint-congif-standard --save-dev 

然后，在你自己的配置文件中，你可以根据需要扩展或者覆盖他们的规则：

{    "extends": "stylelint-config-standard",    "rules": {        "indentation": "tab",        "number-leading-zero": null    }} 

在这个例子中，我们已经扩展了 stylelint-config-standard ，并且改变了 indentation 的规则使它的功能变为“制表符”，并且去除了 number-leading-zero 规则。

第二种 策略 是以空白文件开始，然后添加你需要的规则缓慢进行配置。比如，你目前也许根本不关心编码样式而只想专注于规避错误：

{    "rules": {        "color-no-invalid-hex": true,        "declaration-block-no-duplicate-properties": true,        "declaration-block-no-shorthand-property-overrides": true,        "function-linear-gradient-no-nonstandard-direction": true    }} 

以后，你还可以添加更多的规则。

第三种 策略 是检查所有的策略并且一个一个添加。我更喜欢这种方式因为我想尽可能多的检查并且使用 stylelint 的全部功能。当然，这也是最耗时的策略，但它的效果是最好的。为了更容易操作，stylelint 开发者创建了一个包含所有规则的 空白样板文件 。

每一个启用的规则都有一个错误严重程度。这意味着任何不满足此项的规则都无法通过测试。对任何规则，严重级别都可 被降低 至警告，这将防止无法通过测试。如果你设定了一个规则并且不想构筑失效，这就会很有用，比如团队适应新的规则的时候。

{    "rules": {        "color-hex-case": ["lower", { "severity": "warning" }]    }} 

在这个例子里，如果十六进制颜色写错了，stylelint 会警告，不过不会报错。

有时候我们需要把一些东西添加进样式表，但 stylelint 配置文件不允许。比如，我们不被允许使用关键字 important ，但我们也许需要在一个地方用它来重置一些第三方小插件。我们不想因为这一个特殊情况就把这个规则作废。但我们也不想每次都看到这个错误。辛运的是，我们可以在一行 CSS 中添加注释来禁用某一规则：

.widget {  display: none !important; /* stylelint-disable-line declaration-no-important */} 

或者我们可以在一块 CSS 中禁用 stylelint。

/* stylelint-disable */.third-party-code {}/* stylelint-enable */ 

用法

Stylelint 可以通过很多方式使用：在命令行中、在构建工具中（比如 Gulp, Grunt 或 Webpack），在代码编辑器中或者 Git 库中的 Git 提交分级变化。我在这里主要讲两种方式：

命令行

当你想要 lint 一个没有 stylelint 的项目或者在 npm 脚本使用 stylelint 时，使用命名行非常方便。

安装全局 stylelint:

npminstallstylelint -g  

之后，在你的终端任意位置都可使用：

stylelint "styles/**/*.css" 

这个命令会初始化 style 目录以及任意子目录里的所有 CSS 文件。

为了初始化 SCSS 或者 SugarSS 文件，添加 syntax 选项：

stylelint "styles/*.scss" --syntaxscss 

这个配置可以被明确指定：

stylelint "styles/*.css" --configbar/myStylelintConfig.json 

如果没有明确指定，stlelint 会在当前工作目录查找一个 .stylelintrc 文件。

GULP

结合 GULP 使用 stylelint ，可把它当做 PostCSS 插件使用。你需要安装以下包：

npminstallgulp-postcssstylelintpostcss-reporter --save-dev 

gulp-postcess 是所有 PostCSS 的分流道， postcss-reporter 从 stylelint 输出较好的错误和警告。

var postcss = require('gulp-postcss');var reporter = require('postcss-reporter');var stylelint = require('stylelint'); gulp.task('lint:css', function() {    return gulp.src('src/**/*.css')        .pipe(postcss([            stylelint({ /* options */ }),            reporter({ clearMessages: true })        ]));}); 

输出结果就像这样：

初始化除 CSS 以外的样式表，你需要安装适当的语法。比方说，初始化 SCSS，我们需要安装 postcss-scss ：

npminstallpostcss-scss --savedev 

然后，配置 gulp-postcss 来使用这个语法：

var postcss = require('gulp-postcss');var reporter = require('postcss-reporter');var stylelint = require('stylelint');var scss = require("postcss-scss"); gulp.task('lint:css', function() {    return gulp.src('src/**/*.scss')        .pipe(postcss(            [                stylelint({ /* options */ }),                reporter({ clearMessages: true })            ],            {                syntax: scss            }        ));}); 

你可以明确指定配置文件，不然，stylelint 会查找 .stylelintrc 文件。

结论

Stylelint 是一款出色的样式表 linter。它带来清晰的代码并且防止你出错。它对每一个人都很实用：个人开发者、团队和开源维护者。一旦你开始使用，你将不会再听到诸如“你忘记在这里加空格”或者“你忘记移除这里”之类的评论。快乐开发，希望你有个舒适的代码预览。