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

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 5/13 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ 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
とはいえ,全然ゼロからの状態なのではじめて見たものを親と思う習性から今回の設定を親と思って宗教戦争に参加していきたいと思います。
ひとまず環境構築の部分は終えたのでアウトプットしていくぞ！

それではまた明日。