Help us understand the problem. What is going on with this article?

CSSのLintをstylelintにする

More than 3 years have passed since last update.

JavaScriptのLintは、ESLintで設定が柔軟に出来て良かったんで、ESLintでやっているけれども、CSSの方でも同じようなLintツール無いのかなと思っていたら、stylelintが近い感じだった。

Install

$ npm i stylelint --save-dev

or 

$ npm i -g stylelint

v1系だとPostCSSのプラグインとして使う以外なかったけれども、数時間前にv2.0.0がリリースされて、CLIで使えるようになってた。

Usage

v1系だと、設定はrequire('stylelint')()の引数に渡す形で、ESLintの.eslintrcみたいに設定ファイルを自動で読み込むようにはなってなかったけど、v2.0.0から.stylelintrcがあればその設定を読み込むようになった。

CLI

CLIだと、

$ stylelint path/to/target.css [options]

の形。

使用できるオプションは、

$ stylelint --help

で見られる。

    --config            設定ファイルのJSONへのパス
    --version           インストールしてあるstylelintのバージョン
    --custom-formatter  出力するフォーマットをカスタムするJSファイルへのパス
    -f, --formatter     出力するフォーマットを`json``string`か指定
    -q, --quiet         警告は出力しない(エラーのみ出力)
    -s, --syntax        標準ではないシンタックスを指定

PostCSS

PostCSSのプラグインで使う場合、stylelintだけだとレポートが出力されないので、postcss-reporterを使う。

var gulp = require('gulp'),
  postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp
    .src('./src/css/*.css')
    .pipe(postcss([
      require('stylelint')(),
      require('postcss-reporter')()
    ]))
    .pipe(gulp.dest('./dist/css'));
});

オプションは、以下3つ。
- config: 設定オブジェクト。configがない場合、.stylelintrcを探すようになっている。
- configBasedir: extendspluginsの設定に記述されるファイルのディレクトリパス。
- configOverrides: .stylelintrcを読み込んだ上で、その設定を上書きして使う設定がある場合にこのオプションに記述する。

設定オブジェクト

設定オブジェクトには rules、extends、pluginsの3つがあって、それぞれESLintのそれと同じ意味合いのもの。

rules

各ルールは、デフォルトが無効の状態、かつオプション値も設定されてない。
なので、自分で有効にして、必要に応じてオプションを設定しない限りは警告もエラーも出ない。

ESLintと同じく、各ルールの有効無効は、0から2の数値で設定する。

設定
0 無効
1 警告
2 エラー

v1.2.1 でのルールは以下。 (※ v2.0.0でルールの追加、オプション値の追加がされているので、最新のルールとは微妙に違う)

カテゴリ ルール 内容 オプション
String string-quotes クォーテーションをシングルかダブルか統一 string : "single" | "double"
Color color-hex-case 16進数のカラーコードを大文字か小文字で統一する string : "upper" | "lower"
color-hex-length 16進数のカラーコードを省略するか否か string : "short" | "long"
color-no-invalid-hex 無効なカラーコードを許可しない
Number number-leading-zero 1以下の少数の値で、小数点の前に0を入れるか入れないかを統一 string : "always" | "never"
number-max-precision 小数点以下の桁数を制御 int
number-no-trailing-zeros 不要な0を許可しない
number-zero-length-no-unit 値が0の場合に単位をつけない
Function function-calc-no-unspaced-operator 関数calcの中でスペースなしの式を許可しない
function-comma-space-after 関数の中でカンマの直後にスペースを空けることを許可するか否か string : "always" | "never"
function-comma-space-before 関数の中でカンマの直前にスペースを空けることを許可するか否か string : "always" | "never"
function-linear-gradient-no-nonstandard-direction linear-gradientの仕様に沿ってない方角の値を許可しない
function-parentheses-space-inside 関数の()の内側にスペースを許可しないか否か string : "always" | "never"
function-space-after 関数の直後にスペースを許可しないか否か string : "always" | "never"
function-url-quotes urlをダブル or シングルクォーテーションで囲うか、クォーテーションで囲わないか string : "single" | "double" | "none"
Value value-no-vendor-prefix ベンダープレフィックスを許可しない
Value list value-list-comma-newline-after リストの値で、カンマの直後にスペースを許可しないか、改行を必須にするか string : "always" | "always-multi-line" | "never-multi-line"
value-list-comma-newline-before リストの値で、カンマの直前にスペースを許可しないか、改行を必須にするか string : "always" | "always-multi-line" | "never-multi-line"
value-list-comma-space-after リストの値で、カンマの直後にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line"
value-list-comma-space-before リストの値で、カンマの直前にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line"
Property property-blacklist 許可しないプロパティをリストで指定 array
property-no-vendor-prefix 不要なベンダープレフィックスのプロパティを許可しない
property-whitelist 許可するプロパティをリストで指定 array
Custom property custom-property-no-outside-root :rootセレクタ以外でのカスタムプロパティを許可しない
custom-property-pattern カスタムプロパティのパターンを指定 regex or string
Declaration declaration-bang-space-after エクスクラメーションマークの直後にスペースを入れることを許可するか否か string : "always" | "never"
declaration-bang-space-before エクスクラメーションマークの直前にスペースを入れることを許可するか否か string : "always" | "never"
declaration-colon-newline-after コロンの直後に改行を必須にするかスペースを許可しないか string : "always" | "always-multi-line"
declaration-colon-space-after コロンの直後にスペースを入れることを許可するか否か string : "always" | "never" | "always-single-line"
declaration-colon-space-before コロンの直前にスペースを入れることを許可するか否か string : "always" | "never"
declaration-no-important !importantの使用を許可しない
Declaration block declaration-block-semicolon-newline-after セミコロンの直後にスペースを許可しないか改行を必須にするか string : "always" | "always-multi-line" | "never-multi-line"
declaration-block-semicolon-newline-before セミコロンの直前にスペースを許可しないか改行を必須にするか string : "always" | "always-multi-line" | "never-multi-line"
declaration-block-semicolon-space-after セミコロンの直後にスペースを入れることを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line"
declaration-block-semicolon-space-before セミコロンの直前にスペースを入れることを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line"
Nesting Block nesting-block-opening-brace-newline-before ネストしたブロックの開き括弧の直前に改行を必須にするかスペースを許可しないか string : "always" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
nesting-block-opening-brace-space-before ネストしたブロックの開き括弧の直前にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
Block block-closing-brace-newline-after ブロックの閉じ括弧の直後に改行を必須にするかスペースを許可しないか string : "always" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
block-closing-brace-newline-before ブロックの閉じ括弧の直前に改行を必須にするかスペースを許可しないか string : "always" | "always-multi-line" | "never-multi-line"
block-closing-brace-space-after ブロックの閉じ括弧の直後にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
block-closing-brace-space-before ブロックの閉じ括弧の直前にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
block-no-empty 空のブロックを許可しない
block-opening-brace-newline-after ブロックの開き括弧の直後に改行を必須にするか string : "always" | "always-multi-line" | "never-multi-line"
block-opening-brace-newline-before ブロックの開き括弧の直前に改行を必須にするかスペースを許可しないか string : "always" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
block-opening-brace-space-after ブロックの開き括弧の直後に改行を必須にするかスペースを許可しないか string : "always" | "never" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
block-opening-brace-space-before ブロックの開き括弧の直前にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line" | "always-multi-line" | "never-multi-line"
Selector selector-combinator-space-after セレクタの組み合わせの直後にスペースを許可するか否か string : "always" | "never"
selector-combinator-space-before セレクタの組み合わせの直前にスペースを許可するか否か string : "always" | "never"
selector-no-attribute 属性セレクタを許可しない
selector-no-combinator セレクタの組み合わせを許可しない
selector-no-id idセレクタを許可しない
selector-no-type 要素型セレクタを許可しない
selector-no-universal ユニバーサルセレクタを許可しない
selector-no-vendor-prefix ベンダープレフィックスつきのセレクタを許可しない
selector-pseudo-element-colon-notation 疑似要素のコロンを1つにするか2つにするか string : "single" | "double"
selector-root-no-composition :root を他のセレクタと合わせて記述することを許可しない
Selector list selector-list-comma-newline-after セレクタのリストで、カンマの直後に改行を必須にするかスペースを許可しないか string : "always" | "always-multi-line" | "never-multi-line"
selector-list-comma-newline-before セレクタのリストで、カンマの直前に改行を必須にするかスペースを許可しないか string : "always" | "always-multi-line" | "never-multi-line"
selector-list-comma-space-after セレクタのリストで、カンマの直後にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line"
selector-list-comma-space-before セレクタのリストで、カンマの直前にスペースを許可するか否か string : "always" | "never" | "always-single-line" | "never-single-line"
Rule rule-nested-empty-line-before ネストしたルールの直前に空白行を必須にするか許可しないか string : "always" | "never" | "always-multi-line" | "never-multi-line"
rule-no-duplicate-properties ルールの中でプロパティの重複を許可しない
rule-no-shorthand-property-overrides ショートハンドプロパティで上書きすることを許可しない
rule-no-single-line 単一行でルールを記述することを許可しない
rule-non-nested-empty-line-before ネストしてないルールの直前に空白行を必須にするか許可しないか string : "always" | "never" | "always-multi-line" | "never-multi-line"
rule-properties-order ルールの中でのプロパティの順序を指定 string or array : "alphabetical" | array
rule-trailing-semicolon 省略可能なセミコロンを必須にするか許可しないか string : "always" | "never"
Root root-no-standard-properties 標準のプロパティを:rootの中で許可しない
Media feature media-feature-colon-space-after メディアフィーチャーの中で、コロンの直後にスペースを必須にするか許可しないか string : "always" | "never"
media-feature-colon-space-before メディアフィーチャーの中で、コロンの直前にスペースを必須にするか許可しないか string : "always" | "never"
media-feature-name-no-vendor-prefix メディアフィーチャーの名前にベンダープレフィックスを許可しない
media-feature-range-operator-space-after メディアフィーチャーの中で、範囲演算子の直後にスペースを必須にするか許可しないか string : "always" | "never"
media-feature-range-operator-space-before メディアフィーチャーの中で、範囲演算子の直前にスペースを必須にするか許可しないか string : "always" | "never"
Custom media custom-media-pattern カスタムメディアクエリの命名パターンを指定 regex or string
Media query media-query-parentheses-space-inside メディアクエリの括弧の内側にスペースを必須にするか許可しないか string : "always" | "never"
Media query list media-query-list-comma-newline-after メディアクエリのリストで、カンマの直後に改行を必須にするかスペースを許可しないか string : "always" | "always-multi-line" | "never-multi-line"
media-query-list-comma-newline-before メディアクエリのリストで、カンマの直前に改行を必須にするか、スペースを許可しないか string : "always" | "always-multi-line" | "never-multi-line"
media-query-list-comma-space-after メディアクエリのリストで、カンマの直後にスペースを必須にするか否か string : "always" | "never" | "always-single-line" | "never-single-line"
media-query-list-comma-space-before メディアクエリのリストで、カンマの直前にスペースを必須にするか否か string : "always" | "never" | "always-single-line" | "never-single-line"
At rule at-rule-empty-line-before @ルールの前に1行空けることを必須にするか否か string : "always" | "never"
at-rule-no-vendor-prefix @ルールにベンダープレフィックスを許可しない
Comment comment-empty-line-before コメントの前に1行空けることを必須にするか否か string : "always" | "never"
comment-space-inside コメントマークの内側にスペースを必須にするか許可しないか string : "always" | "never"
General / Sheet indentation インデントを指定 init or string : "tab"
no-eol-whitespace 行末のスペースを許可しない
no-missing-eof-newline ファイルの最終行に空白行を必須にする
no-multiple-empty-lines 連続した空白行を許可しない

extends

ESLintと同様に、extendsで設定を読み込んで、その設定を拡張して使うことができる。

plugins

ユーザが独自のルールを追加する場合、pluginsで設定することで、rulesに追加することができる。

Links

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした