React奮闘記㉓

2020/10/27

進めてる(進めていく)教材とか

今日やったこと

  • りあクト! TypeScriptで始めるつらくないReact開発 第6章 Linterとフォーマッタでコード美人に

りあクト! TypeScriptで始めるつらくないReact開発 第6章 Linterとフォーマッタでコード美人に

ざっくりサマリー

Prettier

  • コードフォーマッタ
  • TypeScript,HTML,CSS,Vue,Angularなどなどフロントエンドのメジャーどころはほぼ網羅
  • ぷりてぃあって読むのかーぷりったーって読んでたわ
  • スタイルをめぐる論争をやめさせることが目的として開発されてる
  • みんな平等に屈服させられる

  • 行幅の設定値によって読みやすく整形してくれる
  • ESLintとバッティングすることがある

    • ESLintの--fixオプション対応のプラグインルールとして提供されているものを使う
  • .eslintrc.jsファイルに設定を追加する際はPrettier系の共有設定を書くのは一番最後にする

    • 競合ルールを上書きするため
  • $ npx eslint --print-config .eslintrc.js | npx eslint-config-prettier-check
  • 重複ルールのチェック
  • npm-scriptsでpackage.jsonに登録しておくと便利

    stylelint

  • ESLintのCSS版
  • stylelintは自動整形がいい感じだからPrettierとは連携させなくてもいい
  • RESESS → Twitterが提供してたCSSのコード品質ツール

    さらに進んだ設定

  • ESLintはサードパーティからプラグインとしてルールが提供されている
  • Awesome ESLintというリポジトリにいい感じのプラグインが掲載されている
  • 下方互換性のない変更が入ってくることがあるので,.eslintrc.jsのルールは書き換えることがある
  • 設定も見直しされるため必要最低限のカスタマイズにとどめておいたほうがいい
  • Gitのstage環境にあるファイルに対してlintチェックしてくれるツールがある

まとめ

見た目に関するところだと思想によって設定とか変わるから宗教戦争が発生しそうですねw
とはいえ,全然ゼロからの状態なのではじめて見たものを親と思う習性から今回の設定を親と思って宗教戦争に参加していきたいと思います。
ひとまず環境構築の部分は終えたのでアウトプットしていくぞ!

それではまた明日。


書いた人: こへ
音楽と漫画と読書とアニメとスノボが好き。多趣味でいろんなことに興味有ります。 誰しもが一度は使った事があるもののIoT開発をしてます。
Twitterフォローお願いします。