stylelintによるCSSリンティング

CSS-Tricksに関するDavid Clarkのゲスト投稿の翻訳。



Davidは、CSSをクリーンアップするツールであるStylelintの作成者の1人です。 彼は、CSSが必要な理由について優れた紹介を書きました。









CSSを書いています。 おそらくたくさん。 そして、あなたは間違いを犯します。 おそらくたくさん。 世界には、CSSエラーから私たちを救う新しいヒーローが必要です！



時々、間違いは深刻な結果を招くことがあります。 そして時々、これは不注意に書かれているか、過度に混乱するコードです。 タイプミスのいくつかは、最初は取るに足らないように見えます（もちろん、それはあなたの気質に依存します）が、プロジェクトが大きくなるほど、より深刻になります。 ひどく書かれたコードをめちゃくちゃに使う人が増えており、これが奇妙なことを書いています。 その結果、悪夢の中で想像することさえできないほどです。



はい、あなたは自分の世話をしようとします。 同僚があなたをサポートし、欠陥を指摘します。 しかし、私たちはすべて人間なので、あなたとあなたの同僚はいつか間違いを見逃すでしょう。 そして、将来、CSSに現れるこれらのエラーの結果に遭遇するでしょう。



事実、誰も、あなたもあなたの同僚もあなたの間違いについて話すことを好まないことを認めてください。 これはなんとなくばかげています。 また、いくつかの合意（たとえば、単一のコードフォーマットに関する）は間違いなくこのケースに役立ちますが、手動での修正に関しては、それらはすべて細かすぎるように見えます。 さらに、些細なことを修正することに関しては、同僚の最高の資質を示さない場合があります。



さらに、何らかのアナウンスメントを複製したか、インデントを消去する必要があることを示すコードレビューを期待するよりも、作業をすぐに修正する方がはるかに優れています。 すぐに反応することで、コードの記述規則をすばやく学習し、CSSが機能しない理由について考える時間を短縮できます。

エラー認識メカニズムが必要です。

CSSを理解し、私たちを理解する信頼性の高いエラー認識メカニズム、つまり意図、好み、理想、弱点が必要です。



もちろん、このようなすべてのものと同様に、このようなメカニズムには独自の制限があります。 しかし、これらの制限は、あなたや同僚と直面する制限とは異なります。 彼はできる限りのすべてのエラーを防ぎ、彼は一貫して疲れ知らずにそれをします。 それまでの間、メカニズム自体の改善、機能の強化、制限の緩和に集中できます。 そのようなプロジェクトが開かれている場合、世界中のCSS開発者は、自分の間違いに関する情報を共有することで貢献できます。

CSS開発者には、他の皆と同じようにリンターが必要です

エラーを防ぐプログラムは「リンター」と呼ばれます。 Javascript用の良いリンターが既にいくつかあります。 特に、 ESLintは驚くべき機能を果たしており、 リンターの素晴らしさを示しています。 しかし、CSSの世界では、すべてが悪かったのです。Rubyで作成されたscss-lintプリプロセッサーと古いCSS Lintのようないくつかのオプションによって制限されていました 。



しかし、これはすべてPostCSSの出現前でした 。 PostCSSは、とりわけ、相互に互換性のあるCSSツールの作成に役立ちます。 CSSに似た構文を抽象構文ツリー（AST、抽象構文ツリー- およそTranslator ）に解析し、後でプラグインが機能するようにします。 PostCSSは、特殊なパーサーを使用して、非標準の技術的に「無効な」テンプレート（たとえば、 //



を介したコメント）を処理することもできます。



このように、PostCSSに基づいており、scss-lintとESLintの最良の側面を取り入れた、新しい強力なCSSリンターの基盤が熟しています。



このプロジェクトでは、数人の同僚と協力しましたが、ここで、私たちが作成したもの、 stylelintを紹介します。

stylelintでできること

以下に書かれているのは、stylelintの可能性を要約する試みです。 100を超えるルールと拡張の大きな機会が含まれています。



既に焦りを感じている場合（「いい、いい、stylelintは信じられないほど信じている。モルタルで水をつぶす必要はない！」）、このセクションは飛ばしてください。 以下では、よくある質問に答え、いくつかのヒントを示します。

1.間違いを見つける

いくつかのStylelintルールは、明らかなエラーを検出するために使用されます。タイプミスまたは急いでいるときや不注意なときに行われた説明です。 たとえば、コード内の空のブロック、不正な16進値、重複したセレクター、宣言されていないアニメーション、線形グラデーションの不正な構文を禁止できます。



他のルールは、より複雑なエラーをキャッチするように設計されています。 たとえば、拡張オプション（たとえばmargin-top



）の1つと重なるプロパティ（たとえばmargin



）に省略形を使用すると起動するルールがありますが、これはほとんど必要ありません。 また、このような状況で機能するルールもあります。ルールAのセレクタがより具体的であるため、ルールAがルールBの前にあるが、ルールBを書き換えると想像してください（たとえば、ルールAは.foo.bar {...}



、および.foo {...}



ルールB .foo {...}



）。 これはクフムクラではありません。



別のルールでは、 doiuse PostCSSプラグインを使用して、スタイルがサポートするすべてのブラウザーで機能するかどうかを確認します。 別のルールは、 css-colorguardを使用してプロジェクトで使用される色を比較し、いくつかの類似した色の代わりに単一の色を使用するかどうかを尋ねます。 （stylelintがPostCSSの主な利点の1つを使用していることにすでに気付いていますか？他のPostCSSプラグインの結果を使用するルールを作成するのは非常に簡単です）。

2.ベストプラクティスを課す

スタイルを操作するときに特定の方法論に従うか、特定のコードスタイルを使用する場合、一部のコード構成を受け入れないことが可能です。 Stylelintはそのような機能を提供します。



さらに、セレクターを制御する必要があります。 容赦なく。 stylelintを使用すると、特定の特異性を超えるセレクターを無効にしたり、セレクターの深い入れ子に終止符を打つことができます。 特定のカテゴリのセレクター（idなど）の使用を禁止し、正規表現を作成して、セレクターが命名規則に従っていることを確認できます。



サポートするブラウザに関係のない!important



またはブラウザハッキングの使用を防ぐことができます。 AutoPrefixerを使用する場合（おそらくこれを行う必要があります）、ソースファイルでブラウザープレフィックスを使用しないようにすることができます。



より深刻なものが必要な場合は、設定に時間をかけ、ルールのプロパティの順序を設定し、ルール、値、関数、および測定単位のブラックリストとホワイトリストを作成できます。

3.コードの記述スタイルを課すため

stylelintには、コードのスタイルに自動的に規則を課す一連のルールがあります。そのため、あなたも同僚もこれを行うべきではありません。 私たちは、これらのルールを可能な限り完全かつ信じられないほど柔軟にするようにしました。



これらのルールのほとんどはインデントされています。 ただし、引用符の種類を確認したり、大文字と小文字を設定したり、小数値にゼロを代入したり、省略/完全なルールを使用したりするものがあります。



アイデアは、あなたとあなたの同僚が一度コードスタイルに同意し（たとえば、「ルール宣言のコロンの後に常にスペースを入れましょう」）、これをstylelint構成に入れて、これをもう思い出さないようにすることです。 車があなたのために苦しんでみましょう！

4.何でもカスタマイズして拡張

ESLint（およびCSS Lint）の作成者であるNicholas Zakasは、ESLintの成功の秘theはその拡張性にあると書いています。 StylelintはESLintのリードに従い、可能な限り拡張できるよう努めています。



独自のルールをプラグインとして記述および公開できます。 一定の量はすでに利用可能であり、私たちはコミュニティが他に何を思い付くかを知りたいと思っています。



設定は拡張できるため、共有できます。 プラグインのように、ESLintから取得しました。 ここでは、すでに公開されている構成、およびとりわけWordPressとSUITCSSの構成を確認できます。



stylelintに組み込まれている出力ツールが気に入らない場合は、独自のツールを作成し、組織に合わせて調整することもできます。 ルールによって表示されるアラートを構成することもできます。



stylelint APIを使用して、ワークフローのすべてのステップにstylelintを埋め込むテキストエディターおよびタスクマネージャー用のプラグインを作成できます。



また、stylelintを他にどのように使用できるかが気になる場合は、お知らせください！

よくある質問と回答

あなたの意識の腸のどこかに、疑問がすでに現れているに違いありません。 以下は、私たちが通常尋ねられる最も頻繁なものに対する答えです。

stylelintをSCSS以下で使用できますか？

はい、SCSSでstylelintを使用できます！ そして最近、Lessが登場しました。 PostCSSでは特別なパーサーを使用できるため、stylelintには非標準の構文に関する問題はありません。PostCSSパーサーを作成できるものはすべて、stylelintで実行できます。



現在、次のPostCSSパーサーがあり、したがって、stylelintサポート-SCSS、 Less 、新しいSugarSSがあります。 別の特別な構文をサポートしたい場合は、PostCSSパーサーの作成を手伝ってください！



Stylelintは、考えられるすべてのスペルをカバーしようとします。標準CSS構文を使用する人、SCSSなどの拡張機能を使用する人、奇妙な特別なプロパティを使用する人がいます。 もちろん、非標準の構文（たとえば、Sassの#{$interpolation}



やセレクターのidに関する規則）を使用すると、一部の規則が破られる場合があります。 もちろん、このようなエラーが見つかった場合は、それらに対処します。 しかし、それでも、あなたはあなた自身でルールを完全に、そしてファイルごとに、そして行ごとにオフにすることができます。

stylelintを将来のCSS構文で使用できますか？

はい！ 上記の回答のように、stylelintは、PostCSSが理解するすべてを解析できます。これには、将来のCSS構文（PostCSSプラグインで使用する可能性が最も高い）も含まれます。 正直なところ、stylelintルールの一部は、 range



やcustom properties



など、将来のCSSに焦点を当てていcustom properties



。

stylelintの構成は巨大になる可能性があります。 始めるのに最適な場所は何ですか？

次の3つの方法のいずれかで構成を作成することをお勧めします。

• すでに公開されている構成を取得して展開できます。 ほとんどのユーザーに適した基盤として、 stylelint-config-standardを作成および管理しています。 また、他にも多くの構成を見つけることができます。
• 最初から始めて、一度に1つのルールを追加します。 最初は、すべてのルールがオフになっているため、ルールを1つずつ追加することで、各ルールの機能を正確に把握できます。 各ルールを理解し、それらを構成できるようになります。
• 開始構成をコピーし、使用するオプションと削除するルールを決定します。

幸いなことに、巨大なstylelint構成を何度も書く必要はありません。 すべての要件を満たすものを作成し、どこでも使用します。

stylelintを使用する最も簡単な方法は何ですか？

stylelintを使用する最も簡単な方法は、 CLIを使用することです。



gulpプラグインを使用する場合は、 gulp-stylelintがあります。 webpackのオプションもあります 。 Gruntのプラグインが最近登場しました。 他のタスクマネージャー用のプラグインを開発するように人々を刺激することを願っています。



スタイルリントをプラグインチェーンに含めるPostCSSプラグインとして使用することもできます。 言い換えれば、 PostCSSを実行できる場所ならどこでも 、つまりほとんどすべてのビルドツールでstylelintを使用できます。



さらに、Atom、Sublime Text、およびVS Codeテキストエディター用のプラグインが既に存在し、コードへの応答が速くなります。 これらはすべて、 補完ツールページでコンパイルされます。



コマンドラインでは次のように表示されます。









そして、これはAtomでどのように見えるかです：

stylelintは私の間違いを修正しますか？

いいえ、しかし、このためにstylefmtと呼ばれる別のプロジェクトがあります。 それはstylelintの設定（あなたとまったく同じ）を取り、修正可能なものをすべて修正します。 コミュニティの助けを借りて、stylefmtが大きく成長して、自動的に修正できるすべての違反を修正できることを願っています。 彼がこれを達成するのを助けてください！



さらに、 CSScombやperfectionist （またはpostcss-sorting 、 およそTranslator ）など、 stylelintとともに他のツールを使用して、一方を自動的に修正して他方を表示することができます。

リンティングで自分を鍛える

信じられないほどのCSSスペルルールがあります。 悪いCSSを書くのは非常に簡単だということは誰もが知っているので、方法論（SMACSS、ACSS、BEM、SUITCSSなど）について話すのに多くの時間を費やしているのです。 戦略を選択し、それに固執する必要があります。 もちろん、1週間でしわになるコードを書きたい場合を除きます。



stylelintの野心的な目標は、コードを記述するためのルールを自動化することです。 これにより、CSS開発者が独自のプラクティスを改善するために実装できるルールとインフラストラクチャのフレームワークが作成されます。



stylelintを試して、あなたの経験を教えてください。 あなたはそれを改善するためのアイデアを持っている場合-先に行く！ ルール、拡張機能、テスト、バグ修正、ドキュメント、新しいアイデア、または単なるフィードバックでコードを補完します。 あらゆるレベルの開発者のために常に仕事をしています。