投稿日: 投稿者: iwbjp

Stylelintを使うなら必ず知るべき設定方法と99のルール

Stylelintを使うなら必ず知るべき設定方法と99のルール

Stylelintとは

CSSのコードをチェックするツール。

例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。

Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。

Stylelintのインストール方法

npmを使用するので、例としてターミナルで以下のコマンドを実行してファイルを必要な作成する。

mkdir css-sample; cd css-sample; touch index.css .stylelintrc.json; npm init -y;

関連ファイルを作成したらStylelintとルール(stylelint-config-standard)をインストールする。

npm i -D stylelint stylelint-config-standard

インストールしたら.stylelintrc.jsonファイルに以下の設定を書いて保存する。

.stylelintrc.jsonはルールが書かれている設定ファイルで1個ずつ記入すると時間がかかるので、とりあえずstylelint-config-standardという色々なルールがセットになったものを設定する。

{
  "extends": "stylelint-config-standard"
}

次にindex.cssに以下のようなルール違反になるコードを書いてみよう。

a {
  background: #eee;
  color: #333
}

この状態で npx stylelint "**/*.css" を実行するとExpected a trailing semicolon (セミコロンが末尾にない)というエラーが表示される。

※ SCSSの場合は npx stylelint "**/*.scss" になる。

~/css-sample i npx stylelint "**/*.css"

index.css
 3:13  ✖  Expected a trailing semicolon   declaration-block-trailing-semicolon

ちなみにstylelint-config-standardにはStylistic issuesがのルールが設定されている。

セミコロンが末尾にないとエラーのはStylistic issues内のdeclaration-block-trailing-semicolonに引っかかるからです。

VS Codeの拡張機能 Stylelint

いちいちチェックするたびに「npx stylelint "*/.css"」のようなコマンドを実行するのは面倒なので、コーディング中はVS Codeの拡張機能 StylelintをインストールしてVS Code上でチェックしたほうが作業効率が良いです。

stylelintをVisual Studio MarketplaceからインストールしてVS Codeで例として作成したcss-sampleフォルダをワークスペースに追加して開くだけです。

Stylelintを使うなら必ず知るべき設定方法と99のルール

これだけでCSSファイルを開くと問題があればVS Codeの「問題」のタブに表示されます。

ルールの変更方法

stylelint-config-standardに含まれているindentationのデフォルトの設定は「半角スペース 2個」です。

これを「半角スペース 4個」に変更したい場合は.stylelintrc.jsonのファイルにルールを以下のように上書きして保存します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 4
  }
}

インデントをタブに変更したい場合はこのようになります。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": "tab"
  }
}

ルールの無効化はnullを指定

stylelint-config-standardに設定されているルールで無効にしたいものばあればnullを指定する。

例えばcolor-hex-lengthはshortが設定されているが、CSSの16進数の色指定はPhotoshopなどでは6桁なのでshortだといちいち直さなくてはならなくなってしまう。

そんなときは"color-hex-length": nullを指定して無効にする。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-hex-length": null
  }
}

以降はStylelintのList of rulesについて解説します。

だたし、deprecated (非推奨) は除いてあります。

Possible errors

Color

color-no-invalid-hex

無効な16進数の色指定を禁止する。

/* bad */
body {
  color: #33;
}

/* good */
body {
  color: #333;
}

Font family

font-family-no-duplicate-names

font-familyの重複を禁止する。

/* bad */
body {
  font-family: serif, serif;
}

/* good */
body {
  font-family: serif;
}

日本語と英語の指定による重複は検出されない。

body {
  font-family: "メイリオ", Meiryo, serif;
}

font-family-no-missing-generic-family-keyword

総称フォント名が指定されていないとエラー。

/* bad */
body {
  font-family: Meiryo;
}

/* good */
body {
  font-family: Meiryo, sans-serif;
}

Named grid areas

named-grid-areas-no-invalid

grid-template-areasが正しく指定されていないとエラー。

/* bad */
a {
  grid-template-areas:
    "a a a"
    "b b ";
}

/* good */
a {
  grid-template-areas:
    "a a a"
    "b b b";
}

Function

function-calc-no-invalid

calcが無効な式だとエラー。

/* bad */
h1 {
  width: calc(100px * 5px);
}

/* good */
h1 {
  width: calc(100px * 5);
}

function-calc-no-unspaced-operator

calcの演算子の前後に半角スペースがないとエラー。

/* bad */
h1 {
  width: calc(100px *5);
}

/* good */
h1 {
  width: calc(100px * 5);
}

function-linear-gradient-no-nonstandard-direction

linear-gradientでdirectionの値にtoやdegなどで指定していないとエラー。

topはtoが付いていないと下から上ではなく上から下と逆になる。

/* bad */
h1 {
  background: linear-gradient(top, #fff, #000);
}

h2 {
  background: linear-gradient(45, #fff, #000);
}

/* good */
h1 {
  background: linear-gradient(to top, #fff, #000);
}

h2 {
  background: linear-gradient(45deg, #fff, #000);
}

String

string-no-newline

contentなどの文字列を途中で改行するとエラー。

/* bad */
h1::before {
  content: "foo
  bar";
}

/* good */
h1::before {
  content: "foo bar";
}

Unit

unit-no-unknown

使用不可の単位を検出。

/* bad */
h1 {
  font-size: 2en;
}

/* good */
h1 {
  font-size: 2em;
}

Property

property-no-unknown

使用不可のプロパティを検出。

/* bad */
h1 {
  fontsize: 2em;
}

/* good */
h1 {
  font-size: 2em;
}

Keyframe declaration

keyframe-declaration-no-important

@keyframesで!importantを使用するとエラー。

/* bad */
@keyframes foo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1 !important;
  }
}

/* good */
@keyframes foo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Declaration block

declaration-block-no-duplicate-custom-properties

カスタムプロパティが重複していたらエラー。

/* bad */
:root {
  --first-color: blue;
  --first-color: green;
}

h1 {
  color: var(--first-color);
}

/* good */
:root {
  --first-color: blue;
  --second-color: green;
}

h1 {
  color: var(--first-color);
}

declaration-block-no-duplicate-properties

プロパティが重複していたらエラー。

プロパティが重複すると予期せぬ結果になる可能性があるため、設定したほうが良い。
(stylelint-config-standardには含まれていない)

/* bad */
h1 {
  color: blue;
  color: green;
}

/* good */
h1 {
  color: blue;
}

declaration-block-no-shorthand-property-overrides

ショートハンドプロパティで上書きするとエラー。

/* bad */
h1 {
  background-color: blue;
  background: green;
}

/* good */
h1 {
  background: green;
}

Block

block-no-empty

ブロックが空だとエラー。

/* bad */
h1 {
}

/* good */
h1 {
  color: blue;
}

Selector

selector-pseudo-class-no-unknown

不明な擬似クラスだとエラー。

/* bad */
a:hober {
  color: blue;
}

/* good */
a:hover {
  color: blue;
}

selector-pseudo-element-no-unknown

不明な疑似要素セレクターだとエラー。

/* bad */
h1::befor {
  content: "foo";
}

/* good */
h1::before {
  content: "foo";
}

selector-type-no-unknown

不明なセレクターだとエラー。

/* bad */
hx {
  color: green;
}

/* good */
h1 {
  color: green;
}

Media feature

selector-type-no-unknown

不明なmedia featureだとエラー。

/* bad */
@media (mix-width: 700px) {
  h1 {
    color: blue;
  }
}

/* good */
@media (min-width: 700px) {
  h1 {
    color: blue;
  }
}

At-rule

at-rule-no-unknown

不明なat-ruleだとエラー。

/* bad */
@medea (min-width: 700px) {
  h1 {
    color: blue;
  }
}

/* good */
@media (min-width: 700px) {
  h1 {
    color: blue;
  }
}

Comment

comment-no-empty

/* bad */
h1 {
  /*  */
  color: blue;
}

/* good */
h1 {
  /* テキスト色を青にする */
  color: blue;
}

General / Sheet

no-descending-specificity

詳細度の低い指定が詳細度の高い指定よりあとにあるとエラー。

/* bad */
body h1 {
  color: green;
}

h1 {
  color: blue;
}

/* good */
h1 {
  color: blue;
}

body h1 {
  color: green;
}

no-duplicate-at-import-rules

@importで読み込むファイルが重複しているとエラー。

/* bad */
@import 'a.css';
@import 'a.css';

/* good */
@import 'a.css';
@import 'b.css';

no-duplicate-selectors

セレクタが重複しているとエラー。

/* bad */
h1 {
  color: blue;
}

h2 {
  color: green;
}

h1 {
  color: orange;
}

/* good */
h1 {
  color: blue;
}

h2 {
  color: green;
}

no-empty-source

CSSのコードが空だとエラー。

セレクタがなくてもコメントがあるとエラーにならない。

/* good */

no-extra-semicolons

セミコロン ( ; ) が2つ以上あるとエラー。

/* bad */
h1 {
  color: blue;;
}

/* good */
h1 {
  color: blue;
}

no-invalid-double-slash-comments

cssファイルに // のコメントがあるとエラー。

scssファイルならエラーにならない。

/* bad */

// テキスト色を青にする
h1 {
  color: blue;
}

/* good */

/* テキスト色を青にする */
h1 {
  color: blue;
}

no-invalid-position-at-import-rule

@importがセレクタなどよりも先に書かれてなければエラー。

/* bad */
h1 {
  color: blue;
}

@import 'index.css';

/* good */
@import 'index.css';

h1 {
  color: blue;
}

Limit language features

Alpha-value

alpha-value-notation

アルファ値が設定と異なるとエラー。

"number" または "percentage" が設定できるが、一般的にはnumberが使用されるのでnumberを設定すると良いだろう。



/* bad */
h1 {
  opacity: 50%;
}


/* good */
h1 {
  opacity: 0.5;
}

hue-degree-notation

色相の角度の指定が設定通りでなければエラー。

"angle" か "number" のどちらかを設定する。」

numberを指定すれば記入ミスを減らせる。

/* bad */
h1 {
  color: hsl(200deg 20% 50%);
}

/* good */
h1 {
  color: hsl(200 20% 50%);
}

Color

color-function-notation

rgba()とhsla()の書き方が "modern" or "legacy" になっているか。

現在はmodernだとIE11やAndroid 4.4以下だと反映されず、VS Codeで色が表示されないのでlegacyを設定しておいたほうが良いだろう。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-function-notation": "legacy"
  }
}

color-named

blueなどのカラーネームを許可するか。

"never" だと許可せず、逆に "always-where-possible" を設定すると#00fがblueでないとエラーになる。

表記揺れを防ぐためにも "never" を設定したほうが良いだろう。

/* never */
h1 {
  color: blue;
}

/* always-where-possible */
h2 {
  color: #00f;
}

color-no-hex

#00fなどの16進数による色指定があるとエラー。

16進数なしのCSSの色指定は現実的ではないので、実際に使うことはない。

Length

length-zero-no-unitlength-zero-no-unit

0に単位をつけるとエラー。

/* bad */
h1 {
  margin: 0px;
}


/* good */
h1 {
  margin: 0;
}

Font weight

font-weight-notation

"numeric" or "named-where-possible" を指定することで600などの数値かboldなどの名前で付けるかをルールに追加できる。

Function

function-allowed-list

設定で許可した以外のfunctionが使用された場合はエラー。

例えば以下のように設定するとrgbaとlinear-gradient以外のfunctionはエラー。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "function-allowed-list": ["rgba", "linear-gradient"]
  }
}

h1 {
  transform: scale(2);
}

h2 {
  color: rgba(255, 0, 0, 0.5);
}

h3 {
  background: linear-gradient(to top, #000, #333);
}

function-disallowed-list

function-allowed-listとは逆に設定したfunctionがエラー。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "function-disallowed-list": ["scale"]
  }
}

h1 {
  transform: scale(2);
}

function-url-no-scheme-relative

//で始まり、その後にホストが続くURLはエラー。

/* bad */
h1 {
  background: url(//example.com/foo.png);
}

/* good */
h1 {
  background: url(https://example.com/foo.png);
}

function-url-scheme-allowed-list

設定したURLスキームだけを許可する。

以下のように設定するとhttpsでなければエラー。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "function-url-scheme-allowed-list": ["/^https/"]
  }
}

/* bad */
h1 {
  background: url(http://example.com/foo.png);
}

/* good */
h1 {
  background: url(https://example.com/foo.png);
}

function-url-scheme-disallowed-list

function-url-scheme-allowed-listとは逆で一致するものはエラー。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "function-url-scheme-disallowed-list": ["/^http/"]
  }
}


h1 {
  background: url(http://example.com/foo.png);
}

Keyframes

keyframes-name-pattern

正規表現で指定したパターンの@keyframesの名前でなければエラー。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "keyframes-name-pattern": "anime-.+"
  }
}

/* bad */
h1 {
  animation: sample;
}

@keyframes sample {}

/* good */
h1 {
  animation: anime-sample;
}

@keyframes anime-sample {}

Number

number-max-precision

小数点以下の桁数を制限する。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "number-max-precision": 2
  }
}

/* bad */
.foo {
  width: 33.3333%;
}

/* good */
.bar {
  width: 33.33%;
}

Time

time-min-milliseconds

最小ミリ秒数を指定する。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "time-min-milliseconds": 100
  }
}


/* bad */
.foo {
  animation: 80ms;
}

.bar {
  animation-delay: 0.01s;
}

/* good */
.foo2 {
  animation: 800ms;
}

.bar2 {
  animation-delay: 0.1s;
}

Unit

unit-allowed-list

許可する単位を指定する。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "unit-allowed-list": ["px", "rem"]
  }
}


/* bad */
.foo {
  font-size: 1em;
}

.bar {
  padding: 10%;
}

/* good */
.foo2 {
  font-size: 1rem;
}

.bar2 {
  padding: 10px;
}

unit-disallowed-list

許可しない単位を指定する。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "unit-disallowed-list": ["vh", "em"]
  }
}


/* bad */
.foo {
  font-size: 1em;
}

.bar {
  height: 100vh;
}

/* good */
.foo2 {
  font-size: 1rem;
}

.bar2 {
  padding: 100%;
}

Shorthand property

shorthand-property-no-redundant-values

省略可能なプロパティで冗長な値を許可しない。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "shorthand-property-no-redundant-values": true
  }
}


/* bad */
.foo {
  padding: 10px 10px 10px 10px;
}

/* good */
.bar {
  padding: 10px;
}

Value

value-no-vendor-prefix

{
  "extends": "stylelint-config-standard",
  "rules": {
    "value-no-vendor-prefix": true
  }
}

/* bad */
.foo {
  display: -webkit-flex;
}

/* good */
.bar {
  display: flex;
}

Custom property

custom-property-pattern

カスタムプロパティのパターンを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "custom-property-pattern": "foo-.+"
  }
}


/* bad */
:root {
  --boo-bar: 0;
}

/* good */
:root {
  --foo-bar: 0;
}

Property

property-allowed-list

許可するプロパティのリストを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "property-allowed-list": ["display", "/^background/"]
  }
}


/* bad */
.foo {
  visibility: hidden;
  color: #000;
}

/* good */
.bar {
  display: none;
  background-color: #000;
}

property-disallowed-list

許可しないプロパティのリストを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "property-disallowed-list": ["display", "/^background/"]
  }
}


/* bad */
.bar {
  display: none;
  background-color: #000;
}

/* good */
.foo {
  visibility: hidden;
  color: #000;
}

property-no-vendor-prefix

プロパティのベンダープレフィックスを禁止します。

value-no-vendor-prefixと同様に-webkit-touch-calloutのような「ベンダープレフィックスあり」しか存在しないプロパティの場合はエラーにならない。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "property-no-vendor-prefix": true
  }
}


/* bad */
.foo {
  -webkit-transform: scale(1);
}

/* good */
.bar {
  transform: scale(1);
  -webkit-touch-callout: none;
}

Declaration

declaration-block-no-redundant-longhand-properties

ショートハンドで記述できるものはロングハンドの記述を禁止します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-block-no-redundant-longhand-properties": true
  }
}

/* bad */
.foo {
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 3px;
  padding-left: 4px;
}

/* good */
.bar {
  padding: 1px 2px 3px 4px;
}

declaration-no-important

!importantを禁止する。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-no-important": true
  }
}

/* bad */
.foo {
  padding: 10px !important;
}

/* good */
.bar {
  padding: 10px;
}

declaration-property-unit-allowed-list

宣言内で許可されるプロパティとユニットのペアのリストを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-property-unit-allowed-list": {
      "font-size": ["rem", "px"],
      "/^animation/": ["s"]
    }
  }
}

/* bad */
.foo {
  font-size: 1em;
  animation-duration: 500ms;
}

/* good */
.bar {
  font-size: 1rem;
  animation-duration: 0.5s;
}

declaration-property-unit-disallowed-list

宣言内で許可しないプロパティとユニットのペアのリストを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-property-unit-disallowed-list": {
      "font-size": ["em", "%"],
      "/^animation/": ["ms"]
    }
  }
}

/* bad */
.foo {
  font-size: 1em;
  animation-duration: 500ms;
}

/* good */
.bar {
  font-size: 1rem;
  animation-duration: 0.5s;
}

declaration-property-value-allowed-list

許可するプロパティと値のペアのリストを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-property-value-allowed-list": {
      "/color/": ["/^light/"]
    }
  }
}


/* bad */
.foo {
  color: blue;
}

/* good */
.bar {
  color: lightblue;
}

declaration-property-value-disallowed-list

許可しないプロパティと値のペアのリストを指定します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-property-value-disallowed-list": {
      "/color/": ["/^blue/"]
    }
  }
}


/* bad */
.foo {
  color: blue;
}

/* good */
.bar {
  color: lightblue;
}

Declaration block

declaration-block-single-line-max-declarations

1行の宣言ブロック内の宣言の数を制限します。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-block-single-line-max-declarations": 1
  }
}


/* bad */
.foo { color: blue; background: "pink"; }

/* good */
.bar {
  color: blue;
  background: "pink";
}

List of rulesが多すぎるので以下略

続きは公式サイトで

https://stylelint.io/user-guide/rules/list/

関連する記事

  1. 1分でわかるCSSの適用範囲を限定できる@scopeの使い方

    1分でわかるCSSの適用範囲を限定できる@scopeの使い方
  2. Google Chrome v112 CSSのネストによる表示崩れに注意

    Google Chrome v112 CSSのネストによる表示崩れに注意
  3. CSS初心者がよくやってしまう7つの間違った書き方

    CSS初心者がよくやってしまう7つの間違った書き方
  4. GASの予定の色変更は色番号ではなくカラー名を使用したほうが良い

    GASの予定の色変更は色番号ではなくカラー名を使用したほうが良い
カテゴリーcss