以前、VueファイルのStylusをstylelintしたかった話 という記事を書きましたが、その続きです。
stylelintはCSSだけでなくSCSSやSassやLessもサポートしており、Vueファイルの<style>タグ内部のスタイルシートも検証できるリンターですが、残念ながらStylusはサポートしていません。
以前の記事でstylelintがStylusでも動くようにパーサー（PostCSSプラグイン）を作りました。
その後、少しづつ、Stylus用のルールを作ったり、stylelint周辺ツールのStylusをサポートを進めたりしながら、stylelintのプラグインを作ってみたのでその紹介です。
stylelintプラグイン stylelint-plugin-stylus
stylelint-plugin-stylusというstylelintでStylusをサポートするためのプラグインを作っています。
このプラグインは下記の特徴を持ちます。
- stylelintでStylusをサポートさせ、stylelintの多くの検証ルールをStylusで利用できるようにします。
- stylelint-plugin-stylusが提供する独自の検証ルールを使用してStylusの潜在的な問題、コードスタイル違反を見つけることができます。
- stylelintの自動修正を使用して、自動的に問題を修正したり、コードスタイルを統一させることができます。
DEMO
ブラウザ上でどう動くか確認できます。
使用方法
※stylelintを導入していない方は、まずstylelintを導入してください。
以降の説明はstylelintを導入している前提で進めます。
インストール
stylelint-plugin-stylusをインストールしてください。
npm install --save-dev stylelint-plugin-stylus
カスタムシンタックスの設定
stylelintは標準ではStylusを正しく解析しないので、Custom SyntaxというOptionを使ってStylusを解析できるようにします。
- CLIの場合
--custom-syntaxオプションでstylelint-plugin-stylus/custom-syntaxを指定します。
stylelint ... --custom-syntax stylelint-plugin-stylus/custom-syntax
- VSCodeの場合
stylelint公式のVSCode拡張を利用する場合の設定です。
.vscode/settings.jsonに下記のように追記します。
"stylelint.customSyntax"オプションに"stylelint-plugin-stylus/custom-syntax"を指定します。
{
"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
}
ついでに "stylelint.validate" オプションで"stylus"を追加して、stylelintのVSCode拡張で.stylや.stylusを解析するように設定してください。
{
"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
"stylelint.validate": [
...,
// ↓ Add "stylus" language.
"stylus"
]
}
これらの設定で、内部的には以前の記事で紹介したpostcss-stylを利用してStylusのソースファイルをパース（および文字列化）するようになります。
stylelintの設定
stylelintの設定ファイル.stylelintrc.*やstylelint.config.jsに設定します。
そもそもの設定の詳細は次のリンクを参照してください: https://stylelint.io/user-guide/configure.
この設定を使用して、stylelint-plugin-stylusが提供する検証ルールを使用したり、Stylusで使えないルールをOFFにしたりします。
- 共有設定を利用
stylelint-plugin-stylusは共有設定を提供しているので、これを使用する場合は次のように設定します。
module.exports = {
extends: [
// "stylelint-config-standard", などすでに設定している設定
// ↓共有設定を追加
"stylelint-plugin-stylus/standard",
// ↓または次の共有設定を追加
// "stylelint-plugin-stylus/recommended",
],
}
提供する共有設定は次の２つです。
-
"stylelint-plugin-stylus/recommended"... stylelint-config-recommendedと対になるように設計しているルールセットです。 stylelint-plugin-stylusが提供する潜在的な問題を検証するルールを有効にし、Stylusで利用することができない（ことが確認できている）stylelintの標準ルールをOFFにします。 -
"stylelint-plugin-stylus/standard"... stylelint-config-standardと対になるように設計しているルールセットです。"stylelint-plugin-stylus/recommended"の設定に追加して、stylelint-plugin-stylusが提供するコードスタイルを検証するルールを有効にします。
- 共有設定を利用しない
共有設定を利用しない場合はpluginsへの追加と個別のルール設定が必要です。
module.exports = {
plugins: [
// ↓プラグインを追加
"stylelint-plugin-stylus"
],
rules: {
// ↓各ルール設定を追加
"stylus/declaration-colon": "never",
"stylus/pythonic": "always",
"stylus/selector-list-comma": "never",
"stylus/semicolon": "never",
"stylus/single-line-comment": "always",
}
}
stylelint-plugin-stylusの提供する検証ルール
Stylus用に作成した検証ルールの紹介です。
全量はドキュメントを参照してください。
※ここで紹介するのはstylelint-plugin-stylusの提供する検証ルールだけです。
stylelint組み込みのルールや、他のstylelint pluginのルールも使用できます。
stylus/single-line-comment-no-empty
シングルラインコメント（//形式のコメント）の内容が空のコメントを報告します。
stylelint標準ルールにもcomment-no-emptyというルールがありますが、このルールは見事に//形式のコメントを検証してくれないので//形式のコメントはこのルールで検証します。
// ✓ GOOD
// single line comment
// ✗ BAD
//
stylus/at-extend-style
@extend機能の@extendか@extendsかのスタイル違反を報告します。
"stylus/at-extend-style": ["@extend"] と設定すると@extendsを使っている箇所を報告します。また自動修正オプションを利用して自動的に@extendsを@extendに置き換えます。
a
// ✓ GOOD
@extend .foo
// ✗ BAD
@extends .foo
stylus/declaration-colon
宣言部でコロンを必ず使用するか必ず省略するかのスタイル違反を報告します。
"stylus/declaration-colon": ["never"] と設定すると宣言部でコロンを使っている箇所を報告します。また自動修正オプションを利用して自動的に不要なコロンを削除します。
a
// ✓ GOOD
color red
// ✗ BAD
color: red
stylus/hash-object-property-comma
ハッシュオブジェクトの定義でカンマを必ず使用するか必ず省略するかのスタイル違反を報告します。
"stylus/hash-object-property-comma": ["always"] と設定すると、ハッシュオブジェクトの定義でカンマをつけていない箇所を報告します。また自動修正オプションを利用して自動的にカンマを追加します。
foo = {
// ✓ GOOD
a: 1,
b: 2,
// ✗ BAD
c: 3
d: 4
}
stylus/pythonic
中括弧を必ず使用するか必ず省略する（インデントベース構文を利用する）かのスタイル違反を報告します。
"stylus/pythonic": ["always"] と設定すると中括弧を使っている箇所を報告します。また自動修正オプションを利用して自動的に中括弧を削除し、インデントベース構文に修正します。
// ✓ GOOD
.foo
color: red;
// ✗ BAD
.foo {
color: red;
}
stylus/selector-list-comma
CSSセレクターの区切りにカンマを必ず使用するか必ず省略する（インデントベース構文を利用する）かのスタイル違反を報告します。
"stylus/selector-list-comma": ["never"] と設定するとカンマを使っている箇所を報告します。また自動修正オプションを利用して自動的にカンマを削除し、インデントベース構文に修正します。
// ✓ GOOD
.foo
.bar
color red
// ✗ BAD
.foo,
.bar
color red
.foo, .bar
color red
stylus/semicolon
セミコロンを必ず使用するか必ず省略するかのスタイル違反を報告します。
"stylus/semicolon": ["never"] と設定するとセミコロンを使っている箇所を報告します。また自動修正オプションを利用して自動的にセミコロンを削除します。
a
// ✓ GOOD
color red
// ✗ BAD
color red;
stylus/single-line-comment-double-slash-space-after
シングルラインコメントの//後の空白スタイル違反を報告します。
"stylus/single-line-comment-double-slash-space-after": ["always"] と設定すると//後に空白が無い箇所を報告します。また自動修正オプションを利用して自動的に空白を挿入します。
// ✓ GOOD
// OK
//✗ BAD
//NG
stylus/single-line-comment
シングルラインコメントが使用できる箇所で必ずシングルラインコメントの使用するか必ずマルチラインコメントを使用するかのスタイル違反を報告します。
"stylus/single-line-comment": ["always"] と設定するとシングルラインコメントが使用できる箇所でマルチラインコメントを使用している箇所を報告します。また自動修正オプションを利用して自動的にシングルラインコメントに修正します。
// ✓ GOOD
// マルチラインコメント
.foo { // マルチラインコメント
}
.bar {
/* 行末コメントでは無い場合 */ }
/*
* 複数行
* コメント
*/
/*! bufferedスタイル */
/* ✗ BAD */
/* マルチラインコメントだがシングルラインコメントが使用できる */
/*
マルチラインコメントだが内容は１行なのでシングルラインコメントが使用できる
*/
.foo { /* マルチラインコメントだがシングルラインコメントが使用できる */
}
stylelint標準ルールのラッパールール
stylus/indentationや、stylus/no-eol-whitespaceや、stylus/block-closing-brace-empty-line-beforeなど、stylelint本体で持っているルールでStylusではうまく動かないルールの、Stylusでも動くように改良したルールが多数あります。
他のツールと比較（してません）
まだ他のツールとの比較はしてません。そのうち気が向いたら比較するかもしれません。
Stylusのリンターの有名どころだとstylintですかね。
Stylus本家にstlintなんてのもあるようですがこれは流行っているのでしょうか？
フォーマッターの有名どころだとStylus Supremacyですかね。
ドキュメントを眺める限り、.vueファイルの<style lang="stylus"> まで検証・フォーマットできるのはこのstylelintとstylelint-plugin-stylusの組み合わせだけですか？さあ？どうなのでしょうか？