ブチ切れて覚えるフロントエンド【stylelint編】

こんにちは。
フロントエンドのキャッチアップをすべく書籍なりなんなりを読んでいますが、まあまあの頻度でエラーが出ます。そして調べても原因がパッと出てきません。設定ファイルとか多いし複雑だし、中の記述もvscodeの設定も必要だし、人類には早すぎないか？？

今回は、書籍で勉強中に発生したstylelintのエラーを、解決ステップと一緒に紹介します。
そして、このやり方は良くないと思ったので、その反省の備忘録でもあります。

stylelintとは

Stylelintは、CSS、SCSS、Sass、Lessなどのスタイルシートに対する静的コード解析ツールです。コーディングスタイルの一貫性を保ち、エラーや一般的な問題を検出するのに役立ちます

発生したエラー

index.css内で以下のエラー

Unknown rule string-quotes.Stylelint(string-quotes)

結論、string-quotesの設定が廃止されており、
prettier側で設定すればいいという話でした。

自戒として解決ステップを記載します。

• stylelintの設定ファイルを見る

  とりあえず.stylelintrc.json見るか...

  .stylelintrc.json

  {
    "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
    "ignoreFiles": ["**/node_modules/**"],
    "plugins": ["stylelint-order"],
    "rules": {
      "string-quotes": "single"
    }
  }
  
  

  パッと見おかしいとこはなさそう。

• ググる

  ググります。「Unknown rule string-quotes.Stylelint(string-quotes)」
  ......何も出てこないが？？？？？？？？？？
  、
  調べ方を変えます「stylelint string-quotes」
  ......出ないが？？？

  検索結果の2ページ目に行きます。
  「~~......The "string-quotes" rule is deprecated......」
  お？

  おそらく非推奨か廃止かになっているってハナシっすねーナルホド。

  
  

• stylelintの公式ページに行く
  検索フォームから「string-quotes」と検索。

  すると、
  https://stylelint.io/migration-guide/to-15
  ページ内での記述が見つかりました。

  どれどれ...
  Deprecated stylistic rulesという項目の中に、string-quotesが見つかりました。
  少し読み進めます。

  「When we created these rules, pretty printers (like Prettier) didn't exist. They now offer a better way to consistently format code, especially whitespace. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.」

  ふむふむ。ナルホド。prettierがなかったときに作っちゃったルールですよと。
  もうすこし読み進めましょう。

  「We've removed the deprecated rules from the latest version of the standard config. It still helps you write consistent CSS by turning on many of the other rules that enforce conventions, e.g. most of the *-notation, *-pattern and *-quotes rules.」

  ふむふむ...
  これでは、「Unknown rule string-quotes.Stylelint(string-quotes)」というエラーが発生したことも頷けます。

  そしておそらく、string-quotes相当の設定は、stylelintではなく、prettierで設定しろという感じでしょう。

• stylelintrc.jsonの修正、prettierの設定を見る
  まず、.stylelintrc.jsonから、「"string-quotes":"single"」を消しましょう。
  そうすると、先ほどまで発生していたcssファイル内でのエラーはなくなりました。

  次に、「"string-quotes": "single"」相当の設定をprettierでやりましょう。
  .prettierrc.jsonの記述を見ます。

  .prettierrc.json

  {
    "singleQuote": true,
    "endOfLine": "auto"
  }
  

  どうやら既に入っていたようです。
  しかし、cssファイルを保存しても自動的にダブルクォートがシングルクォートに変換されません。チッ！！！
  他に設定したものは、settings.jsonくらいか...

  settings.json

  "editor.formatOnSave": false,
  

  ふむ...

  settings.json

    "[graphql]": {
      "editor.formatOnSave": true
    },
    "[javascript]": {
      "editor.formatOnSave": true
    },
    "[javascriptreact]": {
      "editor.formatOnSave": true
    },
    "[json]": {
      "editor.formatOnSave": true
    },
    "[typescript]": {
      "editor.formatOnSave": true
    },
    "[typescriptreact]": {
      "editor.formatOnSave": true
    },
  

  ふむ......
  cssの保存時の設定が必要っぽい？

  settings.json(追記)

    "[css]": {
      "editor.formatOnSave": true
    },
  

  css保存時に整形が走りました！
  ヨシ！！！！！

大反省

ばかだ。僕ははばかだ。¹

あまりにも自分が許せないので、反省を別途記事にします。
反省記事はこちら

1. 夏目漱石『こころ』より ↩