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

おすすめのオンラインプログラミング学習

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

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の使い方はこちらの記事にまとめました。

stylelint導入(設定/自動修正/ルールの例外・無効など)
stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。 vs codeでstylelint-plusの導入 stylelint-plusの拡張をインストールして自動修正 あらかじ...

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

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました