stylelint-config-standard 読書会 #3

前回のつづきです!


"color-hex-case": "lower"

Specify lowercase or uppercase for hex colors.

color-hex-case

- a { color: #FFF; }
+ a { color: #fff; }

色を指定する 16 進数の値を小文字で書くか大文字で書くか。ここでは lower が指定されているので、小文字で書く。


"color-hex-length": "short"

Specify short or long notation for hex colors.

color-hex-length

- a { color: #ffffff; }
+ a { color: #fff; }

色を指定する 16 進数の値は、例えば fff に省略できるが、省略できるときは省略するかどうか。ここでは short が指定されているので、省略する。


"color-no-invalid-hex": true

Disallow invalid hex colors.

color-no-invalid-hex

- a { color: #00; }
+ a { color: #000; }

色を指定する 16 進数の値がおかしいときに指摘するかどうか。ここでは true が指定されているので、怒られる。あたりまえのようにおもうけど、書き間違えたときに教えてくれるよってことですよね。


"comment-empty-line-before": "always"

Require or disallow an empty line before comments.

comment-empty-line-before

- a {}
- /* comment */
+ a {}
+
+ /* comment */

CSS のコメントを書くとき、直前の行を空けるかどうか。ここでは always が指定されているので、空ける。

また、このルールには except と ignore のオプションも指定されている。

except: ["first-nested"]

a {
  /* comment */
  color: pink;
}

ルールセットがはじまったばかりのコメントは、空行を空けなくてもいい。

ignore: ["stylelint-commands"]

a {
  background: pink;
  /* stylelint-disable color-no-hex */
  color: pink;
}

stylelint で指定したルールに反している記述だけどここだけ除外したいってとき、 CSS のコメントで除外する旨を書いておくと stylelint が無視してくれる。そのコメントの前も改行するのか?というと、これは改行しなくてもいいように除外するようになっている(ややこしい)。

ここでは指定されていないけど、コメントの次の行にコメントを書いたときに改行するのかどうか… という指定もできる。


"comment-no-empty": true

Disallow empty comments.

comment-no-empty

- /* */
+ /* comment */

中身がからっぽのシンタックスだけのコメントを許すかどうか。ここでは true が指定されているので、許さない。


"comment-whitespace-inside": "always"

Require or disallow whitespace on the inside of comment markers.

comment-whitespace-inside

- /*comment*/
+ /* comment */

コメントのシンタックスの開始の文字の後・終了の文字の前に半角スペースを空けるかどうか。ここでは always が指定されているので、空ける。なんか昔の Internet Explorer とか一部のブラウザだとスペース空いてないと解釈してくれないんじゃなかったっけ…(要出典)。


"custom-property-empty-line-before": "always"

Require or disallow an empty line before custom properties.

custom-property-empty-line-before

- a {
-   top: 10px;
-   --foo: pink;
-   --bar: red;
- }
+ a {
+   top: 10px;
+ 
+   --foo: pink;
+ 
+   --bar: red;
+ }

CSS のカスタムプロパティを書くときに、直前の行を空けるかどうか。ここでは always が指定されているので、空ける。へえ〜 そうなんだなあ。

また、このルールには except と ignore のオプションも指定されている。

except: ["after-custom-property", "first-nested"]

a {
  --foo: pink;
  --bar: red;
}

after-custom-property は、カスタムプロパティが連続して書かれるときに、次に書く行は空行を空けなくてよしということを指定している。

first-nested は、ルールセットがはじまったばかりに書かれたカスタムプロパティは、空行を空けなくてもいい。

…というわけで、カスタムプロパティしか書かないルールセットは例のように空行をあける必要がない。ふつうのプロパティと混在して書くときは空行を空けろってことなんですね。

ignore: ["after-comment", "inside-single-line-block"]

a {
  /* comment */
  --foo: pink;
}

after-comment は、コメントの次の行に書かれたカスタムプロパティは対象としないって指定。

a { --foo: pink; --bar: red; }

inside-single-line-block は、複数のカスタムプロパティを 1 行で書いちゃったときは対象としないって指定。


c からはじまるルールが終わったところで、きょうはここまで。