stylelintのエラーまとめ Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)

2020年8月5日

stylelintのエラーをまとめておきます。初心者用に簡単なエラーも残しておきます。

Contents

1 stylelintのエラー(error)
2 stylelint-plusの設定や使い方

stylelintのエラー(error)

Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)

Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)

ブラウザに実装されているファミリは末尾につけましょうエラーですね。フォントがない場合の回避策です。ジェネリックの意味は薬局をイメージされる方も多いかもですが、ノーブランドですね。FontAwesomeの場合も必要なのか。

      "rules": {
        "font-family-no-missing-generic-family-keyword": [
          true,
          {
            "ignoreFontFamilies": "FontAwesome"
          }
      ]
    }

最初はstylelintrcのルールで回避しちゃえと思ったのですが、なんかうまくいかなかったので下記で回避しました。まあ、こちらの方が素直ですかね。

font-family: 'FontAwesome'

↓

font-family: 'FontAwesome', sans-serif;

バージョンが5の場合はこうですね。

font-family: 'Font Awesome 5 Free', sans-serif;

半角スペースが入るフォントはクオーテーションで囲みましょう(シングルとダブルはどちらでもいいですが、ダブルクオーテーションは文字列検索するとき面倒なので個人的にシングル派です。

Expected selector “” to come before selector “” (no-descending-specificity)

Expected selector "" to come before selector "" (no-descending-specificity)

記述する順番にひっっくり返せばいいだけのようです。自動修正はされないようですね。

Unexpected nonstandard direction (function-linear-gradient-no-nonstandard-direction)

Unexpected nonstandard direction (function-linear-gradient-no-nonstandard-direction)

linear-gradient(left top

↓toを入れないとダメなようですね。

linear-gradient(to left top

stylelint-plusの設定や使い方

stylelint-plusの使い方はこちらの記事にまとめました。

ebookbrain

【v14で動かない!?】VsCodeでstylelintの使い方(設定/自動修正/ルールの例外・無効など) stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。 stylelintとは stylelintはcssスタイルのコードが正しいのか検証を行うもの...

ご参考になれば幸いです。